С помощью 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 Lesson one"<p>есть один ребенок: "Привет мир!"<h1>и<p>Родственники (братья и сестры)
Перемещение между узлами
Вы можете использовать следующие свойства узла для перехода между узлами с помощью JavaScript:
parentNodechildNodes[nodenumber]firstChildlastChildnextSiblingpreviousSibling
Дочерние узлы и значения узлов
Распространенная ошибка при обработке DOM - ожидание, что узел элемента будет содержать текст.
Пример:
<title
id="demo">DOM Учебник</title>
Узел элемента <title> (в приведенном выше примере) не содержит текст.
Он содержит текстовый узел со значением "DOM Учебник".
К значению текстового узла можно получить доступ через innerHTML свойство узла:
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">Моя первая страница</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>Привет Мир!</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 атрибута node - это имя атрибута
- 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>
Попробуйте сами »
Наиболее важными свойствами типа узла являются:
| Узел | Тип | Пример |
|---|---|---|
| ELEMRUT_НЕТDE | 1 | <h1 class="heading">Schoolsw3</h1> |
| ATTRIBUTE_НЕТDE | 2 | class = "heading" (устарело) |
| TEXT_НЕТDE | 3 | Schoolsw3 |
| COMMRUT_НЕТDE | 8 | <!-- Это комментарий --> |
| DOCUMRUT_НЕТDE | 9 | Сам HTML документ (родительский элемент <html>) |
| DOCUMRUT_TYPE_НЕТDE | 10 | <!Doctype html> |
Тип 2 не рекомендуется в HTML DOM (но работает). Он не является устаревшим в XML DOM.