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 Lesson one"
- <p> имеет одного ребенка: "Hello world!"
- <h1> и <p> are siblings
Навигация между узлами
Для перехода между узлами с помощью JavaScript можно использовать следующие свойства узла:
- parentNode
- childNodes[nodenumber]
- firstChild
- lastChild
- nextSibling
- previousSibling
Дочерние узлы и значения узлов
Распространенной ошибкой в обработке DOM является ожидание того, что узел элемента будет содержать текст.
Примере:
<title
id="demo">DOM Tutorial</title>
Узел элемента <Title> (в приведенном выше примере) не содержит текста.
Он содержит текстовый узел со значением "DOM Tutorial".
Значение текстового узла может быть получено с помощью узла.
innerHTML Свойство:
var myTitle =
document.getElementById("demo").innerHTML;
Доступ к свойству InnerHtml совпадает с доступом к NodeValue первого дочернего элемента:
var myTitle =
document.getElementById("demo").firstChild.nodeValue;
Доступ к первому ребенку также можно сделать так:
var 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>
Innerhtml
В этом уроке мы используем свойство InnerHtml для извлечения содержимого элемента HTML.
Однако изучение других методов, описанных выше, полезно для понимания структуры дерева и навигации по DOM.
Корневые узлы DOM
Есть два специальных свойства, которые позволяют получить доступ к полному документу:
- документ. тело-тело документа
- Document. documentElement-полный документ
Пример
<html>
<body>
<p>Hello World!</p>
<div>
<p>The DOM is very useful!</p>
<p>This example demonstrates the <b>document.body</b> property.</p>
</div>
<script>
alert(document.body.innerHTML);
</script>
</body>
</html>
Пример
<html>
<body>
<p>Hello World!</p>
<div>
<p>The DOM is very useful!</p>
<p>This example demonstrates the <b>document.documentElement</b> property.</p>
</div>
<script>
alert(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 для узлов элементов не определено
- 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 | Тип | Пример |
|---|---|---|
| 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.
