Определение узла XML DOM

Узлы могут быть определены с помощью взаимоотношений между узлами.

Определение узлов DOM

Доступ к узлам узловой дереве через взаимоотношения между узлами, обычно называется "определением узлов" (или навигацией узлов, navigating nodes).

В XML DOM, взаимоотношения между узлами определены как атрибуты узлов:

  • parentNode
  • childNodes
  • firstChild
  • lastChild
  • nextSibling
  • previousSibling

Ниже показано books.xml является частью узловой дерева и объясняет взаимоотношения между узлами:

Дерево узлов DOM

DOM - родительский узел

Все узлы имеют только одного родителя. Следующий код навигирует к родительскому узлу <book>:

Пример

function myFunction(xml) {
var xmlDoc = xml.responseXML;
    var x = xmlDoc.getElementsByTagName("book")[0];
    document.getElementById("demo").innerHTML = x.parentNode.nodeName;
}

Попробуйте сами

Объяснение примера:

  1. Перевод books.xml загружен в xmlDoc В
  2. Получение первого элемента <book>
  3. Вывод имени узла родителя "x"

Избегать пустых текстовых узлов

Некоторые браузеры могут считывать пробелы или символы новой строки как текстовые узлы. Это может вызвать проблемы при использовании следующих свойств:

  • 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. Если同级 узел не является элементом, перемещается к следующему узлу, пока не найден элемент.

Получение первого подэлемента

Ниже приведен код, который показывает первый элемент узла <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;
}
// Проверка, является ли первый узел элементом
function get_firstChild(n) {
    var y = n.firstChild;
    while (y.nodeType != 1) {
        y = y.nextSibling;
    }
    return y;
}
</script>
</body>
</html>

Попробуйте сами

Объяснение примера:

  1. Перевод books.xml Загрузка в xmlDoc
  2. Использование функции get_firstChild на первом узле <book>, чтобы получить первый подэлемент
  3. Вывод имени узла первого подэлемента

Более примеров

lastChild()
Использование метода lastChild() и пользовательской функции для получения последнего подэлемента узла.
nextSibling()
Использование метода nextSibling() и пользовательских функций для получения следующего родного узла.
previousSibling()
Использование метода previousSibling() и пользовательских функций для получения предыдущего родного узла.