Javascript Node 객체 - 노드 종류 API

노드 종류 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

함수가 자기 자신을 호출하는 하는 재귀함수와 노드 종류 API를 이용해서 노드를 처리하는 예제

<!DOCTYPE html>
<html>
<body id="jinseok">
<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('jinseok'), function(elem){
    console.log(elem);
});
</script>
</body>
</html>

traverse라는 이름을 가지고 있는 함수의 첫 번째 인자로 target 이름을 주었고, 두 번째 인자로 callback 이름을 주었다.
그리고 traverse의 이 두 개의 인자 변수에 document.getElementById('jinseok'), function(elem)을 각각 전해 주었다. 여기서 function(elem) 함수를 받은 traversse 함수의 두 번째 인자 callback은 함수 내부에서 traverse의 드번 째 인자인 자기 자신의 함수 function(elem)를 내부에서도 호출하게 하는 재귀함수를 쓰기 위함을 의미한다.
이렇게 볼 수 있다. callback=function(elem) 매개변수이다. 즉 함수 내부에서 callback(target);을 사용하여 target이 function(target)이 내부로 들어오게 된다. ※ 여기서 function(elem)은 전체 엘리먼트를 탐색하기 위함의 기능이다.
또 다른 의미로 표현하자면 document.getElementById('jinseok')을 담고 있으면서도 traverse의 자기 자신의 첫 번째 인자 함수인 target을 traverse 함수 자기 자신 내부로 불러낸 것으로도 볼 수 있다. 이 과정이 재귀함수이다.
다음으로 for문을 이용하기 위해 id값이 jinseok인 body을 품고있는 target 변수에 .childNodes을 해주어 body의 하위 자식들을 배열화해주고 c로 변수선언을 해주었다.
그리고 for문을 이용하여 body 자식들을 배열화한 것을 for문의 인수 조건대로 흝고 지나가게 하도록 for문의 반복되어 실행될 코드로 위의 선언된 재귀함수를 이용하여 traverse(c[i], callback)을 설정한다.
마지막으로 더 효율을 높이기 위하여 target 변수에 담겨있는 body안의 모든 node들 중 ELEMENT_NODE만 포함되게 하기 위해 if(target.nodeType === 1)을 설정해준다. 혹은 a태그만을 포함되게 하고 싶으면 if(target.nodeName === 'A')을 설정해 주면된다. 이를 설정해주면 body안의 모든 node(#text같이 눈에 보이지 않는 띄어쓰기 node 요소들 등등)을 포함하지 않아도 된다.

'프로그래밍 개발 > JS 웹' 카테고리의 다른 글

Javascript Node 객체 - 문자열로 노드 제어 (0)	2020.11.20
Javascript Node 객체 - 노드 변경 API (0)	2020.11.20
Javascript Node 객체 - 노드 관계 API (0)	2020.11.20
Javascript Node 객체 (0)	2020.11.20
javascript Element 객체 - jQuery 속성 제어 API (0)	2020.11.19