โหนดสามารถสำรวจได้โดยใช้ความสัมพันธ์โหนด
การนำโหนด DOM
การเข้าถึงโหนดในต้นไม้โหนดผ่านทางความสัมพันธ์ระหว่างโหนดที่มักจะถูกเรียกว่า "navigating nodes"
ในรูปแบบ XML DOM ความสัมพันธ์โหนดจะถูกกำหนดเป็นคุณสมบัติโหนด:
- parentNode
- childNodes
- firstChild
- lastChild
- nextSibling
- previousSibling
ภาพต่อไปนี้แสดงให้เห็นถึงส่วนหนึ่งของต้นไม้โหนดและความสัมพันธ์ระหว่างโหนดในส่วน 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 ) แทนของทรัพย์สิน node .nextSibling
รหัสอธิบายว่า:
โหนดองค์ประกอบเป็นประเภท 1. ถ้าโหนดพี่น้องไม่ได้เป็นโหนดองค์ประกอบที่มันเคลื่อนไปยังโหนดต่อไปจนกว่าจะมีโหนดองค์ประกอบพบว่า วิธีนี้ผลที่ได้จะเหมือนกันทั้งใน Internet Explorer และ Firefox
ได้รับธาตุลูกคนแรก
รหัสต่อไปนี้แสดงโหนดองค์ประกอบแรกแรก <book> :
ตัวอย่าง
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
myFunction(xhttp);
}
};
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()
ตัวอย่างนี้ใช้ lastChild() วิธีการและฟังก์ชั่นที่กำหนดเองที่จะได้รับเด็กโหนดสุดท้ายของโหนด
nextSibling()
ตัวอย่างนี้ใช้ nextSibling() วิธีการและฟังก์ชั่นที่กำหนดเองที่จะได้รับโหนดพี่น้องต่อไปของโหนด
previousSibling()
ตัวอย่างนี้ใช้ previousSibling() วิธีการและฟังก์ชั่นที่กำหนดเองที่จะได้รับโหนดพี่น้องก่อนหน้าของโหนด