재귀함수

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

노드 종류 API

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

Node.nodeType node의 타입을 의미한다.
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>

Previous자바스크립트역사 Next정규 표현식

Last updated 3 years ago

Was this helpful?

재귀함수

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

노드 종류 API

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

Node.nodeType node의 타입을 의미한다.

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>