Dom-xml-dom-navigation

提供：Dev Guides
移動先:案内、検索

XML DOM-ナビゲーション

これまで、DOM構造、XML DOMオブジェクトの読み込みと解析、およびDOMオブジェクトの走査方法について学習しました。 ここでは、DOMオブジェクトのノード間をナビゲートする方法を説明します。 XML DOMは、ノードのさまざまなプロパティで構成されており、次のようなノードをナビゲートするのに役立ちます-

  • parentNode
  • childNodes
  • 第一子
  • 最後の子
  • nextSibling
  • 前の兄弟

以下は、他のノードとの関係を示すノードツリーの図です。

XML DOMナビゲーション

DOM-親ノード

このプロパティは、親ノードをノードオブジェクトとして指定します。

例

次の例（navigate_example）は、XMLドキュメント（link：/dom/node.xml [node.xml]）を解析してXML DOMオブジェクトに変換します。 次に、DOMオブジェクトは、子ノードを介して親ノードにナビゲートされます- 

<!DOCTYPE html>
<html>
   <body>
      <script>
         if (window.XMLHttpRequest) {
            xmlhttp = new XMLHttpRequest();
         } else {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
         }
         xmlhttp.open("GET","/dom/node.xml",false);
         xmlhttp.send();
         xmlDoc = xmlhttp.responseXML;

         var y = xmlDoc.getElementsByTagName("Employee")[0];
         document.write(y.parentNode.nodeName);
      </script>
   </body>
</html>

上記の例でわかるように、子ノード_Employee_は親ノードにナビゲートします。

実行

このファイルを_navigate_examplel_としてサーバーパスに保存します（このファイルとlink：/dom/node.xml [node.xml]はサーバーの同じパスにある必要があります）。 出力では、_Employee_の親ノード、つまり_Company_を取得します。

第一子

このプロパティは_Node_型で、NodeListに存在する最初の子名を表します。

例

次の例（first_node_example）は、XMLドキュメント（link：/dom/node.xml [node.xml]）をXML DOMオブジェクトに解析してから、DOMオブジェクトに存在する最初の子ノードに移動します。 

<!DOCTYPE html>
<html>
   <body>
      <script>
         if (window.XMLHttpRequest) {
            xmlhttp = new XMLHttpRequest();
         } else {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
         }
         xmlhttp.open("GET","/dom/node.xml",false);
         xmlhttp.send();
         xmlDoc = xmlhttp.responseXML;

         function get_firstChild(p) {
            a = p.firstChild;

            while (a.nodeType != 1) {
               a = a.nextSibling;
            }
            return a;
         }
         var firstchild = get_firstChild(xmlDoc.getElementsByTagName("Employee")[0]);
         document.write(firstchild.nodeName);
      </script>
   </body>
</html>
  • 関数_get_firstChild（p）_は、空のノードを回避するために使用されます。 ノードリストからfirstChild要素を取得するのに役立ちます。
  • * x = get_firstChild（xmlDoc.getElementsByTagName（ "Employee"）[0]）*は、タグ名_Employee_の最初の子ノードを取得します。

実行

このファイルを_first_node_example_としてサーバーパスに保存します（このファイルとlink：/dom/node.xml [node.xml]はサーバーの同じパスにある必要があります）。 出力では、Employee_の最初の子ノード、つまり _ファーストネーム。

最後の子

このプロパティは_Node_型で、NodeListに存在する最後の子名を表します。

例

次の例（last_node_example）は、XMLドキュメント（link：/dom/node.xml [node.xml]）をXML DOMオブジェクトに解析し、xml DOMオブジェクトに存在する最後の子ノードに移動します。 

<!DOCTYPE html>
  <body>
      <script>
         if (window.XMLHttpRequest) {
            xmlhttp = new XMLHttpRequest();
         } else {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
         }
         xmlhttp.open("GET","/dom/node.xml",false);
         xmlhttp.send();
         xmlDoc = xmlhttp.responseXML;

         function get_lastChild(p) {
            a = p.lastChild;

            while (a.nodeType != 1){
               a = a.previousSibling;
            }
            return a;
         }
         var lastchild = get_lastChild(xmlDoc.getElementsByTagName("Employee")[0]);
         document.write(lastchild.nodeName);
      </script>
   </body>
</html>

実行

このファイルを_last_node_example_としてサーバーパスに保存します（このファイルとnode.xmlはサーバーの同じパスにある必要があります）。 出力では、_Employeeの最後の子ノード、つまり_Email_を取得します。

次の兄弟

このプロパティは_Node_型で、次の子、つまりNodeListに存在する指定された子要素の次の兄弟を表します。

例

次の例（nextSibling_example）は、XMLドキュメント（link：/dom/node.xml [node.xml]）をXML DOMオブジェクトに解析し、XMLドキュメントに存在する次のノードにすぐに移動します。 

<!DOCTYPE html>
   <body>
      <script>
         if (window.XMLHttpRequest) {
            xmlhttp = new XMLHttpRequest();
         }
         else {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
         }
         xmlhttp.open("GET","/dom/node.xml",false);
         xmlhttp.send();
         xmlDoc = xmlhttp.responseXML;

         function get_nextSibling(p) {
            a = p.nextSibling;

            while (a.nodeType != 1) {
               a = a.nextSibling;
            }
            return a;
         }
         var nextsibling = get_nextSibling(xmlDoc.getElementsByTagName("FirstName")[0]);
         document.write(nextsibling.nodeName);
      </script>
   </body>
</html>

実行

このファイルを_nextSibling_example_としてサーバーパスに保存します（このファイルとnode.xmlはサーバーの同じパスにある必要があります）。 出力では、_FirstName、_の次の兄弟ノード、つまり_LastName_を取得します。

前の兄弟

このプロパティは_Node_型で、前の子、つまりNodeListに存在する指定された子要素の前の兄弟を表します。

例

次の例（previoussibling_example）は、XMLドキュメント（link：/dom/node.xml [node.xml]）をXML DOMオブジェクトに解析し、xmlドキュメントに存在する最後の子ノードのbeforeノードに移動します。 

<!DOCTYPE html>
   <body>
      <script>
         if (window.XMLHttpRequest)
         {
            xmlhttp = new XMLHttpRequest();
         } else {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
         }
         xmlhttp.open("GET","/dom/node.xml",false);
         xmlhttp.send();
         xmlDoc = xmlhttp.responseXML;

         function get_previousSibling(p) {
            a = p.previousSibling;

            while (a.nodeType != 1) {
               a = a.previousSibling;
            }
            return a;
         }

         prevsibling = get_previousSibling(xmlDoc.getElementsByTagName("Email")[0]);
         document.write(prevsibling.nodeName);
      </script>
   </body>
</html>

実行

このファイルを_previoussibling_example_としてサーバーパスに保存します（このファイルとlink：/dom/node.xml [node.xml]はサーバーの同じパスにある必要があります）。 出力では、_Emailの前の兄弟ノード、つまり_ContactNo_を取得します。

「https://www.finddevguides.com/index.php?title=Dom-xml-dom-navigation&oldid=29670」から取得
Powered by MediaWiki