-
웹브라우저 자바스크립트 - 노드 종류 APIJavaScript/생활코딩 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>
'JavaScript > 생활코딩' 카테고리의 다른 글
웹브라우저 자바스크립트 - 문자열로 노드 제어 (0) 2018.11.28 웹브라우저 자바스크립트 - 노드 변경 API (0) 2018.11.28 웹브라우저 자바스크립트 - Node 관계 API (0) 2018.11.27 웹브라우저 자바스크립트 - Node 객체 (0) 2018.11.27 웹브라우저 자바스크립트 - 속성 API (0) 2018.11.27 댓글