FEDev Story

Node 객체 - 노드 종류 API 본문

Javascript/DOM

Node 객체 - 노드 종류 API

지구별72 2017. 2. 11. 23:20

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

  • Node.nodeType
    node의 타입을 의미한다. 
  • Node.nodeName
    node의 이름 (태그명을 의미한다.)

nodeType

노드의 종류에 따라서 정해진 상수가 존재한다. 아래는 모든 노드의 종류와 종류에 따른 값을 출력하는 예제다.

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

nodeName

현재 선택된 노드객체의 노드 이름이다. 태그명과 일치한다.

<a href="#" id="link">Text</a>
var target = document.getElementById('link');
console.log(target.nodeName);    // 'A'

 아래 예제는 노드 종류 API를 이용해서 노드를 처리하는 예제다. 함수가 자기 자신을 호출하는 것을 재귀함수라고 하는데 본 예제는 재귀 함수의 예를 보여준다. 
<!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.nodeName);
});
</script>
</body>
</html>

위의 코드를 실행하면 아래와 같이 현재 문서의 엘리먼트의 nodeName을 순서대로 출력한다.
traverse 함수는 'start' 라는 id를 갖는 노드객체를 파라미터로 받아 nodeName을 출력하고 childNodes를 이용하여 모든 자식 노드객체를 유사배열로 저장한 후 for구문을 이용하여 traverse함수를 재귀적으로 호출하고 있다. 이때 개행문자(#text 노드)를 제외한 엘리먼트만 출력하기 위해 target.nodeType === 1을 이용하였다. 또는 'A' 태그만 출력하기 위해 target.nodeName === 'A'와 같이 nodeName을 이용할 수 있다.

BODY
UL
LI
A
LI
A
LI
A
UL
LI
A
LI
A
LI
A
SCRIPT


'Javascript > DOM' 카테고리의 다른 글

Node 객체 - 문자열로 노드 제어  (0) 2017.02.12
Node 객체 - 노드 변경 API  (0) 2017.02.12
Node 관계 API  (0) 2017.02.11
Node 객체  (0) 2017.02.11
Element 객체 - 속성 API  (0) 2017.02.10
'Javascript/DOM' Related Articles more
Comments