В этом руководстве вы узнаете об объектной модели документа — Document Object Model (DOM) в JavaScript.
Document Object Model — это интерфейс прикладного программирования (API) для управления HTML-документами.
DOM представляет HTML-документ в виде дерева узлов и предоставляет функции, позволяющие эффективно добавлять, удалять и изменять части документа.
Обратите внимание, что DOM — это кроссплатформенный и независимый от языка способ управления документами HTML и XML.
Документ как иерархия узлов
DOM представляет документ HTML как иерархию узлов. Рассмотрим следующий HTML-документ:
<html>
<head>
<title>JavaScript DOM</title>
</head>
<body>
<p>Hello DOM!</p>
</body>
</html>Следующее дерево представляет вышеуказанный HTML-документ:
В этом дереве DOM документ является корневым узлом. Корневой узел имеет один дочерний узел, который является элементом <html>. Элемент <html> называется элементом документа.
Каждый документ может иметь только один элемент document. В документе HTML элемент document является элементом <html>. Каждая разметка может быть представлена узлом в дереве.
Типы узлов
Каждый узел в дереве DOM идентифицируется типом узла. JavaScript использует целые числа для определения типов узлов. В следующей таблице показаны константы типа узла:
| Постоянный | Ценность | Описание |
|---|---|---|
Node.ELEMENT_NODE | 1 | Element, такой как <p> или <div>. |
Node.TEXT_NODE | 3 | Фактический Text внутри Element или Attr. |
Node.CDATA_SECTION_NODE | 4 | CDATASection, например <!CDATA[[ … ]]>. |
Node.PROCESSING_INSTRUCTION_NODE | 7 | ProcessingInstruction XML-документа, например <?xml-stylesheet … ?>. |
Node.COMMENT_NODE | 8 | Узел Comment, такой как <!-- … -->. |
Node.DOCUMENT_NODE | 9 | Узел Document. |
Node.DOCUMENT_TYPE_NODE | 10 | Узел DocumentType, такой как <!DOCTYPE html>. |
Node.DOCUMENT_FRAGMENT_NODE | 11 | Узел DocumentFragment. |
Чтобы получить тип узла, используйте свойство nodeType :
node.nodeType
Вы можете сравнить свойство nodeType с приведенными выше константами, чтобы определить тип узла. Например:
if(node.nodeType == Node.ELEMENT_NODE) {
// node is the element node
}Свойства nodeName и nodeValue
У узла есть два важных свойства: nodeName и nodeValue, которые предоставляют конкретную информацию об узле.
Значения этих свойств зависят от типа узла. Например, если типом узла является узел элемента, nodeName всегда совпадает с именем тега элемента, а nodeValue всегда null.
По этой причине лучше проверить тип узла перед использованием этих свойств:
if(node.nodeType == Node.ELEMENT_NODE) {
let name = node.nodeName; // tag name like <p>
}Узел и элемент
Иногда легко спутать Node и Element.
Узел — это общее имя любого объекта в дереве DOM. Это может быть любой встроенный элемент DOM, например документ. Или это может быть любой тег HTML, указанный в документе HTML, например <div> или <p>.
Элемент — это узел с определенным типом узла Node.ELEMENT_NODE, который равен 1.
Другими словами, узел является универсальным типом элемента. Элемент представляет собой определенный тип узла с типом узла Node.ELEMENT_NODE.
На следующем рисунке показана взаимосвязь между Node и Element :
Обратите внимание, что getElementById() и querySelector() возвращают объект с типом Element, а getElementsByTagName() или querySelectorAll() возвращают NodeList, который представляет собой набор узлов.
Отношения узлов
Любой узел имеет отношения к другим узлам дерева DOM. Отношения такие же, как те, которые описаны в традиционном генеалогическом древе.
Например, <body> является дочерним узлом узла <html>, а <html> является родителем узла <body>.
Узел <body> является одноуровневым по отношению к узлу <head> поскольку они имеют одного и того же непосредственного родителя, которым является элемент <html>.
На следующем рисунке показаны отношения между узлами:
Заключение
- Документ HTML или XML может быть представлен в виде дерева узлов, как традиционное генеалогическое древо.
- Каждая разметка может быть представлена как узел с определенным типом узла.
- Элемент — это особый тип узла с типом узла
Node.ELEMENT_NODE. - В дереве DOM узел имеет отношения с другими узлами.