От создателя: объектная модель документа (DOM) — это интерфейс, который обрабатывает документ HTML либо XML как древовидную структуру, где любой узел является объектом документа. DOM также предоставляет набор способов для запроса дерева, конфигурации структуры и стиля.
В DOM также употребляется термин элемент: который весьма похож на узел. Итак, в чем разница между узлом DOM и элементом в DOM? Давайте выясним!
1. Узел DOM
Ключом к осознанию различия между узлом и элементом является осознание того, что такое узел. С наиболее высочайшей точки зрения, документ DOM состоит из иерархии узлов. Любой узел может иметь родителя и / либо потомков.
Давайте поглядим на последующий HTML-документ:
My Page
My Page
Thank you for visiting my web page!
| 1234567891011 | My Page
My Page
Thank you for visiting my web page!
|
Документ содержит последующую иерархию узлов:
это узел в дереве документа. У него есть 2 дочерних элемента: узлы и .
также является узлом, имеющим 3 дочерних элемента: комментарий , заголовок
и абзац
. Родителем узла является узел .
Теги в HTML-документе представляют собой узел, что любопытно, так это то, что обыденный текст также является узлом. Узел абзаца
имеет 1 дочерний элемент: текстовый узел «Спасибо, что посетили мою страницу!».
1.2 Типы узлов
Как отличить эти различные типы узлов? Ответ кроется в интерфейсе узла DOM, в особенности в свойстве Node.nodeType.
Node.nodeType может иметь одно из последующих значений, представляющих тип узла:
Сравнение и объяснение всех единиц измерения CSS
Node.ELEMENT_NODE
Node.ATTRIBUTE_NODE
Node.TEXT_NODE
Node.CDATA_SECTION_NODE
Node.PROCESSING_INSTRUCTION_NODE
Node.COMMENT_NODE
Node.DOCUMENT_NODE
Node.DOCUMENT_TYPE_NODE
Node.DOCUMENT_FRAGMENT_NODE
Node.NOTATION_NODE
Константы значимо указывают тип узла: к примеру, Node.ELEMENT_NODE представляет узел элемента, Node.TEXT_NODE представляет текстовый узел, Node.DOCUMENT_NODE узел документа и так дальше.
К примеру, выделим узел абзаца и поглядим на его свойство nodeType:
JavaScript const paragraph = document.querySelector(‘p’);
paragraph.nodeType === Node.ELEMENT_NODE; // => true
| 123 | const paragraph = document.querySelector(‘p’); paragraph.nodeType === Node.ELEMENT_NODE; // => true |
Как и ожидалось, paragraph.nodeType имеет значение Node.ELEMENT_NODE, указывающее, что абзац является элементом. Абзац также содержит текстовый узел:
JavaScript const paragraph = document.querySelector(‘p’);
const firstChild = paragraph.childNodes[0];
firstChild.nodeType === Node.TEXT_NODE; // => true
| 1234 | const paragraph = document.querySelector(‘p’);const firstChild = paragraph.childNodes[0]; firstChild.nodeType === Node.TEXT_NODE; // => true |
Существует тип узла, который представляет все дерево узлов документа — Node.DOCUMENT_NODE:
JavaScript document.nodeType === Node.DOCUMENT_NODE; // => true
| 1 | document.nodeType === Node.DOCUMENT_NODE; // => true |
2. Элемент DOM
Опосля того, как вы сообразили, что такое узел DOM, сейчас пора различать узел и элемент DOM.
Если вы освоите термин node, то ответ предельно ясен: элемент — это узел определенного типа — element (Node.ELEMENT_NODE). Вместе с таковыми типами, как документ, комментарий, текст и т.д.
Проще говоря, элемент — это узел, который записывается при помощи тега в документе HTML. , , , ,
,
все элементы, потому что они представлены тегами.
Тип документа, комментарий, текстовые узлы не являются элементами, поэтому что они не записаны с тегами:
Thank you for visiting my web page!
| 12345678 |
Thank you for visiting my web page!
|
Node является конструктором узла и HTMLElement конструктором элемента в JavaScript DOM. Абзац, будучи узлом и элементом, является экземпляром обоих Node и HTMLElement:
Облачный YouTube поможет Google избавиться от рекламной зависимости
JavaScript const paragraph = document.querySelector(‘p’);
paragraph instanceof Node; // => true
paragraph instanceof HTMLElement; // => true
| 1234 | const paragraph = document.querySelector(‘p’); paragraph instanceof Node; // => trueparagraph instanceof HTMLElement; // => true |
Проще говоря, элемент — это подтип узла, так же как кошка — подтип звериного.
3. Характеристики модели DOM: узлы и элементы
Кроме различения узлов от частей, для вас также нужно различать характеристики DOM, которые содержат лишь узлы либо лишь элементы. Последующие характеристики типа Node оценивают узел либо группу узлов (NodeList):
JavaScript node.parentNode; // Node or null
node.firstChild; // Node or null
node.lastChild; // Node or null
node.childNodes; // NodeList
| 123456 | node.parentNode; // Node or null node.firstChild; // Node or nullnode.lastChild; // Node or null node.childNodes; // NodeList |
Но последующие характеристики являются элементами либо группой частей (HTMLCollection):
JavaScript node.parentElement; // HTMLElement or null
node.children; // HTMLCollection
| 123 | node.parentElement; // HTMLElement or null node.children; // HTMLCollection |
Так как оба node.childNodes и node.children возвращают перечень потомков, почему оба имеют эти характеристики? Неплохой вопросец! Разглядим последующий элемент абзаца, содержащий некий текст:
Thank you for visiting my web page!
| 123 |
Thank you for visiting my web page! |
Откройте демонстрацию, потом поглядите характеристики childNodes и children узла абзаца:
JavaScript const paragraph = document.querySelector(‘p’);
paragraph.childNodes; // NodeList: [HTMLElement, Text]
paragraph.children; // HTMLCollection: [HTMLElement]
| 1234 | const paragraph = document.querySelector(‘p’); paragraph.childNodes; // NodeList: [HTMLElement, Text]paragraph.children; // HTMLCollection: [HTMLElement] |
Группа paragraph.childNodes содержит 2 узла: полужирный элемент Спасибо,, также текстовый узел – что посетили мою страницу!
Но в группе paragraph.children всего 1 элемент: выделенный жирным шрифтом Спасибо,.
Так как paragraph.children содержит лишь элементы, текстовый узел не был включен сюда, поэтому что его тип — text (Node.TEXT_NODE), а не element (Node.ELEMENT_NODE).
Наличие обоих node.childNodes и node.children дозволяет для вас избрать группу дочерних частей, к которым вы желаете получить доступ: все дочерние узлы либо лишь дочерние элементы, являющиеся элементами.
4. Заключение
Документ DOM — это иерархический набор узлов. Любой узел может иметь родителя и / либо потомков. Осознать разницу между узлом DOM и элементом просто, если вы осознаете, что такое узел. У узлов есть типы, одним из которых является тип элемента. Элемент представлен тегом в документе HTML.
Тест: какой тип узла никогда не имеет родительского узла?
Создатель: Dmitri Pavlutin
Редакция: Команда webformyself.
Источник