# Node 종류 API

> 노드 작업을 하게 되면 현재 선택된 노드가 어떤 타입인지를 판단해야 하는 경우가 있다. \
> 이런 경우에 사용할 수 있는 API가 nodeType, nodeName이다.&#x20;

* Node.nodeType : node의 타입을 의미한다.&#x20;
* Node.nodeName : node의 이름 (태그명을 의미한다.)

### Node Type

노드의 종류에 따라서 정해진 상수가 존재한다. 아래는 모든 노드의 종류와 종류에 따른 값을 출력하는 예제다.

```html
<script>
   for(let name in Node){
      console.log(name, Node[name]);
   }
</script>
```

결과

`ELEMENT_NODE 1`\
`ATTRIBUTE_NODE 2`\
`TEXT_NODE 3`\
`CDATA_SECTION_NODE 4`\
`ENTITY_REFERENCE_NODE 5`\
`ENTITY_NODE 6`\
`PROCESSING_INSTRUCTION_NODE 7`\
`COMMENT_NODE 8`\
`DOCUMENT_NODE 9`\
`DOCUMENT_TYPE_NODE 10`\
`DOCUMENT_FRAGMENT_NODE 11`\
`NOTATION_NODE 12`\
`DOCUMENT_POSITION_DISCONNECTED 1`\
`DOCUMENT_POSITION_PRECEDING 2`\
`DOCUMENT_POSITION_FOLLOWING 4`\
`DOCUMENT_POSITION_CONTAINS 8`\
`DOCUMENT_POSITION_CONTAINED_BY 16`\
`DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC 32`

> 아래 예제는 노드 종류 API를 이용해서 노드를 처리하는 예제다. \ <mark style="color:blue;">함수가 자기 자신을 호출하는 것</mark>을 **재귀함수**라고 하는데 본 예제는 재귀 함수의 예를 보여준다.

```html
<!DOCTYPE html>
<html>
<body id="start">
<ul>
    <li><a href="./532">html</a></li> 
    <li><a href="./533">css</a></li>
    <li><a href="./534">JavaScript</a>
        <ul>
            <li><a href="./535">JavaScript Core</a></li>
            <li><a href="./536">DOM</a></li>
            <li><a href="./537">BOM</a></li>
        </ul>
    </li>
</ul>
<script>
function traverse(target, callback){
    if(target.nodeType === 1){
        //if(target.nodeName === 'A')
        callback(target);
        let c = target.childNodes;
        for(let i=0; i<c.length; i++){
            traverse(c[i], callback);       
        }   
    }
}
traverse(document.getElementById('start'), function(elem){
    console.log(elem);
});
</script>
</body>
</html>
```
