Узлы и элементы DOM-дерева в JavaScript

Александр Мальцев

29.05.2021

12K

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

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


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

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

Типы узлов (NODE) документа

Код типа (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>

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

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

Инспектор DOM

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

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

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

Задание

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

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

Александр

17 декабря 2019, 12:16

Добрый день.

prntscr.com/qbxhu1
Специально создал простую страничку для лучшего понимания DOM, но есть моменты с непредсказуемым результатом. Созданы 2 div-a и по сути div с индексом (0) и div с индексом (1). Внутри каждого 2 элемента с индексами 0 и 1. Почему в первом случае выводится только 0-ой «ребенок» div-а, а во втором случае и 0-ой и 1-вый «ребенок».
Спасибо
1. Александр Мальцев
  
  18 декабря 2019, 14:23
  Привет!
  В примере забыл теги div закрыть:
```
<div>
  <p class="Hi_01">Привет_1</p>
  <p class="GoodBy_01">Пока_1</p>
</div>
<div>
  <p class="Hi_02">Привет_2</p>
  <p class="GoodBy_02">Пока_2</p>
</div>
```
Александр

15 декабря 2019, 00:21

DOM Inspector сейчас вроде отсутствует в Хроме в таком виде как на картинке!?
Да и не совсем понял суть задания (Измените код HTML документа, представлено на этом уроке таким образом, чтобы в дереве было как можно меньше ненужных текстовых узлов.)
1. Александр Мальцев
  
  16 декабря 2019, 15:04
  
  Да, сейчас уже нет такого дополнения.
  В этом случае можете использовать этот пример в песочнице.
  В этом примере написан код JavaScript, который перебирает DOM узлы документа и выводит их на экран в виде схемы с учетом их вложенности. Все текстовые узлы документа в ней выводятся как #text.
  Ваша задача изменить HTML код так, чтобы при выводе не было ненужных текстовых узлов.
  1. Александр
    
    16 декабря 2019, 18:36
    
    Я тут экспериментирую с DOM и столкнулся с проблемкой. Не могу вывести список одинаковых элементов prntscr.com/qblhnk там есть 2 span элемента (firstChildren and lastChildren). Как их вытянуть и посчитать их количество?
    
    (код VBA Excel)
    2 способа загнать в переменную слитый текст из 2-х переменных и прбела.
    
    sName = a.getElementsByClassName(«text»)(3).FirsChild.textContent _
    & " " & a.getElementsByClassName(«text»)(3).LastChild.textContent
    
    sName = a.getElementsByClassName(«text»)(3).Children(0).textContent _
    & " " & a.getElementsByClassName(«text»)(3).Children(1).textContent
    
    Кроме FirsChild и LastChild есть еще какие-нибудь Child? Где почитать?
    
    Спасибо
    1. Александр Мальцев
      
      18 декабря 2019, 14:32
      
      Если в VBA поддерживается метод querySelectorAll, то используйте его:
      
      a.querySelectorAll('div.text > span + span.second').length
      Почитать про методы для поиска узлов можно в этой статье, а про методы, основанные на связях — здесь.