HTML DOM навигации
Через HTML DOM, вы можете использовать узел в отношениях узел навигации дерева.
список узлов HTML DOM
getElementsByTagName () метод возвращает список узлов. Список узлов является массивом узлом.
Следующий код выбранный документ все <р> узел:
примеров
Ее можно получить по следующей метке. Для доступа ко второму <р>, вы можете написать:
Попробуйте »
Примечание:
Под маркой начинается с 0.
HTML DOM Список узлов Длина
Длина атрибута определяет количество узлов в списке узлов.
Вы можете использовать свойство длины в списке узлов контура:
примеров
for (i=0;i<x.length;i++)
{
document.write(x[i].innerHTML);
document.write("<br />");
}
Попробуйте »
Примеры анализа:
- Получить все <р> узел элемента
- Выходное значение каждого элемента <p> текстового узла
отношения узел навигации
Вы можете использовать три узла атрибута: ParentNode, FirstChild и LastChild, перемещаться по структуре документа.
Рассмотрим следующий фрагмент HTML:
<body>
<p>Hello World!</p>
<div>
<p>The DOM is very useful!</p>
<p>This example demonstrates node relationships.</p>
</div>
</body>
</html>
- Элемент первая <р> является первым дочерним <тело> элемент (FirstChild)
- <Div> элемент последний дочерний элемент <body> элемент (LastChild)
- <Body> элемент является первым элементом <р> и <DIV> родительский узел элемента (ParentNode)
FirstChild свойство можно использовать для доступа к элементам текста:
примеров
<body>
<p id="intro">Hello World!</p>
<script>
x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);
</script>
</body>
</html>
Попробуйте »
корневой узел DOM
Есть два специальных атрибутов, вы можете получить доступ ко всем документации:
- document.documentElement - все документы
- document.body - тело документа
примеров
<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>
Попробуйте »
ChildNodes и nodeValue
В дополнение к innerHTML собственности, вы можете также использовать ChildNodes и nodeValue свойство, чтобы получить содержание элемента.
Следующий код получает ID = "Intro" в <p> значения элементов:
примеров
<body>
<p id="intro">Hello World!</p>
<script>
var txt=document.getElementById("intro").childNodes[0].nodeValue;
document.write(txt);
</script>
</body>
</html>
Попробуйте »
В приведенном выше примере, getElementById представляет собой метод, в то время как ChildNodes и nodeValue являются свойствами.
В этом уроке мы будем использовать свойство innerHTML. Тем не менее, описанный выше способ обучения способствует навигации по структуре дерева DOM и понимания.