XML DOM Düğümlerini Bulma

Nodes can be located by using the relationship between nodes.

Locate DOM Nodes

Accessing nodes in the node tree through the relationship between nodes, usually referred to as 'locating nodes' (or navigating nodes, navigating nodes).

In the XML DOM, the relationship between nodes is defined by the node's attributes:

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

The following figure shows books.xml Part of the node tree and explains the relationship between nodes:

DOM Node Ağacı

DOM - Parent Node

All nodes have only one parent. The following code navigates to the parent node of <book>:

Örnek

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

Kişisel olarak deneyin

Örnek açıklaması:

  1. Düzenle books.xml loaded to xmlDoc
  2. Get the first <book> element
  3. Output the node name of the parent node of "x"

Avoid empty text nodes

Bazı tarayıcılar boşluk veya satır atlamalarını metin düğümü olarak gösterebilir. Bu, aşağıdaki özellikleri kullanırken sorunlara yol açabilir:

  • firstChild
  • lastChild
  • nextSibling
  • previousSibling

Boş metin düğümüne (element düğümleri arasındaki空格和换行符) yönlendirilmekten kaçınmak için bir fonksiyon kullanıyoruz:

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

Yukarıdaki fonksiyonlarla, get_nextSibling(node) kullanarak node.nextSibling özelliğini değiştirebiliriz.

Kod açıklaması:

Element düğümünün türü 1'dir. Eş düğüm element düğüm değilse, bir sonraki düğüme taşınır ve element düğümüne kadar ilerlenir.

İlk alt düğümü alın

Aşağıdaki kod, ilk <book>ın ilk element düğümünü gösterir:

Örnek

<!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;
}
// İlk düğümün element düğüm olup olmadığını kontrol edin
function get_firstChild(n) {
    var y = n.firstChild;
    while (y.nodeType != 1) {
        y = y.nextSibling;
    }
    return y;
}
</script>
</body>
</html>

Kişisel olarak deneyin

Örnek açıklaması:

  1. Düzenle books.xml xmlDoc'a yüklenmiştir
  2. İlk <book> düğüm düğümünde get_firstChild fonksiyonunu kullanarak ilk alt düğüm düğümünü elde edin
  3. İlk alt düğüm düğümünün adını çıktıya verin

Daha fazla örnek

lastChild()
lastChild() yöntemi ve özelleştirilmiş fonksiyon kullanarak düğümün en son alt düğümünü elde etmek.
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.