Узлы можно перемещаться с помощью узла связи.
Перемещение DOM узлов
Доступ узлов в дереве узлов через связи между узлами, часто называют "navigating nodes" .
В XML DOM, узел отношения определяются как свойства к узлам:
- parentNode
- childNodes
- firstChild
- lastChild
- nextSibling
- previousSibling
На следующем рисунке показана часть дерева узлов и взаимосвязи между узлами в books.xml :
DOM - родительский узел
Все узлы имеют ровно один родительский узел. Следующий код переходит к родительскому узлу <book> :
пример
function myFunction(xml) {
var xmlDoc = xml.responseXML;
var x = xmlDoc.getElementsByTagName("book")[0];
document.getElementById("demo").innerHTML = x.parentNode.nodeName;
}
Попробуй сам " Объяснение примера:
- Load " books.xml " в xmlDoc
- Получить первый <book> элемент
- Вывести имя узла родительского узла "x"
Избегайте пустых текстовых узлов
Firefox, а также некоторые другие браузеры, будут относиться пустые бело-пробелы или новые строки как текстовые узлы, Internet Explorer не будет.
Это создает проблему при использовании свойства: FirstChild, LastChild, NextSibling, PreviousSibling.
Чтобы избежать навигации пустые текстовые узлы (пробелы и новой строки символов между узлами элементов), мы используем функцию, которая проверяет тип узла:
function get_nextSibling(n)
{
var y = n.nextSibling;
while (y.nodeType! = 1)
{
y = y.nextSibling;
}
return y;
}
Выше функция позволяет использовать get_nextSibling( node ) вместо свойства node .nextSibling.
Код пояснил:
Элемент узлы типа 1. Если узел родственный не является узлом элемента, он переходит к следующему узлов, пока узел элемента не найден. Таким образом, результат будет таким же, как в Internet Explorer и Firefox.
Получить первый дочерний элемент
Следующий код отображает первый элемент узла первой <book> :
пример
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
myFunction(xhttp);
}
};
xhttp.open("GET",
"books.xml", true);
xhttp.send();
function myFunction(xml) {
var xmlDoc = xml.responseXML;
var x = get_firstChild(xmlDoc.getElementsByTagName("book")[0]);
document.getElementById("demo").innerHTML = x.nodeName;
}
//check if
the first node is an element node
function get_firstChild(n) {
var y = n.firstChild;
while (y.nodeType != 1) {
y = y.nextSibling;
}
return y;
}
</script>
</body>
</html>
Вывод:
title
Попробуй сам " Объяснение примера:
- Load " books.xml " в xmlDoc
- Используйте функцию get_firstChild на первом <book> узел элемента , чтобы получить первый дочерний узел , который является узлом элемента
- Вывести имя узла первого дочернего узла, который является узлом элемента
Еще примеры
lastChild()
В этом примере используется lastChild() метод и пользовательскую функцию , чтобы получить последний дочерний узел узла
nextSibling()
В этом примере используется nextSibling() метод и пользовательскую функцию , чтобы получить следующий родственный узел узла
previousSibling()
В этом примере используется previousSibling() метод и пользовательскую функцию , чтобы получить предыдущий родственный узел узла