푸린세스

노드 종류 API 본문

카테고리 없음

노드 종류 API

푸곰주 2023. 5. 13. 11:36

노드 작업을 하게 되면 현재 선택된 노드가 어떤 타입인지를 판단해야 하는 경우가 있다. 이런 경우에 사용할 수 있는 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

아래 예제는 노드 종류 API를 이용해서 노드를 처리하는 예제다. 함수가 자기 자신을 호출하는 것을 재귀함수라고 하는데 본 예제는 재귀 함수의 예를 보여준다.

 

*재귀함수
:어떤 함수가 호출될때 자기자신을 호출하는 경우

재귀(self, 자기자신)

 

<!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);      
        }  
    }
}*/
//root element = target
//각각 element탐색할때마다, 순번에 해당하는 element를 사용자가 작성한 함수의 인자로 전달해야한다.
//2번째매개변수 = 함수, traverse함수 내부적으로 호출된다. == callback함수(인자로 넘겨지는 함수)

function traverse(target, callback){
//node의 타입을 체크한다. (text객체 제외하기위함)
    if(target.nodeType === Node.ELEMENT_NODE){
      
    callback(target); //body태그만 console에 출력되었다.
    //body태그 하위 element를 호출해야함 ==> 재귀
    var c = target.childNodes;
    for(var i=0; i<c.length; i++){
        //for문 하위노드들을 가져올수있다.
        //더이상 자식이 나오지않을때까지
        traverse(c[i], callback);
    }
   
}
}




traverse(document.getElementById('start'), function(elem){
    console.log(elem);
});     //2번째 매개변수-함수(익명함수)
</script>
</body>
</html>