[JavaScript] childNodes 속성

↓↓↓       DOM 개념 알아보기      ↓↓↓

https://yyyeji.tistory.com/160

[JavaScript] DOM이란?

 

childNodes는

현재 요소의 자식 노드가 포함된 NodeList를 반환합니다.

NodeList가 반환될 때 요소 노드뿐만 아니라 주석 노드도 같이 반환합니다.

 

 

W3School에 나오는 Books.xml을 살펴보겠습니다.

 

 

<bookstore>
    <book category="cooking">
      <title lang ="en"> Everyday Italian</title>
      <author>Giada De Laurentiis</author>
      <year>2005</year>
      <price>30.00</price>
    </book>
    
    <book category="children">
      <title lang = 'en'> Harry Potter </title>
      <author>J K.Rowling</author>
      <year>2005</year>
      <price>29.99</price>
    </book>

    <book category="web">
      <title lang = 'en'> XQuery Kick Start </title>
      <author>James McGovern</author>
      <author>Per Bothner</author>
      <author>Kurt Cagle</author>
      <author>James Linn</author>
      <year>2003</year>
      <price>49.99</price>
    </book>

    <book category="web" cover="paperback">
      <title lang = 'en'> Learning XML </title>
      <author>Erik T. Ray</author>
      <year>2003</year>
      <price>39.95</price>
    </book>
</bookstore>

↑↑↑       Books.xml      ↑↑↑

 

function myFunction(xml) {
    var xmlDoc = xml.responseXML;
    document.getElementById("demo").innerHTML =
    xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
}

↑↑↑       h.html      ↑↑↑

 

 

Function의 xmlDoc.getElementByTagname("title")[0].childNodes[0].nodeValue; 을 살펴보겠습니다.

 

 

xmlDoc.getElementByTagname("title")[0].childNodes[0].nodeValue;

→  Tag의 이름이 title인 node를 List로 반환합니다.

 

 

xmlDoc.getElementByTagname("title")[0].childNodes[0].nodeValue;

→  Tag의 이름이 title인 node의 child node 0번째를 반환합니다.

→  childNodes[1]을 반환하면 아무것도 나오지 않습니다.

→  이유는 Title element의 childNodes[1]는 존재하지 않기 때문입니다.

 

 

xmlDoc.getElementByTagname("title")[0].childNodes[0].nodeValue;

→  Tag의 이름이 title인 node의 value를 반환합니다.

 

 

결과는 어떻게 될까요 ? ? ?

→  title인 node의 value인  Everyday Italian를 반환하게 됩니다.

xmlDoc.getElementByTagname("title")[0].childNodes[0].nodeValue;

 

xmlDoc.getElementByTagname("title")[1].childNodes[0].nodeValue;

xmlDoc.getElementsByTagName("title")[2].childNodes[0].nodeValue;

 

xmlDoc.getElementsByTagName("title")[3].childNodes[0].nodeValue;

◡̈