Объект Document | DOM справочник
Каждая веб-страница, загружаемая в браузере, имеет свой собственный объект Document. Интерфейс объекта Document служит точкой доступа к содержимому веб-страницы (дерево DOM, включающее все элементы со всем их содержимым) и предоставляет глобальную функциональность для документа ( например, получение URL-адреса страницы или создание новых элементов).
Объект Document используется для получения, изменения или добавления содержимого в HTML-документ и для обработки событий в этом документе.
Методы
| Метод | Описание |
|---|---|
| addEventListener() | Позволяет установить обработчик события для документа. |
| createElement() | Создает новый элемент. |
| createTextNode() | Создает и возвращает текстовый узел с указанным текстом. Принимает один аргумент (строку с текстом). |
| getElementById() | Возвращает ссылку на элемент, с указанным идентификатором. |
| getElementsByClassName() | Возвращает коллекцию элементов, соответствующих указанному классу. |
| getElementsByName() | Возвращает коллекцию всех элементов в документе, которые имеют атрибут name с указанным значением. Элементы хранятся в коллекции в том порядке, в котором они встречаются в исходном коде документа. Метод document.getElementsByName() относится к объекту HTMLDocument, а не к объекту Document, поэтому он доступен только в HTML-документах и не доступен в XML-документах. |
| getElementsByTagName() | Возвращает массив элементов, указанного типа. |
| querySelector() | Возвращает первый элемент, совпавший с одним из указанных селекторов. |
| querySelectorAll() | Возвращает массив элементов, соответствующих указанным селекторам. |
| removeEventListener() | Удаляет обработчик события, который был установлен с помощью метода addEventListener(). |
| write() | Записывает переданные ему аргументы в документ. |
| writeln() | Записывает переданные ему аргументы в документ, вставляя после вывода данных пробел. |
Свойства
| Свойство | Описание |
|---|---|
| activeElement | Возвращает элемент, который в данный момент находится в фокусе. |
| documentURI | Возвращает строку, содержащую URL-адрес документа. |
| images | Возвращает массив, содержащий все элементы <img> документа. |
| links | Возвращает массив, содержащий все элементы <a> и <area>, которые имеют атрибут href. |
Справочники и спецификации
В этом разделе мы познакомимся со справочниками и спецификациями.
Если вы только начинаете изучение, то вряд ли они будут нужны прямо сейчас. Тем не менее, эта глава находится в начале, так как предсказать точный момент, когда вы захотите заглянуть в справочник – невозможно, но точно известно, что этот момент настанет.
Поэтому рекомендуется кратко взглянуть на них и взять на заметку, чтобы при необходимости вернуться к ним в будущем.
Самая полная и подробная информация по JavaScript и браузерам есть в справочниках.
Её объём таков, что перевести всё с английского невозможно. Даже сделать «единый полный справочник» не получается, так как изменений много и они происходят постоянно.
Тем не менее, жить вполне можно если знать, куда смотреть.
Есть три основных справочника по JavaScript на английском языке:
Mozilla Developer Network – содержит информацию, верную для основных браузеров. Также там присутствуют расширения только для Firefox (они помечены).
Когда мне нужно быстро найти «стандартную» информацию по
RegExp– ввожу в Google «RegExp MDN», и ключевое слово «MDN» (Mozilla Developer Network) приводит к информации из этого справочника.MSDN – справочник от Microsoft. Там много информации, в том числе и по JavaScript (они называют его «JScript»). Если нужно что-то, специфичное для IE – лучше лезть сразу туда.
Например, для информации об особенностях
RegExpв IE – полезное сочетание: «RegExp msdn». Иногда к поисковой фразе лучше добавить термин «JScript»: «RegExp msdn jscript».Safari Developer Library – менее известен и используется реже, но в нём тоже можно найти ценную информацию.
Есть ещё справочники, не от разработчиков браузеров, но тоже хорошие:
- http://help.dottoro.com – содержит подробную информацию по HTML/CSS/JavaScript.
- http://javascript.ru/manual – справочник по JavaScript на русском языке, он содержит основную информацию по языку, без функций для работы с документом. К нему можно обращаться и по адресу, если знаете, что искать. Например, так: http://javascript.ru/RegExp.
- http://www.qu
Поиск элементов в DOM
Стандарт DOM предусматривает несколько средств поиска элемента. Это методы getElementById, getElementsByTagName и getElementsByName.
Более мощные способы поиска предлагают javascript-библиотеки.
Самый удобный способ найти элемент в DOM — это получить его по id. Для этого используется вызов document.getElementById(id)
Например, следующий код изменит цвет текста на голубой в div‘е c id="dataKeeper":
document.getElementById('dataKeeper').style.color = 'blue'
Следующий способ — это получить все элементы с определенным тегом, и среди них искать нужный. Для этого служит document.getElementsByTagName(tag). Она возвращает массив из элементов, имеющих такой тег.
Например, можно получить второй элемент(нумерация в массиве идет с нуля) с тэгом li:
document.getElementsByTagName('LI')[1]
Что интересно, getElementsByTagName можно вызывать не только для document, но и вообще для любого элемента, у которого есть тег (не текстового).
При этом будут найдены только те объекты, которые находятся под этим элементом.
Например, следующий вызов получает список элементов LI, находящихся внутри первого тега div:
document.getElementsByTagName('DIV')[0].getElementsByTagName('LI')
Вызов elem.getElementsByTagName('*') вернет список из всех детей узла elem в порядке их обхода.
Например, на таком DOM:
<div>
<ol>
<li>1</li>
<li>2</li>
</ol>
</div>
Такой код:
var div = document.getElementById('d1')
var elems = div.getElementsByTagName('*')
for(var i=0; i<elems.length; i++) alert(elems[i].id)
Выведет последовательность: ol1, li1, li2.
Метод document.getElementsByName(name) возвращает все элементы, у которых имя (атрибут name) равно данному.
Он работает только с теми элементами, для которых в спецификации явно предусмотрен атрибут name: это form, input, a, select, textarea и ряд других, более редких.
Метод document.getElementsByName не будет работать с остальн
Задачи на продвинутую работу с DOM на JavaScript
Перед решением задач изучите теорию к данному уроку.
Задачи для решения
Работа с классами
Для решения задач данного блока вам понадобятся следующие свойства: classList.Дан элемент #elem. Добавьте ему класс www.
Дан элемент #elem. Удалите у него класс www.
Дан элемент #elem. Проверьте наличие у него класса www.Дан элемент #elem. Добавьте ему класс www, если его нет и удалите — если есть.
Дан элемент #elem. Узнайте количество его классов.
Дан элемент #elem. Выведите последовательно алертом его классы.
Работа с CSS
Для решения задач данного блока вам понадобятся следующие свойства: cssText.Дан элемент #elem. Сделайте его красного цвета, размером 30px, добавьте ему границу. Решите задачу с помощью свойства cssText.
Свойство tagName
Для решения задач данного блока вам понадобятся следующие свойства: tagName.Дан элемент #elem. По клику на него выведите название его тега.
Дан элемент #elem. По клику на него выведите название его тега в нижнем регистре.
Даны элементы с классом www. Добавьте каждому элементу в конец название его тега в нижнем регистре.
Вставка элементов через appendChild
Для решения задач данного блока вам понадобятся следующие методы: createElement, appendChild.Дан ol. Вставьте ему в конец li с текстом ‘пункт’.
Дан ul. Дан массив. Вставьте элементы этого массива в конец ul так, чтобы каждый элемент стоял в своем li.
Привязывание событий при вставке
Дан ul. Дан массив. Вставьте элементы этого массива в конец ul так, чтобы каждый элемент стоял в своем li. Сделайте так, чтобы к вставляемым li было привязано следующее событие: по нажатию на li она должна вывести на экран свой текст.
Вставка элементов через insertBefore
Для решения задач данного блока вам понадобятся следующие методы: insertBefore.Дан элемент ul, а в нем li #elem. Вставьте перед элементом #elem новую li с текстом ‘!!!’.
Вставка элементов через insertAdjacentHTML
Для решения задач данного блока вам понадобятся следующие методы: insertAdjacentHTML. Дан элемент #elem. Вставьте перед ним span с текстом ‘!!!’.Дан элемент #elem. Вставьте после него span с текстом ‘!!!’.
Дан элемент #elem. Вставьте ему в начало span с текстом ‘!!!’.
Дан элемент #elem. Вставьте ему в конец span с текстом ‘!!!’.
Потомки
Дан элемент #elem. Найдите первого потомка этого элемента и сделайте его текст красного цвета.
Дан элемент #elem. Найдите последнего потомка этого элемента и сделайте его текст красного цвета.
Дан элемент #elem. Найдите всех потомков этого элемента и добавьте им в конец текст ‘!’.
Соседи
Дан элемент #elem. Найдите его соседа сверху и добавьте ему в конец текст ‘!’.
Дан элемент #elem. Найдите его соседа снизу и добавьте ему в конец текст ‘!’.
Дан элемент #elem. Найдите его соседа снизу его соседа снизу (следующий элемент за соседним) и добавьте ему в конец текст ‘!’.
Родители
Для решения задач данного блока вам понадобятся следующие свойства: parentElement, parentNode.Дан элемент #elem. Найдите его родителя и покрасьте его в красный цвет.
Дан элемент #elem. Найдите родителя его родителя и покрасьте его в красный цвет.
Удаление и клонирование
Для решения задач данного блока вам понадобятся следующие свойства: removeChild.Дан элемент #parent, внутри него дан элемент #child. Дана кнопка. По нажатию на эту кнопку удалите элемент #child.
Дан ol. По нажатию на кнопку получите его последнего потомка и удалите его.
Дан элемент. Сделайте так, чтобы по нажатию по нему этот элемент удалялся.
Дан ol, а внутри него li. Сделайте так, чтобы по нажатию на любую li эта li удалялась.
Клонирование
Для решения задач данного блока вам понадобятся следующие свойства: cloneNode.Дан инпут. Дана кнопка. По нажатию на кнопку клонируйте этот инпут.
Практика
Дан массив. Создайте ul через createElement, затем вставьте каждый элемент этого массива в отдельную li внутри этой ul, затем вставьте эту ul в конец body.
Дан инпут. Рядом с ним находится кнопочка «+». По нажатию на эту кнопку под нашим инпутом должен появится еще один пустой инпут.
Дан инпут. В него вводится число. По потери фокуса сделайте так, чтобы каждая цифра вставилась в новый инпут. Инпутов для цифр изначально не существует, они должны создаться в процессе работы скрипта.
Дана кнопка. Сделайте так, чтобы по нажатию на эту кнопку, скрывался родитель этой кнопки.