Node 종류 API
각 노드의 종류를 파악할 수 있는 프로퍼티
Node.nodeType
노드의 종류에 따라서 정해진 상수가 존재함. 그 상수값을 반환하는 프로퍼티가 Node.nodeType
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<div id="start">
<h2>Node.nodeType</h2>
</div>
<script>
var start = document.getElementById('start');
// ELEMENT_NODE 에 해당하는 상수 1을 반환
console.log(start.nodeType);
// id start 요쇼의 첫번째 자식은 줄바꿈 문자로 #text객체임
// TEXT_NODE 에 해당하는 상수 3을 반환
console.log(start.firstChild.nodeType);
// DOCUMENT_NODE 에 해당하는 상수 9를 반환
console.log(document.nodeType);
console.log('node 상수 전체 출력');
for(var name in Node) {
console.log(name, Node[name]);
}
</script>
</body>
</html>Node.nodeName
node의 이름(태그명을 의미)
상수로 노드타입을 다 기억하는것은 쉽지않기 때문에 이름도 같이 제공
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<div id="start">
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
<ul>
<li>D</li>
<li>
<ul>
<li>E</li>
<li><a href="#">F</a></li>
</ul>
</li>
<li><a href="#">G</a></li>
</ul>
</div>
<script>
function traverse(target, callback) {
// 엘리먼트노드인지 판별
if(target.nodeType === 1) {
callback(target);
// 태그명이 a 인지 판별
if(target.nodeName === 'A') {
target.style.backgroundColor = 'red';
}
var childrens = target.childNodes;
for(var i=0; i<childrens.length; i++) {
// 자식 요소들을 순회하며 반복
traverse(childrens[i], callback);
}
}
}
traverse(document.getElementById('start'), function callback(target) {
target.style.color = 'blue';
});
</script>
</body>
</html>Last updated
Was this helpful?