728x90
반응형
해당 포스팅은 생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅임을 미리 알립니다.
자바스크립트 기본 문법 :: 노드 종류 API
저번 포스팅에서는 Node 객체가 무엇인지,
노드 객체에서 관계와 관련있는 API는 어떤 것이 있는지 알아봤었습니다.
이번 포스팅은 Node 종류 API 를 알아보도록 하겠습니다.
노드 작업을 하게 되면 현재 선택된 노드가 어떤 타입인지를 판단해야 하는 경우가 있습니다.
이런 경우에 사용할 수 있는 API가 nodeType, nodeName입니다.
- Node.nodeType
node의 타입을 의미합니다. - Node.nodeName
node의 이름 (태그명을 의미합니다.)
Node Type
노드의 종류에 따라서 정해진 상수가 존재합니다.
아래는 모든 노드의 종류와 종류에 따른 값을 출력하는 예제입니다.
for(var name in Node){
console.log(name, Node[name]);
}
실행 결과는 아래 사진과 같습니다.
`아래 예제는 노드 종류 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);
});
</script>
</body>
</html>
위 코드를 실행시키면 아래와 같은 실행결과가 출력됩니다.
만약 17행 부터 시작하는 if 문이 없다면, text가 출력될 겁니다.
if문 안의 조건인 target.nodeType === 1 은
Element node 일 때 를 의미합니다.
따라서 text node 일때는 출력되지 않겠죠.
728x90
반응형