В чем разница между узлом и элементом в DOM?

В чем разница между узлом и элементом в DOM?

От создателя: объектная модель документа (DOM) — это интерфейс, который обрабатывает документ HTML либо XML как древовидную структуру, где любой узел является объектом документа. DOM также предоставляет набор способов для запроса дерева, конфигурации структуры и стиля.

В DOM также употребляется термин элемент: который весьма похож на узел. Итак, в чем разница между узлом DOM и элементом в DOM? Давайте выясним!

1. Узел DOM

Ключом к осознанию различия между узлом и элементом является осознание того, что такое узел. С наиболее высочайшей точки зрения, документ DOM состоит из иерархии узлов. Любой узел может иметь родителя и / либо потомков.

Давайте поглядим на последующий HTML-документ:

1234567891011<!DOCTYPE html><html>  <head>    <title>My Page</title>  </head>  <body>    <!— Page Body —>    <h2>My Page</h2>    <p id=»content»>Thank you for visiting my web page!</p>  </body></html>

Документ содержит последующую иерархию узлов:

В чем разница между узлом и элементом в DOM?

<html> это узел в дереве документа. У него есть 2 дочерних элемента: узлы <head> и <body>.

<body> также является узлом, имеющим 3 дочерних элемента: комментарий <!— Page Body —>, заголовок <h2> и абзац <p>. Родителем узла <body> является узел <html>.

Теги в HTML-документе представляют собой узел, что любопытно, так это то, что обыденный текст также является узлом. Узел абзаца <p> имеет 1 дочерний элемент: текстовый узел «Спасибо, что посетили мою страницу!».

1.2 Типы узлов

Как отличить эти различные типы узлов? Ответ кроется в интерфейсе узла DOM, в особенности в свойстве Node.nodeType.
Node.nodeType может иметь одно из последующих значений, представляющих тип узла:

READ
Сравнение и объяснение всех единиц измерения 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

123const paragraph = document.querySelector(‘p’); paragraph.nodeType === Node.ELEMENT_NODE; // => true

Как и ожидалось, paragraph.nodeType имеет значение Node.ELEMENT_NODE, указывающее, что абзац является элементом. Абзац также содержит текстовый узел:

JavaScript

1234const paragraph = document.querySelector(‘p’);const firstChild = paragraph.childNodes[0]; firstChild.nodeType === Node.TEXT_NODE; // => true

Существует тип узла, который представляет все дерево узлов документа — Node.DOCUMENT_NODE:

JavaScript

1document.nodeType === Node.DOCUMENT_NODE; // => true

2. Элемент DOM

Опосля того, как вы сообразили, что такое узел DOM, сейчас пора различать узел и элемент DOM.

Если вы освоите термин node, то ответ предельно ясен: элемент — это узел определенного типа — element (Node.ELEMENT_NODE). Вместе с таковыми типами, как документ, комментарий, текст и т.д.

Проще говоря, элемент — это узел, который записывается при помощи тега в документе HTML. <html>, <head>, <title>, <body>, <h2>, <p> все элементы, потому что они представлены тегами.

Тип документа, комментарий, текстовые узлы не являются элементами, поэтому что они не записаны с тегами:

12345678<!DOCTYPE html><html>  <body>    <!— Page Body —><p>      Thank you for visiting my web page!</p>  </body></html>

Node является конструктором узла и HTMLElement конструктором элемента в JavaScript DOM. Абзац, будучи узлом и элементом, является экземпляром обоих Node и HTMLElement:

READ
Облачный YouTube поможет Google избавиться от рекламной зависимости

JavaScript

1234const paragraph = document.querySelector(‘p’); paragraph instanceof Node;        // => trueparagraph instanceof HTMLElement; // => true

Проще говоря, элемент — это подтип узла, так же как кошка — подтип звериного.

3. Характеристики модели DOM: узлы и элементы

Кроме различения узлов от частей, для вас также нужно различать характеристики DOM, которые содержат лишь узлы либо лишь элементы. Последующие характеристики типа Node оценивают узел либо группу узлов (NodeList):

JavaScript

123456node.parentNode; // Node or null node.firstChild; // Node or nullnode.lastChild;  // Node or null node.childNodes; // NodeList

Но последующие характеристики являются элементами либо группой частей (HTMLCollection):

JavaScript

123node.parentElement; // HTMLElement or null node.children;      // HTMLCollection

Так как оба node.childNodes и node.children возвращают перечень потомков, почему оба имеют эти характеристики? Неплохой вопросец! Разглядим последующий элемент абзаца, содержащий некий текст:

123<p>  <b>Thank you</b> for visiting my web page!</p>

Откройте демонстрацию, потом поглядите характеристики childNodes и children узла абзаца:

JavaScript

1234const paragraph = document.querySelector(‘p’); paragraph.childNodes; // NodeList:       [HTMLElement, Text]paragraph.children;   // HTMLCollection: [HTMLElement]

Группа paragraph.childNodes содержит 2 узла: полужирный элемент <b> Спасибо,</b>, также текстовый узел – что посетили мою страницу!

Но в группе paragraph.children всего 1 элемент: выделенный жирным шрифтом <b> Спасибо,</b>.

Так как paragraph.children содержит лишь элементы, текстовый узел не был включен сюда, поэтому что его тип — text (Node.TEXT_NODE), а не element (Node.ELEMENT_NODE).

READ
Используйте Reseter.css вместо Normalize и Reset.css, чтобы улучшить кроссбраузерность

Наличие обоих node.childNodes и node.children дозволяет для вас избрать группу дочерних частей, к которым вы желаете получить доступ: все дочерние узлы либо лишь дочерние элементы, являющиеся элементами.

4. Заключение

Документ DOM — это иерархический набор узлов. Любой узел может иметь родителя и / либо потомков. Осознать разницу между узлом DOM и элементом просто, если вы осознаете, что такое узел. У узлов есть типы, одним из которых является тип элемента. Элемент представлен тегом в документе HTML.

Тест: какой тип узла никогда не имеет родительского узла?

Создатель: Dmitri Pavlutin

Редакция: Команда webformyself.

Источник

Оценить статью
Блог о самом интересном.