XMLDOMノードの定位

ノード間の関係を使用してノードを定位することができます。

DOMノード定位

ノードの関係を通じてノードツリーのノードにアクセスする方法は、通常「ノード定位」（またはナビゲートノード、navigating nodes）と呼ばれます。

XML DOMでは、ノードの関係は属性として定義されています：

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

以下の図は以下を示しています： books.xml ノードツリーの一部を示し、ノード間の関係を説明しています：

DOM ノードツリー

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"の出力の親ノードのノード名

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

一部のブラウザは空白や改行をテキストノードとして認識するため、以下の属性を使用する際に問題が発生することがあります：

  • 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. 最初の <book> 元素ノードに get_firstChild 関数を使用して、最初の子要素ノードを取得します
  3. 最初の子要素ノードのノード名を出力します

さらに例

lastChild()
lastChild() 方法和カスタム関数を使用して、ノードの最後の子ノードを取得します。
nextSibling()
nextSibling() メソッドとカスタム関数を使用して、ノードの次の同士ノードを取得する方法
previousSibling()
previousSibling() メソッドとカスタム関数を使用して、ノードの前の同士ノードを取得する方法