Định vị nút XML DOM

Có thể định vị các nút bằng cách sử dụng mối quan hệ giữa các nút.

Định vị DOM nút

Để truy cập các nút trong cây nút của bạn thông qua mối quan hệ giữa các nút, thường được gọi là "định vị nút" (hoặc điều hướng nút, navigating nodes).

Trong XML DOM, mối quan hệ giữa các nút được định nghĩa bởi các thuộc tính của nút:

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

Hình dưới đây trình bày books.xml là một phần của cây nút và giải thích mối quan hệ giữa các nút:

Cây节点 DOM

DOM - bậc cha

Mọi nút chỉ có một bậc cha. Mã sau đây điều hướng đến bậc cha của <book>:

Ví dụ

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

Thử ngay lập tức

Giải thích ví dụ:

  1. Để books.xml được tải vào xmlDoc trong
  2. Lấy phần tử đầu tiên <book>
  3. Xuất ra tên nút của bậc cha của "x"

Tránh nút văn bản trống

Một số trình duyệt có thể coi khoảng trống hoặc dấu ngắt dòng là nút văn bản. Điều này sẽ gây ra vấn đề khi sử dụng các thuộc tính sau:

  • firstChild
  • lastChild
  • nextSibling
  • previousSibling

Để tránh điều hướng đến các nút văn bản trống (khoảng trống và dấu ngắt dòng giữa các nút元素), chúng ta sử dụng một hàm để kiểm tra loại nút:

function get_nextSibling(n) {}}
    var y = n.nextSibling;
    while (y.nodeType != 1) {
        y = y.nextSibling;
    }
    return y;
}

Với hàm trên, chúng ta có thể sử dụng get_nextSibling(node) để thay thế thuộc tính node.nextSibling.

Giải thích mã:

Loại của nút phần tử là 1. Nếu nút cùng cấp không phải là nút phần tử, di chuyển đến nút tiếp theo cho đến khi tìm thấy nút phần tử.

Lấy nút con đầu tiên

Mã dưới đây hiển thị nút con đầu tiên của phần tử <book> đầu tiên:

Ví dụ

<!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;
}
// Kiểm tra nút đầu tiên có phải là nút phần tử hay không
function get_firstChild(n) {
    var y = n.firstChild;
    while (y.nodeType != 1) {
        y = y.nextSibling;
    }
    return y;
}
</script>
</body>
</html>

Thử ngay lập tức

Giải thích ví dụ:

  1. Để books.xml Được tải vào xmlDoc
  2. Sử dụng hàm get_firstChild trên phần tử <book> đầu tiên để lấy nút con đầu tiên
  3. Xuất ra tên của nút con đầu tiên

Các ví dụ khác

lastChild()
Sử dụng phương thức lastChild() và hàm tùy chỉnh để lấy nút con cuối cùng của phần tử.
nextSibling()
Sử dụng phương thức nextSibling() và hàm tùy chỉnh để lấy node đồng hàng sau của node.
previousSibling()
Sử dụng phương thức previousSibling() và hàm tùy chỉnh để lấy node đồng hàng trước của node.