XML DOM — навигация по узлам
По узлам можно перемещаться, используя отношения узлов.
Навигация по узлам DOM
Доступ к узлам в дереве узлов через отношения между узлами часто называют «навигацией по узлам».
В XML DOM отношения узлов определяются как свойства узлов:
- родительский узел
- дочерние узлы
- Первый ребенок
- последний ребенок
- следующийРодной брат
- предыдущийРодной брат
На следующем изображении показана часть дерева узлов и взаимосвязь между узлами в books.xml :
DOM — родительский узел
Все узлы имеют ровно один родительский узел. Следующий код выполняет переход к родительскому узлу <book>:
Пример
function myFunction(xml) {
var xmlDoc = xml.responseXML;
var x = xmlDoc.getElementsByTagName("book")[0];
document.getElementById("demo").innerHTML = x.parentNode.nodeName;
}
Объяснение примера:
- Загрузите « 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 ) вместо узла свойств .nextSibling.
Объяснение кода:
Узлы элементов относятся к типу 1. Если родственный узел не является узлом элемента, он перемещается к следующим узлам до тех пор, пока не будет найден узел элемента. Таким образом, результат будет одинаковым как в Internet Explorer, так и в Firefox.
Получить первый дочерний элемент
Следующий код отображает узел первого элемента первой <book>:
Пример
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
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
Объяснение примера:
- Загрузите « books.xml » в xmlDoc
- Используйте функцию get_firstChild для первого узла элемента <book>, чтобы получить первый дочерний узел, который является узлом элемента.
- Выведите имя узла первого дочернего узла, который является узлом элемента
Дополнительные примеры
В этом примере используется метод lastChild() и пользовательская функция для получения последнего дочернего узла узла.
В этом примере используется метод nextSibling() и пользовательская функция для получения следующего одноуровневого узла узла.
В этом примере используется метод previousSibling() и пользовательская функция для получения предыдущего одноуровневого узла узла.