[JavaScript] nodeType이란

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

https://yyyeji.tistory.com/160

[JavaScript] DOM이란?

 

NodeType이란

Element, Attribute, Text . . . 어떤 종류냐에 따라서 특정 number을 가지게 됩니다.

Node Type	NodeType
Element	1
Attribute	2
Text	3
Comment	8
Document	9

 

 

NodeType은 언제 사용하는지 예제를 통해 살펴보겠습니다.

<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 x, i, xmlDoc, txt;
    xmlDoc = xml.responseXML;
    txt = "";
    x = xmlDoc.documentElement.childNodes;
    for (i = 0; i<x.length; i++){
        if(x[i].nodeType == 1){
            txt += x[i].nodeName + "<br>";
        }
    }
    document.getElementById("demo").innerHTML = txt;
}

↑↑↑       h.html      ↑↑↑

 

 

Function의 조건문을 살펴보겠습니다.

 

if(x[i].nodeType == 1){

→  x[i]의 값이 1인지를 판단하게 됩니다.

→  nodeType에서 1은 Element입니다.

→  판단하는 이유는 NodeList가 반환될 때 요소 노드만 반환되지 않고 주석 노드까지 같이 반환되기 때문입니다.

 

txt += x[i].nodeName + "<br>";

→  nodeType이 element일 경우에 변수에 문자열을 더해줍니다.
        

 

 

for (i = 0; i<x.length; i++){
    if(x[i].nodeType == 1){
        txt += x[i].nodeName + "<br>";
    }
}

조건문을 사용하지 않으면 어떻게 될까요?

for (i = 0; i<x.length; i++){
    txt += x[i].nodeName + "<br>";             
}

주석 노드까지 출력됩니다.

 

 

 

◡̈