[Перевод] В чём разница между узлом и элементом DOM?02.02.2021 18:32

При работе с DOM, кроме того, используется термин «элемент». Элементы очень похожи на узлы, но, всё же, это — не одно и то же. В чём же разница?

1. Узел DOM

Если рассматривать ситуацию в общих чертах, то оказывается, что DOM-документ включает в себя иерархию узлов. У каждого узла может быть родитель и (или) потомок.

Посмотрим на следующий HTML-документ:

  
    
  
  
    
    
My Page
    
Thank you for visiting my web page!
  

 — это узел в дереве документа. У него есть два дочерних узла — и .

У  есть три дочерних узла — комментарий , заголовок

и абзац

. Родительским элементом узла является узел .

Теги в HTML-документе представляют узлы. Интересно то, что обычный текст — это тоже узел. Узел-абзац

имеет потомка — текстовый узел Thank you for visiting my web page!.

▍Типы узлов

Как различать узлы разных типов? Ответ кроется в интерфейсе DOM, который носит имя Node. В частности — речь идёт о свойстве Node.nodeType.

Это свойство может иметь одно из следующих значений, представляющих тип узла:

• 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:

const paragraph = document.querySelector('p');

paragraph.nodeType === Node.ELEMENT_NODE; // => true

Свойство paragraph.nodeType, как и ожидалось, содержит значение Node.ELEMENT_NODE, которое указывает на то, что абзац — это элемент.

В абзаце, кроме того, имеется текстовый узел:

const paragraph = document.querySelector('p');
const firstChild = paragraph.childNodes[0];

firstChild.nodeType === Node.TEXT_NODE; // => true

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

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

2. Элемент DOM

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

Если вы как следует вникли в сущность термина «узел», то вам уже всё должно быть понятно. Элемент — это узел особого типа — Node.ELEMENT_NODE. Это — такой же тип узла, как и другие, представляющие весь документ, комментарии, тексты и прочие узлы DOM.

Если говорить простыми словами, то элемент — это узел, который объявлен с использованием тега в HTML-документе. , ,