노드 작업을 하게 되면 현재 선택된 노드가 어떤 타입인지를 판단해야 하는 경우가 있다. 이런 경우에 사용할 수 있는 API가 nodeType, nodeName이다.
- Node.nodeType
node의 타입을 의미한다. - Node.nodeName
node의 이름 (태그명을 의미한다.)
Node Type
노드의 종류에 따라서 정해진 상수가 존재한다. 아래는 모든 노드의 종류와 종류에 따른 값을 출력하는 예제다.
1 2 3 | for(var name in Node){ console.log(name, Node[name]);} |
결과
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | 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를 이용해서 노드를 처리하는 예제다. 함수가 자기 자신을 호출하는 것을 재귀함수라고 하는데 본 예제는 재귀 함수의 예를 보여준다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <!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> |
