HTML DOM Узлы

В HTML DOM всё является узлом. DOM — это HTML, рассматриваемый как дерево узлов.

Узлы DOM

Узлы DOM

Согласно стандарту W3C HTML DOM, всё в HTML-документе является узлом:

  • Весь документ является узлом документа
  • Каждый HTML-элемент является узлом элемента
  • Текст внутри HTML-элементов является текстовыми узлами
  • Каждый HTML-атрибут является узлом атрибута
  • Комментарии являются узлами комментариев

Дерево узлов HTML DOM

HTML DOM рассматривает HTML-документ как древовидную структуру. Эта структура называетсядеревом узлов：

Пример дерева HTML DOM

DOM HTML tree

Родительские, дочерние и сестринские узлы

Узлы в дереве узлов имеют иерархические отношения друг с другом.

Мы часто используем терминыродительский、дочернийисестринскийи другие термины для описания этих отношений. У родительского узла есть дочерние узлы. Дочерние узлы на одном уровне называются сестринскими (братьями или сестрами).

  • В дереве узлов верхний узел называется корнем.
  • У каждого узла есть родитель, кроме корня (у которого нет родителя).
  • Узел может иметь любое количество дочерних узлов.
  • Родственные узлы — это узлы, имеющие один и тот же родительский узел.

На изображении ниже показана часть дерева узлов и связи между узлами:

Node tree

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

<html> <head> <meta charset="utf-8"> <title>Учебник по DOM</title> </head> <body> <h1>Курс по DOM 1</h1> <p>Привет, мир!</p> </body> </html>

Из приведённого выше HTML:

  • У узла <html> нет родителя; он является корневым узлом.
  • Родителем <head> и <body> является узел <html>.
  • Родителем текстового узла "Привет, мир!" является узел <p>.

И:

  • У узла <html> есть два дочерних узла: <head> и <body>.
  • Узел <head> имеет два дочерних узла: узлы <meta> и <title>
  • Узел <title> также имеет один дочерний узел: текстовый узел "DOM Tutorial"
  • Узлы <h1> и <p> являются соседними узлами, а также дочерними узлами <body>

И:

  • Элемент <head> является первым дочерним элементом элемента <html>
  • Элемент <body> является последним дочерним элементом элемента <html>
  • Элемент <h1> является первым дочерним элементом элемента <body>
  • Элемент <p> является последним дочерним элементом элемента <body>

Предупреждение!

Распространённая ошибка при обработке DOM — ожидать, что узел-элемент содержит текст.

В этом примере:<title>DOM Tutorial</title>, узел-элемент <title> содержиттекстовый узел со значением "DOM Tutorial".。

Через свойствоinnerHTMLузла можно получить доступ к значению текстового узла.

Вы узнаете больше о свойстве innerHTML в одной из следующих глав.

Другие расширения