JavaScript/생활코딩

웹브라우저 자바스크립트 - 노드 종류 API

점미 2018. 11. 27. 17:00



노드 종류 API - https://opentutorials.org/course/1375/6700



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



NodeType

숫자를 통해서 어떠한 엘리먼트가 어떤 type의 노드인지 체크할 때 NodeType이라는 속성을 사용한다.



아래는 엘리먼트에 대한 노드숫자값이다.


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




NodeName

node의 이름 (태그명을 의미한다.), 노드타입보다 조금더 자세한 정보를 제공한다.

UL, TEXT, LI등등~~







재귀함수

어떠한 함수가 실행될 때 자기자신을 호출한다.

아래 예제는 재귀함수를 통해 문서의 태그들을 호출하는 예제이다.

-> 노드 타입을 이용하여 element노드만 호출하는 것은 이해되나 아직 함수부분은 이해가 잘 안됨

<!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);

});

</script>

</body>

</html>