最新のWeb開発のチュートリアル
 

XML DOM - ナビゲートノード

❮前 次の章❯

ノードは、ノードの関係を使用してナビゲートすることができます。

×

ヘッダ

DOMノードをナビゲート

ノード間の関係を介してノードツリー内のノードにアクセスし、しばしば呼ばれる"navigating nodes" 。

XML DOMでは、ノードとの関係は、ノードへのプロパティとして定義されています。

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

以下の画像は、ノードツリーの一部と内のノード間の関係を示したBooks.xmlを ：

ノードツリー

DOM - 親ノード

すべてのノードは、1つの親ノードを持っています。 次のコードは、親ノードに移動し<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"

空のテキストノードを避けます

Firefox、およびいくつかの他のブラウザは、Internet Explorerがしません、テキストノードとして空白スペースや改行を扱います。

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です。 このように、結果は、Internet ExplorerとFirefoxの両方で同じになります。

最初の子要素を取得します。

次のコードは、最初の最初の要素ノードが表示され<book> ：

例

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

出力：

title
»それを自分で試してみてください

例を説明しました：

  1. ロード" books.xmlという XMLDOCへ」
  2. 最初にget_firstChild機能を使用して<book>要素ノードである最初の子ノードを取得するために、要素ノード
  3. 要素ノードである最初の子ノードの出力ノード名
例

その他の例

lastChild()
この例では、使用していますlastChild()ノードの最後の子ノードを取得する方法とカスタム関数を

nextSibling()
この例では、使用していますnextSibling()ノードの次の兄弟ノードを取得する方法とカスタム関数を

previousSibling()
この例では、使用previousSibling()ノードの前の兄弟ノードを取得する方法とカスタム関数を


❮前 次の章❯