JavaScript HTML DOM-навигация
С помощью HTML DOM вы можете перемещаться по дереву узлов, используя отношения узлов.
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>и<body><head>является первым ребенком<html><body>является последним ребенком<html>
и:
<head>имеет одного ребенка:<title><title>имеет один дочерний элемент (текстовый узел): "DOM Tutorial"<body>имеет двоих детей:<h1>и<p><h1>имеет одного ребенка: «Урок DOM первый»<p>имеет одного ребенка: «Привет, мир!»<h1>и братья и<p>сестры
Навигация между узлами
Вы можете использовать следующие свойства узла для навигации между узлами с помощью JavaScript:
parentNodechildNodes[nodenumber]firstChildlastChildnextSiblingpreviousSibling
Дочерние узлы и значения узлов
Распространенной ошибкой при обработке 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>
Пример
<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>
Внутренний 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>
Пример
<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 узла атрибута — это имя атрибута
- 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>
Примечание: 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>
Наиболее важные свойства 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.