HTML DOM의 childNodes 속성은 특정 노드의 자식 노드들을 NodeList 객체 형태의 컬렉션으로 반환합니다. 반환된 노드들은 HTML 문서에 나타나는 순서 그대로 정렬되어 있으며, 0부터 시작하는 인덱스 번호를 통해 각 노드에 접근할 수 있습니다.
이 속성은 읽기 전용(read-only)이라는 점, 그리고 공백(whitespace)과 주석(comment)도 하나의 노드로 간주된다는 점을 반드시 기억해야 합니다. 실무에서 자식 노드 개수를 셀 때 의외의 결과가 나오는 대표적인 이유가 바로 이 공백 노드 때문입니다.
구문(Syntax)
childNodes 속성의 기본 구문은 다음과 같습니다.
elementNodeReference.childNodes;
예제(Example)
HTML DOM childNodes 속성의 동작을 확인할 수 있는 예제를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid blue;
margin: 7px;
}
</style>
</head>
<body>
<p>아래 버튼을 클릭하면 div 요소의 자식 노드를 확인할 수 있습니다.</p>
<button onclick="countNodes()">COUNT</button>
<div id="DIV1">
<p>첫 번째 p 요소 </p>
<p>두 번째 p 요소</p>
</div>
<p id="Sample"></p>
<script>
function countNodes() {
var x = document.getElementById("DIV1").childNodes.length;
document.getElementById("Sample").innerHTML = "div 요소에는 "+x+"개의 자식 노드가 있습니다";
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
COUNT 버튼을 클릭하면 아래와 같이 자식 노드의 개수가 표시됩니다.
예제 상세 설명
위 예제의 동작 과정을 단계별로 살펴보겠습니다.
1. div 요소 생성 및 스타일 적용
id가 "DIV1"인 <div> 요소를 만들고 그 안에 두 개의 <p> 요소를 배치했습니다. 다른 요소들과 시각적으로 구분하기 위해 파란색 테두리와 마진을 적용했습니다.
여기서 중요한 포인트는, 각 요소를 서로 다른 줄에 작성하기 위해 엔터 키를 세 번 눌렀고, 이로 인해 <div> 태그 내부에 총 세 개의 공백(whitespace) 노드가 생성되었다는 사실입니다.
div {
border: 1px solid blue;
margin: 7px;
}
<div id="DIV1">
<p>첫 번째 p 요소 </p>
<p>두 번째 p 요소</p>
</div>2. 버튼 생성 및 이벤트 연결
사용자가 클릭하면 countNodes() 함수를 실행하는 COUNT 버튼을 만들었습니다.
<button onclick="countNodes()">COUNT</button>
3. 자식 노드 개수 계산 및 출력
countNodes() 함수는 id가 "DIV1"인 요소, 즉 <div> 요소를 가져온 뒤 해당 요소의 childNodes.length 속성 값을 변수 x에 할당합니다.
<div> 태그 내부에는 공백 노드 세 개와 <p> 요소 두 개가 존재하므로, childNodes.length는 5를 반환합니다. 최종적으로 반환된 값은 innerHTML() 메서드를 통해 id가 "Sample"인 단락에 출력됩니다.
function countNodes() {
var x = document.getElementById("DIV1").childNodes.length;
document.getElementById("Sample").innerHTML = "div 요소에는 "+x+"개의 자식 노드가 있습니다";
}