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

Александр Мальцев
12K
1
Содержание:
  1. Типы узлов (NODE) документа
  2. Дерево узлов документа
  3. Комментарии

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

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

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

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

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 - дерево узлов документа

Инспектор DOM

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

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

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

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

Задание

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

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

  1. Александр
    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>
      
    2. Александр
      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
            
            Почитать про методы для поиска узлов можно в этой статье, а про методы, основанные на связях — здесь.
      Войдите, пожайлуста, в аккаунт, чтобы оставить комментарий.