Locate XML DOM Nodes

Maaring mapuntahan ang mga node sa pamamagitan ng relasyon sa pagitan ng mga node.

Lokasyon ng DOM na node

Sa pamamagitan ng mga relasyon ng node, maaring mapuntahan ang mga node sa kabanalan ng mga node, na kilala bilang "lokasyon ng node" (o nangangahulugan na paglalakbay ng node, navigating nodes).

Sa XML DOM, ang mga relasyon ng node ay tinatawag na mga atrubuto ng node:

  • parentNode
  • childNodes
  • firstChild
  • lastChild
  • nextSibling
  • previousSibling

Ang sumusunod na imahe ay nagpapakita ng: books.xml Isang bahagi ng kabanalan ng mga node, at ipinapaliwanag ang mga relasyon ng mga node:

DOM Node Tree

DOM - magulang na node

Ang lahat ng node ay may isang magulang lamang. Ang sumusunod na code ay nangangailangan sa magulang na node ng <book>:

Halimbawa

function myFunction(xml) {
var xmlDoc = xml.responseXML;
    var x = xmlDoc.getElementsByTagName("book")[0];
    document.getElementById("demo").innerHTML = x.parentNode.nodeName;
}

Subukan nang sarili

Halimbawa ng paliwanag:

  1. Ito ay books.xml na ilagay sa xmlDoc sa
  2. Makakuha ng unang <book> elemento
  3. Output ng pangalan ng node ng magulang ng "x"

Iwasan ang walang laman na teksto na node

Maaaring magiging teksto na node ang walang laman o ang mga linya ng ilang mga brauser. Ito ay magiging problema kapag ginagamit ang sumusunod na atrubuto:

  • firstChild
  • lastChild
  • nextSibling
  • previousSibling

Upang maiwasan ang paglapit sa walang laman na teksto na node (hindi na kasama ang mga puwang at mga linya sa pagbabago ng elemento), gumagamit kami ng isang function upang suriin ang uri ng node:

function get_nextSibling(n) {}}
    var y = n.nextSibling;
    while (y.nodeType != 1) {
        y = y.nextSibling;
    }
    return y;
}

Mayroon kaming function sa itaas, kaya maaari naming gamitin ang get_nextSibling(node) upang palitan ang attribute na node.nextSibling.

Paliwanag ng code:

Ang uri ng baryo ng element node ay 1. Kung ang magkakasabay na baryo ay hindi isang element node, ilipat sa susunod na baryo hanggang makita ang isang element node.

Kunin ang unang anak na baryo

Ang sumusunod na code ay nagpapakita ng unang <book> na unang element node:

Halimbawa

<!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;
}
// Surunin kung ang unang baryo ay isang element node
function get_firstChild(n) {
    var y = n.firstChild;
    while (y.nodeType != 1) {
        y = y.nextSibling;
    }
    return y;
}
</script>
</body>
</html>

Subukan nang sarili

Halimbawa ng paliwanag:

  1. Ito ay books.xml I-load sa xmlDoc
  2. Gamitin ang function na get_firstChild sa unang <book> baryo upang kunin ang unang anak na baryo
  3. Ibenta ang pangalan ng baryo ng unang anak na baryo

Higit pang mga halimbawa

lastChild()
Ginagamit ang method na lastChild() at ang custom function upang kunin ang huling anak na baryo ng isang node.
nextSibling()
Use the nextSibling() method and custom functions to get the next sibling node of the element.
previousSibling()
Use the previousSibling() method and custom functions to get the previous sibling node of the element.