JavaScript HTML DOM навигация

Через HTML DOM вы можете использовать отношения узлов для навигации по дереву узлов.

Элементы DOM

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

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

С HTML DOM все узлы в дереве узлов могут быть доступными через JavaScript.

Можете создавать новые узлы, а также изменять и удалять все узлы.

Отношения узлов

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

  • Термины (родитель, ребенок и сестра, parent, child и sibling) используются для описания этих отношений.
  • В дереве узлов вершинный узел называется корнем (корневой узел)
  • Каждый узел имеет родительский узел, кроме корня (корневой узел не имеет родительского узла).
  • Узел может иметь определенное количество подузлов
  • Сыбляра (брат или сестра) означает узлы, имеющие одного общего родителя.
<html>
   <head>
       <title>DOM Уроки</title>
   </head>
  <body>
       <h1>Первый урок DOM</h1>
       <p>Hello world!</p>
   </body>
</html>
DOM HTML дерево

Из вышеуказанного HTML можно прочитать следующую информацию:

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

Кроме того:

  • <head> имеет одного child: <title>
  • <title> имеет одного child (текстовый nodo): "DOM Уроки"
  • <body> имеет двух child: <h1> и <p>
  • <h1> имеет одного child: "DOM Первый урок"
  • <p> имеет одного child: "Hello world!"
  • <h1> и <p> являются сиблингами

Навигация между nodo

С помощью JavaScript вы можете использовать следующие nodo атрибуты для навигации между nodo:

  • parentNode
  • childNodes[nodenumber]
  • firstChild
  • lastChild
  • nextSibling
  • previousSibling

Предыдущий sibling и значение nodo

Одна из häufiger ошибок обработки DOM заключается в том, что предполагается, что элементарный nodo содержит текст.

Пример:

<title id="demo">DOM Уроки</title>

（в примере выше) элементарный nodo <title> Не содержитТекст.

Он содержит текст с значением "DOM Уроки"Текстовый nodo.

Значение текстового nodo можно получить через значение nodo: innerHTML Свойства для доступа:

var myTitle = document.getElementById("demo").innerHTML;

Аccess к свойству innerHTML эквивалентен доступу к первому nodo descendiente: nodeValue:

var myTitle = document.getElementById("demo").firstChild.nodeValue;

También se puede acceder al primer nodo hijo de la siguiente manera:

var myTitle = document.getElementById("demo").childNodes[0].nodeValue;

Следующие три примера получения <h1> Текст элемента и копирование в <p> Элементе:

Пример 1

<html>
<body>
<h1 id="id01">Моя первая страница</h1>
<p id="id02">Привет!</p>
<script>
 document.getElementById("id02").innerHTML  = document.getElementById("id01").innerHTML;
</script>
</body>
</html>

Попробуйте сами

Пример 2

<html>
<body>
<h1 id="id01">Моя первая страница</h1>
<p id="id02">Привет!</p>
<script>
 document.getElementById("id02").innerHTML = document.getElementById("id01").firstChild.nodeValue;
</script>
</body>
</html>

Попробуйте сами

Пример 3

<html>
<body>
<h1 id="id01">Моя первая страница</h1>
<p id="id02">Привет!</p>
<script>
 document.getElementById("id02").innerHTML = document.getElementById("id01").childNodes[0].nodeValue;
</script>
</body>
</html>

Попробуйте сами

InnerHTML

В этом руководстве мы используем innerHTML Получение содержимого HTML элемента.

Однако, изучение других методов, упомянутых выше, помогает понять структуру дерева и навигацию DOM.

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

Есть два специальных атрибута, которые позволяют получить доступ к полному документу:

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

Пример

<html>
<body>
<p>Hello World!</p>
<div>
<p>DOM очень полезен!</p>
<p>Этот пример демонстрирует атрибут <b>document.body</b>.</p>
</div>
<script>
 alert(document.body.innerHTML);
</script>
</body>
</html>

Попробуйте сами

Пример

<html>
<body>
<p>Hello World!</p>
<div>
<p>DOM очень полезен!</p>
<p>Этот пример демонстрирует атрибут <b>document.documentElement</b>.</p>
</div>
<script>
alert(document.documentElement.innerHTML);
</script>
</body>
</html>

Попробуйте сами

Свойство nodeName

nodeName Свойство определяет имя узла.

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

Пример

<h1 id="id01">Моя первая веб-страница</h1>
<p id="id02">Привет!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeName;
</script>

Попробуйте сами

Примечание:nodeName всегда содержит uppercase имя тега HTML элемента.

Свойство nodeValue

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

  • Узел элемента имеет undefined в свойстве nodeValue
  • Свойство nodeValue узла текста является текстовым текстом
  • Свойство nodeValue узла является значением атрибута

Свойство nodeType

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

Пример

<h1 id="id01">Моя первая веб-страница</h1>
<p id="id02">Привет!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeType;
</script>

Попробуйте сами

Самый важный атрибут nodeType:

Элемент Тип Пример
ELEMENT_NODE 1 <h1 class="heading">W3School</h1>
ATTRIBUTE_NODE 2 class = "heading" (отказано)
TEXT_NODE 3 W3School
COMMENT_NODE 8 <!-- Это комментарий -->
DOCUMENT_NODE 9 Сам документ HTML (родитель <html>)
DOCUMENT_TYPE_NODE 10 <!DOCTYPE html>

Type 2 в HTML DOM уже弃用. В XML DOM не弃нут.