DOM XML - Nút điều hướng
Các nút có thể được điều hướng bằng cách sử dụng các mối quan hệ của nút.
Điều hướng các nút DOM
Truy cập các nút trong cây nút thông qua mối quan hệ giữa các nút, thường được gọi là "nút điều hướng".
Trong XML DOM, các mối quan hệ nút được định nghĩa là thuộc tính của các nút:
- parentNode
- trẻ em
- FirstChild
- con cuối cùng
- nextSibling
- trước đây Anh chị em
Hình ảnh sau minh họa một phần của cây nút và mối quan hệ giữa các nút trong books.xml :
DOM - Nút mẹ
Tất cả các nút đều có chính xác một nút cha. Đoạn mã sau điều hướng đến nút cha của <book>:
Thí dụ
function myFunction(xml) {
var xmlDoc = xml.responseXML;
var x = xmlDoc.getElementsByTagName("book")[0];
document.getElementById("demo").innerHTML = x.parentNode.nodeName;
}
Ví dụ được giải thích:
- Tải " books.xml " vào xmlDoc
- Nhận phần tử <book> đầu tiên
- Xuất ra tên nút của nút cha của "x"
Tránh các nút văn bản trống
Firefox và một số trình duyệt khác sẽ coi khoảng trắng trống hoặc dòng mới là nút văn bản, Internet Explorer thì không.
Điều này gây ra sự cố khi sử dụng các thuộc tính: firstChild, lastChild, nextSibling, beforeSibling.
Để tránh điều hướng đến các nút văn bản trống (dấu cách và ký tự dòng mới giữa các nút phần tử), chúng tôi 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;
}
Hàm trên cho phép bạn sử dụng get_nextSibling ( nút ) thay vì nút thuộc tính .nextSibling.
Mã giải thích:
Các nút phần tử là loại 1. Nếu nút anh chị em không phải là một nút phần tử, nó sẽ di chuyển đến các nút tiếp theo cho đến khi tìm thấy một nút phần tử. Bằng cách này, kết quả sẽ giống nhau trên cả Internet Explorer và Firefox.
Nhận phần tử con đầu tiên
Đoạn mã sau hiển thị nút phần tử đầu tiên của <book> đầu tiên:
Thí 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;
}
//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>
Đầu ra:
title
Ví dụ được giải thích:
- Tải " books.xml " vào xmlDoc
- Sử dụng hàm get_firstChild trên nút phần tử <book> đầu tiên để lấy nút con đầu tiên là nút phần tử
- Xuất ra tên nút của nút con đầu tiên là nút phần tử
Các ví dụ khác
Ví dụ này sử dụng phương thức lastChild () và một hàm tùy chỉnh để lấy nút con cuối cùng của một nút
Ví dụ này sử dụng phương thức nextSibling () và một hàm tùy chỉnh để lấy nút anh em tiếp theo của một nút
Ví dụ này sử dụng phương thức beforeSibling () và một hàm tùy chỉnh để lấy nút anh chị em trước của một nút