Узлы в 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 станет менее запутанным в этом эпизоде. Как всегда спасибо и увидимся в следующем выпуске. Посмотрите каждую серию, которую я написал здесь.