Объектная модель документа
Объектная модель документа (Document Object Model, DOM) – это интерфейс программирования приложений (Application Programming Interface, API) для XML, который был расширен также для работы с HTML.
В DOM всё содержимое страницы (элементы и текст) представляется как иерархия узлов. Рассмотрим следующий код:
| <html> <head> <title>Простая страница</title> </head> <body> <p>Привет Мир!</p> </body> </html> |
Этот код можно изобразить с помощью DOM как иерархию узлов:
Представляя документ в виде дерева узлов, DOM API предоставляет разработчикам полный контроль над содержимым и структурой веб-страницы.
При описании древовидной структуры DOM используется терминология, которая была заимствована у генеалогических деревьев.
Так, узел, расположенный непосредственно над данным узлом, называется родительским по отношению к данному узлу. Узлы, расположенные на один уровень ниже данного узла, называются дочерними по отношению к данному узлу. Узлы, находящиеся на одном уровне и имеющие одного и того же родителя, называются сестринскими или братьями. Узлы, расположенные на любое число уровней ниже данного узла, называются его потомками. Родительские, прародительские и любые другие узлы, расположенные на любое число уровней выше данного узла, называются его предками.
Справочник по DOM содержит описание объектов Document, Element, Event и NodeList, включая описание их методов и свойств:
- HTML Document
- HTML Element
- HTML Event
- NodeList
Объект Document
Каждая веб-страница, загружаемая в браузере, имеет свой собственный объект 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. |
Объект Element
Объект Element является интерфейсом, предоставляющим методы и свойства для работы со всеми видами элементов.
Методы
| Метод | Описание |
| addEventListener() | Позволяет установить обработчик события для элемента. |
| appendChild() | Добавляет дочерний узел в конец родительского элемента. |
| getAttribute() | Извлекает значение указанного атрибута. |
| getElementsByClassName() | Возвращает коллекцию элементов, соответствующих указанному классу. |
| getElementsByTagName() | Возвращает массив элементов, указанного типа. |
| hasAttribute() | Возвращает значение true, если элемент имеет указанный атрибут, или false в обратном случае. |
| insertBefore() | Вставляет элемент перед указанным элементом. |
| removeAttribute() | Удаляет указанный атрибут из текущего элемента. |
| removeChild() | Удаляет указанный дочерний узел из текущего родительского элемента. |
| removeEventListener() | Удаляет обработчик события, который был установлен с помощью метода addEventListener(). |
| setAttribute() | Добавляет к элементу атрибут и устанавливает для него значение. |
Свойства
| Свойство | Описание |
| accessKey | Позволяет получить или задать клавишу доступа для элемента. |
| атрибут. value | Позволяет получить или задать значение для атрибута. |
| clientHeight | Возвращает высоту элемента в пикселях, включая внутренние отступы (padding). Внешние отступы (margin), рамки (border) и горизонтальная полоса прокрутки (если она есть) не учитываются. |
| clientWidth | Возвращает ширину элемента в пикселях, включая внутренние отступы (padding). Внешние отступы (margin), рамки (border) и вертикальная полоса прокрутки (если она есть) не учитываются. |
| firstChild | Возвращает ссылку на первый дочерний узел внутри указанного узла. |
| firstElementChild | Возвращает первый дочерний элемент, если дочерних элементов нет, то возвращает null. |
| lastElementChild | Возвращает последний дочерний элемент, если дочерних элементов нет, то возвращает null. |
| innerHTML | Представляет содержимое, которое находится между открывающим и закрывающим тегами текущего элемента. |
| parentNode | Возвращает родительский элемент указанного узла. |
| style | Объект, представляющий атрибут style элемента, он позволяет получить или установить встроенный стиль элемента. |
| textContent | Содержит текстовое содержимое узла и его потомков. <p>Внутри элемента <p>. <em>Внутри элемента <em>.</em></p> <script> var p = document.querySelector("p"); alert(p.textContent); // Внутри элемента <p>. Внутри элемента <em>. </script> |
Объект event
Обработчики событий могут быть привязаны к объекту Element, Document, Window и т.д. Затем, в тот момент, когда происходит какое-либо событие, создаётся объект Event (событие), который передаётся в качестве аргумента обработчику события.
Интерфейс события объектной модели документа (DOM) доступен только через объект Event, который передаётся в качестве аргумента в обработчик события (в IE8 и более ранних версиях, объект Event доступен в виде глобальной переменной window.event). Следующий пример показывает, как объект Event передаётся обработчику события и может быть использован внутри него.
| window.addEventListener("keydown", foo, false); function foo(event) { // параметр event неявно инициализируется объектом Event alert(event); } |
Методы
| Метод | Описание |
| preventDefault() | Отменяет событие, если оно является отменяемым, без остановки дальнейшего распространения события. |
| stopImmediatePropagation() | Предотвращает любое дальнейшее распространение события. |
| stopPropagation() | Предотвращает дальнейшее распространение текущего события. |
Свойства
| Свойство | Описание |
| bubbles | Возвращает логическое значение, которое указывает, является ли событие всплывающим. |
| cancelable | Возвращает логическое значение, указывающее, является ли событие отменяемым. |
| currentTarget | Возвращает целевой объект события, обрабатываемого в настоящее время. |
| defaultPrevented | Получает значение, указывающее, следует ли отменить действие по умолчанию. True - действия по умолчанию должны быть отменены, false - действия по умолчанию разрешаются. |
| eventPhase | Указывает, какая фаза события, в настоящее время проверяется. |
| target | Ссылается на элемент, который является целевым объектом данного события. |
| timeStamp | Получает время в миллисекундах, когда произошло событие. |
| type | Имя события (без учета регистра). |
| isTrusted | Получает значение, указывающее, было ли событие инициировано в браузере (события браузера и пользовательские события) или в сценарии. |
Объект NodeList
Объект NodeList представляет собой коллекцию узлов. Такой объект возвращается, когда используются такие методы как document.querySelectorAll(), document.getElementsByName() или свойство Node.childNodes.
Объект NodeList ведёт себя, как доступный только для чтения массив объектов Element.
Обратиться к определённому узлу можно по числовому индексу. Первый узел находится под индексом 0:
| var parent = document.getElementById('parent'); var child_nodes = parent.childNodes; alert(child_nodes[1]); |
В случае использования свойства Node.childNodes, NodeList представляет собой "живую" коллекцию, это означает, что изменения в DOM отражаются в коллекции:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Название веб-страницы</title>
</head>
<body>
<div id="parent"><p></p></div>
<script>
var parent = document.getElementById('parent');
// Присваиваем объект NodeList
var child_nodes = parent.childNodes;
console.log(child_nodes.length); // вернёт 1
// Добавим ещё один дочерний элемент
parent.appendChild(document.createElement('p'));
console.log(child_nodes.length); // вернёт 2
</script>
</body>
</html>
В других случаях NodeList является статической коллекцией, это означает, что любые последующие изменения в DOM не отражаются на содержании коллекции. Например, коллекция, возвращаемая методом document.querySelectorAll() является статической:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Название веб-страницы</title>
</head>
<body>
<div id="parent"><p></p></div>
<script>
var parent = document.getElementById('parent');
// Присваиваем объект NodeList
var child_nodes = document.querySelectorAll('p');
console.log(child_nodes.length); // вернёт 1
// Добавим ещё один дочерний элемент
parent.appendChild(document.createElement('p'));