ตำแหน่งตัวเลือก 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() และฟังก์ชันที่กำหนดเองเพื่อหาตัวเลือกครอบครัวเดียวกันที่มีตัวเลือกก่อน