# 재귀함수

## 재귀함수

**재귀함수는 함수 자신을 호출하는 프로그래밍 기법**이다

### 노드 종류 API

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

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

### Node Type

**노드의 종류에 따라서 정해진 상수가 존재**한다.

```
for(var name in Node){
   console.log(name, Node[name]); 
}
```

결과

```
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
```

```
<!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);
        var c = target.childNodes;
        for(var i=0; i<c.length; i++){
            traverse(c[i], callback);       
        }   
    }
}
traverse(document.getElementById('start'), function(elem){
    console.log(elem); 
    // body 태그를 포함한 모든 태그의 조회하면서 순번이 올때 마 두번째 익명함수를 호출하면서 
    익명함수를 호출하면서 현재 탐색하고 있는 순번의 element 를 첫번인자의 value로 도달하게 되면 
    콘솔로그로 출력하게 해준다. 
     elem.style.color = 'green'; // 모든태그의 글자색상 green으로 바뀜
      if(elem.nodeName === 'A' ) {
         elem.style.backgroundColor ="blue"; // 태그 a의 background 색상이 모두 바뀜 
      }
    });
</script>
</body>
</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){ //target -> body
    if(target.nodeType === 1){ // ELEMENT_NODE가 1이기때문에 ELEMENT_NODE인지 체크해줌
        //if(target.nodeName === 'A') // a태그만 출력되게 함 (현재는 주석처리)
        callback(target);
        var c = target.childNodes; //childNodes -> target 의 자식 element
        for(var i=0; i<c.length; i++){
            traverse(c[i], callback);
             // 자식노드가 없을때까지 for문이 실행되기때문에 모든 노드의 자식노드가 출력된다.     
        }   
    }
}
traverse(document.getElementById('start'), function(elem){
    console.log(elem); // body의 자식 element를 다 불러냄 
});
</script>
</body>
</html>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://leeboa.gitbook.io/study/undefined-13/undefined-12.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
