XML DOM-탐색

지금까지 우리는 DOM 구조, XML DOM 객체를로드 및 구문 분석하고 DOM 객체를 통과하는 방법을 연구했습니다. 여기서 우리는 DOM 객체에서 노드 사이를 탐색하는 방법을 볼 수 있습니다. XML DOM은 다음과 같이 노드를 탐색하는 데 도움이되는 노드의 다양한 속성으로 구성됩니다.

parentNode
childNodes
firstChild
lastChild
nextSibling
previousSibling

다음은 다른 노드와의 관계를 보여주는 노드 트리 다이어그램입니다.

DOM-부모 노드

이 속성은 부모 노드를 노드 개체로 지정합니다.

예

다음 예제 (navigate_example.htm)는 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_example.html 로 저장 합니다 (이 파일과 node.xml 은 서버의 동일한 경로에 있어야 함). 출력에서 Employee 의 상위 노드 , 즉 Company를 얻습니다 .

첫 아이

이 속성은 Node 유형 이며 NodeList에있는 첫 번째 자식 이름을 나타냅니다.

예

다음 예제 (first_node_example.htm)는 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.htm 으로 저장하십시오 (이 파일과 node.xml 은 서버의 동일한 경로에 있어야 함). 출력에서, 우리의 첫 번째 자식 노드 얻을 직원 즉, FIRSTNAME을 .

막내

이 속성은 Node 유형 이며 NodeList에있는 마지막 자식 이름을 나타냅니다.

예

다음 예제 (last_node_example.htm)는 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.htm 으로 저장 합니다 (이 파일과 node.xml은 서버의 동일한 경로에 있어야 함). 출력에서, 우리의 마지막 자식 노드 얻을 직원, 즉, 이메일 .

다음 형제

이 속성은 Node 유형 이며 다음 자식, 즉 NodeList에있는 지정된 자식 요소의 다음 형제를 나타냅니다.

예

다음 예제 (nextSibling_example.htm)는 XML 문서 ( node.xml )를 xml 문서에있는 다음 노드로 즉시 이동하는 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_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.htm 으로 저장하십시오 (이 파일과 node.xml은 서버의 동일한 경로에 있어야 함). 출력에서, 우리의 다음 형제 노드 수 FIRSTNAME, 즉, 성을 .

이전 형제

이 속성은 Node 유형 이며 이전 자식, 즉 NodeList에있는 지정된 자식 요소의 이전 형제를 나타냅니다.

예

다음 예제 (previoussibling_example.htm)는 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_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.htm 으로 저장하십시오 (이 파일과 node.xml 은 서버의 동일한 경로에 있어야 함). 출력에서, 우리의 이전 형제 노드받을 이메일, 즉, ContactNo을 .