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

Оглавление

    Показать оглавление

С помощью HTML DOM вы можете перемещаться по дереву узлов, используя node отношения.

DOM-узлы

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

  • Весь документ является узлом документа

  • Каждый элемент HTML является узлом элемента.

  • Текст внутри HTML-элементов представляет собой текстовые узлы.

  • Каждый атрибут HTML является узлом атрибута (устарело).

  • Все комментарии являются узлами комментариев.

Благодаря HTML DOM ко всем узлам дерева узлов можно получить доступ с помощью JavaScript.

Могут быть созданы новые узлы, и все узлы могут быть изменены или удалены.

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

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

Термины «родитель», «потомок» и «брат» используются для описания отношений.

  • В дереве узлов верхний узел называется корнем (или корневым узлом).

  • Каждый узел имеет ровно одного родителя, кроме корня (у которого нет родителя).

  • Узел может иметь несколько дочерних элементов

  • Братья и сестры (братья или сестры) — это узлы с одним и тем же родителем.

<html>

       <head>
          <title>DOM Tutorial</title>
       </head>
	<body>
          <h1>DOM Lesson one</h1>
          <p>Hello world!</p>
       </body>
     
</html>

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

  • <html> — корневой узел.

  • <html> не имеет родителей

  • <html> является родительским для <head> и < тело>

  • <head> — первый дочерний элемент <html>

  • <body> — последний дочерний элемент <html>

и :

  • У <head> есть один дочерний элемент: <title>

  • <title> имеет один дочерний элемент (текстовый узел): "DOM Tutorial".

  • У <body> есть два дочерних элемента: <h1> и < р>

  • <h1> имеет один дочерний элемент: "Урок DOM первый"

  • У <p> есть один дочерний элемент: "Привет, мир!"

  • <h1> и <p> являются братьями и сестрами

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

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

  • parentNode

  • childNodes[номер узла]

  • firstChild

  • lastChild

  • nextSibling

  • предыдущий брат

Дочерние узлы и значения узлов

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

Пример :

<title 
 id="demo">DOM Tutorial</title>

Узел элемента <title> (в примере выше) не содержит текст.

Он содержит текстовый узел со значением «DOM Tutorial».

Доступ к значению текстового узла можно получить с помощью свойства innerHTML узла:

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

Доступ к свойству InnerHTML аналогичен доступу к nodeValue. первого ребенка:

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

Доступ к первому дочернему элементу также можно выполнить следующим образом:

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

Все (3) следующих примера извлекают текст элемента <h1> и копируют его. в элемент <p>:

Пример

<html>
<body>
<h1 id="id01">My First Page</h1>
<p id="id02"></p>

<script>
 document.getElementById("id02").innerHTML 
 = document.getElementById("id01").innerHTML;
</script>

</body>
</html>

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

<!DOCTYPE html>
<html>
<body>

<h1 id="id01">My First Page</h1>
<p id="id02"></p>

<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").innerHTML;
</script>

</body>
</html>

Пример

<html>
<body>
<h1 id="id01">My First Page</h1>
<p id="id02"></p>

<script>
 document.getElementById("id02").innerHTML = document.getElementById("id01").firstChild.nodeValue;
</script>

</body>
</html>

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

<!DOCTYPE html>
<html>
<body>

<h1 id="id01">My First Page</h1>
<p id="id02"></p>

<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").firstChild.nodeValue;
</script>

</body>
</html>

Пример

<html>
<body>
<h1 id="id01">My First Page</h1>
<p id="id02">Hello!</p>

<script>
 document.getElementById("id02").innerHTML = document.getElementById("id01").childNodes[0].nodeValue;
</script>

</body>
</html>

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

<!DOCTYPE html>
<html>
<body>

<h1 id="id01">My First Page</h1>
<p id="id02"></p>

<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").childNodes[0].nodeValue;
</script>

</body>
</html>

ВнутреннийHTML

В этом уроке мы используем свойство InnerHTML для получения содержимого HTML-элемент.

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

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

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

  • document.body — тело документа.

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

Пример

<html>
<body>

<h2>JavaScript HTMLDOM</h2>
<p>Displaying document.body</p>
<p 
id="demo"></p>
<script>
document.getElementById("demo").innerHTML 
= document.body.innerHTML;
</script>

</body>
</html>

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

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTMLDOM</h2>
<p>Displaying document.body</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = document.body.innerHTML;
</script>

</body>
</html>

Пример

<html>
<body>

<h2>JavaScript HTMLDOM</h2>
<p>Displaying document.documentElement</p>

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 
document.documentElement.innerHTML;
</script>

</body>
</html>

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

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTMLDOM</h2>
<p>Displaying document.documentElement</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = document.documentElement.innerHTML;
</script>

</body>
</html>

Свойство nodeName

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

  • имя_узла доступно только для чтения.

  • nodeName узла элемента совпадает с именем тега

  • nodeName узла атрибута — это имя атрибута.

  • nodeName текстового узла всегда #text

  • nodeName узла документа всегда #document

Пример

 <h1 id="id01">My First Page</h1>
 <p id="id02"></p>
<script>
document.getElementById("id02").innerHTML 
 = document.getElementById("id01").nodeName;
</script>

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

<!DOCTYPE html>
<html>
<body>

<h1 id="id01">My First Page</h1>
<p id="id02"></p>

<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeName;
</script>

</body>
</html>

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

Свойство nodeValue

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

  • nodeValue для узлов элементов равно null

  • nodeValue для текстовых узлов — это сам текст

  • nodeValue для узлов атрибутов — это значение атрибута.

Свойство nodeType

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

Пример

<h1 id="id01">My First Page</h1>
 <p id="id02"></p>
<script>
document.getElementById("id02").innerHTML 
 = document.getElementById("id01").nodeType;
</script>

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

<!DOCTYPE html>
<html>
<body>

<h1 id="id01">My First Page</h1>
<p id="id02"></p>

<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeType;
</script>

</body>
</html>

Наиболее важными свойствами nodeType являются:

Node Type Example
ELEMENT_NODE 1 <h1 class="heading">W3Schools</h1>
ATTRIBUTE_NODE 2  class = "heading" (deprecated)
TEXT_NODE 3 W3Schools
COMMENT_NODE 8 <!-- This is a comment -->
DOCUMENT_NODE 9 The HTML document itself (the parent of <html>)
DOCUMENT_TYPE_NODE 10 <!Doctype html>

Тип 2 устарел в HTML DOM (но работает). Он не устарел в XML DOM.