JavaScript HTML DOM Навигация
С HTML DOM, вы можете перемещаться по дереву узла через узел связи.
DOM Узлы
Согласно стандарту W3C HTML DOM, все в HTML документе является узлом:
- Весь документ является узлом документа
- Каждый HTML элемент является узлом элемента
- Текст внутри HTML элементов - это текстовые узлы
- Каждый атрибут HTML является узлом атрибута (устаревший)
- Все комментарии являются узлами комментариев
С помощью HTML DOM все узлы в дереве узлов могут быть доступны с помощью JavaScript.
Новые узлы могут быть созданы, а все узлы могут быть изменены или удалены.
Узел связи
Узлы в дереве узлов имеют иерархическое отношение друг к другу.
Для описания отношений используются термины родитель, ребенок и брат.
- В дереве узлов верхний узел называется корневым (или корневым узлом)
- Каждый узел имеет ровно одного родителя, кроме корня (который не имеет родителя)
- Узел может иметь несколько дочерних узлов
- Братья и сестры - это узлы с одним и тем же родителем.
<html>
<head>
<title>DOM Учебник</title>
</head>
<body>
<h1>DOM Урок первый</h1>
<p>Привет, мир!</p>
</body>
</html>
Из HTML выше вы можете прочитать:
<html>является корневым узлом<html>не имеет родителей<html>является родителем<head>и<body><head>является первым ребенком<html><body>является последним ребенком<html>
и:
<head>иметь одного ребенка:<title><title>имеет одного ребенка (текстовый узел): "DOM Учебник"<body>иметь двоих детей:<h1>и<p><h1>иметь одного ребенка: "DOM Урок первый"<p>иметь одного ребенка: "Привет, мир!"<h1>и<p>есть братья и сестры
Навигация между узлами
Для перемещения между узлами с помощью JavaScript можно использовать следующие свойства узла:
parentNodechildNodes[nodenumber]firstChildlastChildnextSiblingpreviousSibling
Дочерние узлы и значения узлов
Распространенной ошибкой при обработке DOM является ожидание, что узел элемента будет содержать текст.
Пример:
<title
id="demo">DOM Учебник</title>
Элемент узела <title> (в приведенном выше примере) не содержит текста.
Он содержит текстовый узел со значением "DOM Учебник".
Значение текстового узла может быть доступно с помощью узла свойства 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">Моя первая страница</h1>
<p id="id02"></p>
<script>
document.getElementById("id02").innerHTML
= document.getElementById("id01").innerHTML;
</script>
</body>
</html>
Попробуйте сами »
Пример
<html>
<body>
<h1 id="id01">Моя первая страница</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.body- Текст тела документаdocument.documentElement- Полный документ
Пример
<html>
<body>
<p>Привет, мир!</p>
<div>
<p>DOM очень полезен!</p>
<p>Этот пример демонстрирует следующее свойство <b>document.body</b>.</p>
</div>
<script>
alert(document.body.innerHTML);
</script>
</body>
</html>
Попробуйте сами »
Пример
<html>
<body>
<p>Привет, мир!</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 всегда содержит имя тега в верхнем регистре HTML элемента.
Свойство nodeValue
Свойство nodeValue определяет значение узла.
- nodeValue для узлов элементов это
null - nodeValue для текстовых узлов это сам текст
- nodeValue для узлов атрибутов используется значение атрибута
Свойство nodeType
Свойство 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">Schoolsw3</h1> |
| ATTRIBUTE_NODE | 2 | class = "heading" (устаревший) |
| TEXT_NODE | 3 | Schoolsw3 |
| COMMENT_NODE | 8 | <!-- Это комментарий --> |
| DOCUMENT_NODE | 9 | HTML документ сам (родитель из <html>) |
| DOCUMENT_TYPE_NODE | 10 | <!Doctype html> |
Тип 2 является устаревшим в HTML DOM (но работает). Он не является устаревшим в XML DOM.
