Узлы в JavaScript похожи на структуру генеалогического дерева и определяются иерархией и измеряются сверху вниз или, как вы можете это назвать, от высшего к низшему и состоят из родителей, детей и братьев и сестер. Члены этой структуры называются узлами. Стоит знать, что важной характеристикой узлов DOM является то, что их можно добавлять в DOM, изменять или удалять.

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

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

Что важно в отношениях узлов?

  • Узлы в дереве узлов имеют иерархические отношения друг с другом.
  • Термины «родитель», «ребенок» и «сестра» используются для описания отношений.
  • В дереве узлов верхний узел называется корнем (или корневым узлом).
  • Каждый узел имеет ровно одного родителя, кроме корня (у которого нет родителя).
  • У узла может быть несколько потомков.
  • Братья и сестры (братья или сестры) — это узлы с одним и тем же родителем.

Из фрагмента HTML выше вы можете прочитать:

  • <html> — корневой узел
  • <html> не имеет родителей
  • <html> является родителем <head> и <body>
  • <head> — первый ребенок <html>
  • <body> — последний ребенок <html>

и:

  • <head> имеет одного ребенка: <title>
  • <title> имеет один дочерний элемент (текстовый узел): 'DOM Tutorial'
  • У <body> двое детей: <h1> и <p>
  • <h1> имеет одного ребенка: «Урок DOM первый»
  • <p> имеет одного ребенка: «Привет, мир!»
  • <h1> и <p> братья и сестры

Прелесть узлов JavaScript заключается в возможности добавлять узлы в список узлов и удалять их из него.

Проверьте здесь для других примеров.

Теперь, как мы ориентируемся?

Навигация по узлам может осуществляться с помощью следующих узлов: parentNode, chidNodes, firstChild, lastChild, nextSibling и previousSibling.

Навигация по DOM позволяет копировать содержимое из одного элемента в другой, взгляните на фрагменты ниже.

Все приведенные выше фрагменты выполняют одну и ту же функцию копирования текста из элемента h1 в элемент p.

Помимо дочернего узла и значений узлов, которые мы рассмотрели выше, существуют и другие методы, которые необходимо знать для навигации в объектной модели документа. Эти методы называются следующим образом:

Корневые узлы DOM

Это позволяет получить доступ к полному содержимому документа, используя следующие методы:

  • document.body - Тело документа
  • document.documentElement - Полный документ

Свойство nodeName

Свойство nodeName указывает имя узла.

  • nodeName доступен только для чтения
  • nodeName узла элемента совпадает с именем тега
  • nodeName узла атрибута — это имя атрибута
  • nodeName текстового узла всегда #text
  • nodeName узла документа всегда #document

Свойство nodeValue

Свойство nodeValue определяет значение узла.

  • nodeValue для узлов элементов null
  • nodeValue для текстовых узлов — это сам текст
  • nodeValue для узлов атрибутов — это значение атрибута

Свойство nodeType

Свойство nodeType доступно только для чтения. Возвращает тип узла.

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

О чем это?

30daysofjavascript — это серия статей о том, как я учусь программировать на JavaScript. Эти эпизоды максимально упрощены, и я надеюсь, что для таких новичков, как я, JavaScript станет менее запутанным в этом эпизоде. Как всегда спасибо и увидимся в следующем выпуске. Посмотрите каждую серию, которую я написал здесь.