На предыдущем уроке мы рассмотрели дерево, состоящее из узлов, образованных элементами. Но, узлы в дереве образуются не только на основе элементов, но и на основе текста, комментариев и вообще на основе всего, что есть у нас в HTML коде.

Например, текст, заключённый между открывающим и закрывающим тегом h1, тоже является узлом. Но он является не узлом элемента, а текстовым узлом. Данный текстовый узел будет являться дочерним по отношению к узлу, образованным элементом h1.

<h1>Заголовок документа</h1>

Узлы в дереве бывают различных типов, но в основном используются узлы, образованные на основе HTML элементов и текста. Всего типов узлов в DOM 12, но в настоящее время разработчикам сценариев JavaScript рекомендуют использовать только 7.

Код типа (nodeType) Тип узла Описание
1 ELEMENT_NODE Узел элемента
3 TEXT_NODE Текстовый узел (#text)
7 PROCESSING_INSTRUCTION_NODE Узел инструкции обработки
8 COMMENT_NODE Узел комментария (#comment)
9 DOCUMENT_NODE Узел документа (#document)
10 DOCUMENT_TYPE_NODE Узел типа документа
11 DOCUMENT_FRAGMENT_NODE Узел фрагмента документа

У каждого узла есть определённый тип, который определяется числом от 1 до 12. Например, узел элемента определяется числом 1, текстовый узел числом 3 и т.д. Определить тип узла в JavaScript можно с помощью свойства nodeType.

Например, откроем любую страницу в браузере и определим тип узла document:

Кроме определения типа узла (nodeType) с помощью JavaScript можно также узнать его имя и значение:

  • nodeName — возвращает имя узла. Если узел является элементом, то свойство nodeName возвращает имя тега. Для других типов узлов данное свойство будет возвращать различные имена: «#text» (для текстовых узлов), «#comment» для комментариев, «#document» для документа и .т.д.
  • nodeValue — строка, представляющая значение узла. Возвращает следующие значения в зависимости от типа узла:
    • возвращает null для узла элемента и узла документа;
    • возвращает содержимое для текстового узла;
    • возвращает контент для узла комментария.

Если перейти к примеру, который мы рассматривали на предыдущем уроке, то можно увидеть что дерево документа состоит только из узлов, образованными элементами.

<html> <head> <title>Заголовок страницы</title> </head> <body> <h1>Название статьи</h1> <div> <h2>Раздел статьи</h2> <p>Содержимое статьи</p> </div> </body>
</html>

Данное дерево является не полным, т.е. в данное дерево необходимо добавить остальные узлы: текстовые узлы, узлы комментариев, узлы документа и т.д.

Примечание: пробелы, знаки табуляции и др. управляющие символы, которые например, располагаются между элементами, тоже образуют текстовые узлы.

В Mozilla Firefox существует расширение «DOM Inspector», с помощью которого Вы можете увидеть дерево документа.

Для того чтобы зайти в этот инструмент, нажмите в Firefox на кнопку «Меню» -> «Разработка» -> «Инспектор DOM» или комбинацию клавиш Ctrl+Shift+I.

Например, исследуем дерево узлов документа, представленного выше, в DOM Inspector.

  • Что содержится в текстовых узлах дерева, представленного на этом уроке?
  • Измените код HTML документа, представлено на этом уроке таким образом, чтобы в дереве было как можно меньше ненужных текстовых узлов.

Источник: itchief.ru