En son web geliştirme öğreticiler
 

XML DOM - Gezinme Düğümler

❮ Önceki Sonraki Bölüm ❯

Düğümler düğüm ilişkileri kullanarak navigasyon olabilir.

x

Başlık

DOM Düğümleri gezinme

Düğümler arasındaki ilişki ile düğüm, ağacın düğümleri erişilmesi, genellikle denir "navigating nodes" .

XML DOM, düğüm ilişkileri düğümlerine özellikleri aşağıdaki gibi tanımlanır:

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

Aşağıdaki görüntü düğümü ağaç ve düğümler arasındaki ilişkinin bir kısmını göstermektedir books.xml :

Düğüm ağacı

DOM - Üst Düğüm

Tüm düğümler tam olarak bir ana düğüm vardır. Aşağıdaki kod ana düğüme gider <book> :

Örnek

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

Örnek açıklanmıştır:

  1. Yük " books.xml xmlDoc içine"
  2. İlk alın <book> elemanı
  3. Ana düğümün Çıktı düğüm adı "x"

Boş Metin Düğümleri kaçının

Firefox ve diğer bazı tarayıcılar, metin düğümleri gibi boş beyaz boşluk veya yeni satırlar davranır Internet Explorer olmaz.

firstChild, lastChild, nextSibling, previousSibling: özelliklerini kullanılırken bu bir soruna neden olur.

boş metin düğümlerine (öğe düğümleri arasındaki boşluklar ve yeni satır karakterlerini), seyir önlemek için, düğüm türü kontrol eden bir fonksiyonu kullanmak:

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

Yukarıdaki işlev kullanmak için izin verir get_nextSibling( node ) yerine mülkünün node .nextSibling.

Kod açıkladı:

Kardeş düğümü içeren bir düğüm yok ise, eleman düğümleri bir eleman düğümü buluncaya kadar bir sonraki düğüm için hareket eder, tip 1 bulunmaktadır. Bu şekilde, sonuç Internet Explorer ve Firefox içinde aynı olacaktır.

İlk Çocuk Eleman Alın

Aşağıdaki kod ilk ilk öğesi düğümünü görüntüler <book> :

Örnek

<!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>

Çıktı:

title
Kendin dene "

Örnek açıklanmıştır:

  1. Yük " books.xml xmlDoc içine"
  2. İlk on get_firstChild fonksiyonunu kullanın <book> bir eleman düğüm ilk çocuk düğüm almak için eleman düğümü
  3. Bir öğe düğümü Çıktı ilk çocuk düğüm düğüm adı
Örnekler

Diğer Örnekler

lastChild()
Bu örnek kullanır lastChild() Bir düğümün son çocuk düğüm almak için yöntem ve özel bir işlevi

nextSibling()
Bu örnek, kullanan nextSibling() bir düğüm eş düğüme elde etmek için yöntem ve özel bir işlevi

previousSibling()
Bu örnek, kullanan previousSibling() bir düğüm eş düğüme elde etmek için yöntem ve özel bir işlevi


❮ Önceki Sonraki Bölüm ❯