JavaScript - DOM: типы узлов

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

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

JavaScript - DOM: типы узлов

Узлы в дереве бывают различных типов, но в основном используются узлы, образованные на основе 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:

JavaScript - определение типа узла

Кроме определения типа узла (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>

JavaScript - объектная модель документа (DOM)

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

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

JavaScript - дерево узлов документа

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

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

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

Firefox - инспектор DOM

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


   JavaScript и jQuery 0    1987 0

Комментарии (0)

    Вы должны авторизоваться, чтобы оставлять комментарии.