XML DOM - การนำทางโหนด
โหนดสามารถนำทางได้โดยใช้ความสัมพันธ์ของโหนด
การนำทางโหนด DOM
การเข้าถึงโหนดในแผนผังโหนดผ่านความสัมพันธ์ระหว่างโหนด มักเรียกว่า "การนำทางโหนด"
ใน XML DOM ความสัมพันธ์ของโหนดถูกกำหนดเป็นคุณสมบัติของโหนด:
- parentNode
- ลูกโหนด
- ลูกคนแรก
- ลูกคนสุดท้อง
- ต่อไปพี่น้อง
- ก่อนหน้าพี่น้อง
รูปภาพต่อไปนี้แสดงส่วนหนึ่งของโหนดทรีและความสัมพันธ์ระหว่างโหนดใน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
- รับ <หนังสือ> องค์ประกอบแรก
- เอาต์พุตชื่อโหนดของโหนดหลักของ "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
รับองค์ประกอบลูกคนแรก
รหัสต่อไปนี้แสดงโหนดองค์ประกอบแรกของ <หนังสือ> แรก:
ตัวอย่าง
<!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() และฟังก์ชันที่กำหนดเองเพื่อรับโหนดพี่น้องก่อนหน้าของโหนด