XML DOM Locating Nodes

ສາມາດພິຈາລະນາບັນຊີຜ່ານຄວາມກ່ຽວຂ້ອງບັນຊີລະຫວ່າງບັນຊີ.

ການພິຈາລະນາ 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() 方法和自定义函数来获取节点的上一个同胞节点。