С HTML DOM, вы можете перемещаться по дереву узла с использованием узла связи.
DOM Nodes
В соответствии со стандартом 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 Учебное пособие"
- <body> имеет двоих детей: <h1> и <p>
- <h1> имеет один ребенок: "DOM Урок один"
- <p> имеет одного ребенка: "Привет , мир!"
- <h1> и <p> являются братьями и сестрами
Перемещение между узлами
Вы можете использовать следующие свойства узла для перемещения между узлами с JavaScript:
- parentNode
- childNodes[ nodenumber ]
- firstChild
- lastChild
- nextSibling
- previousSibling
Внимание!
Типичная ошибка при обработке DOM является ожидать узел элемента, чтобы содержать текст.
В этом примере:<title> DOM Учебник </title> , узел элемента <title> не содержит текста.Он содержиттекстовый узел со значением "DOM Учебное пособие".
Значение текстового узла могут быть доступны с помощью узла innerHTML собственности, или nodeValue .
Child узлов и узлов Значения
В дополнение к innerHTML собственности, вы можете также использовать childNodes и nodeValue свойства , чтобы получить содержимое элемента.
Следующий пример собирает значение узла в <h1> элемента и копирует его в <p> элемента:
пример
<html>
<body>
<h1 id="intro">My First Page</h1>
<p id="demo">Hello!</p>
<script>
var myText =
document.getElementById("intro").childNodes[0].nodeValue;
document.getElementById("demo").innerHTML =
myText;
</script>
</body>
</html> Попробуй сам " В приведенном выше примере, getElementById представляет собой метод, в то время как childNodes и nodeValue являются свойствами.
В этом руководстве мы используем innerHTML свойство. Тем не менее, изучение метода выше полезно для понимания древовидной структуры и навигации по DOM.
Использование firstChild свойства совпадает , как с помощью childNodes[0] :
пример
<html>
<body>
<h1 id="intro">My First Page</h1>
<p id="demo">Hello World!</p>
<script>
myText = document.getElementById("intro").firstChild.nodeValue;
document.getElementById("demo").innerHTML = myText;
</script>
</body>
</html> Попробуй сам " DOM корневых узлов
Есть два специальных свойства, которые позволяют получить доступ к полному документу:
- document.body - Тело документа
- 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
Примечание: nodeName всегда содержит заглавную имя тега HTML - элемента.
nodeValue недвижимости
nodeValue свойство определяет значение узла.
- nodeValue для узлов элементов не определен
- nodeValue для текстовых узлов является сам текст
- nodeValue для узлов атрибутов является значение атрибута
nodeType недвижимости
nodeType свойство возвращает тип узла. nodeType только для чтения.
Наиболее важные типы узлов:
| Тип элемента | NodeType |
|---|---|
| Element | 1 |
| Attribute | 2 |
| Text | 3 |
| Comment | 8 |
| Document | 9 |