HTML DOM의 children 속성은 지정한 요소가 가진 모든 자식 요소(element)를 HTMLCollection 형태로 반환합니다. 이 속성은 읽기 전용(read-only)이며, 반환된 자식 요소들은 0부터 시작하는 인덱스 번호를 통해 접근할 수 있습니다.
반환되는 요소들은 HTML 문서에 작성된 순서 그대로 정렬됩니다. 특히 children 속성은 childNodes 속성과 달리 공백(whitespace)이나 주석(comment) 같은 텍스트 노드는 제외하고, 오직 요소 노드만 포함한다는 점이 핵심적인 차이입니다.
문법(Syntax)
children 속성의 기본 문법은 다음과 같습니다.
element.children
예제 코드
HTML DOM children 속성을 활용한 실제 예제를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid blue;
margin: 7px;
}
</style>
</head>
<body>
<p>아래 버튼을 클릭하면 div 요소의 자식 개수를 확인할 수 있습니다</p>
<button onclick="myChild()">COUNT</button>
<div id="DIV1">
<p>첫 번째 p 요소</p>
<p>두 번째 p 요소</p>
</div>
<p id="Sample"></p>
<script>
function myChild() {
var x = document.getElementById("DIV1").children.length;
document.getElementById("Sample").innerHTML = "div 요소는 "+x+"개의 자식 노드를 가지고 있습니다";
}
</script>
</body>
</html>출력 결과
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
COUNT 버튼을 클릭하면 아래와 같이 결과가 표시됩니다.
코드 상세 설명
위 예제의 동작 원리를 단계별로 살펴보겠습니다.
1. 스타일 및 마크업 구성
id가 "DIV1"인 <div> 요소를 생성하고, 그 안에 두 개의 <p> 단락을 넣었습니다. 다른 요소들과 시각적으로 구분하기 위해 파란색 테두리와 여백(margin)을 적용했습니다.
div {
border: 1px solid blue;
margin: 7px;
}
<div id="DIV1">
<p>첫 번째 p 요소</p>
<p>두 번째 p 요소</p>
</div>2. 버튼 클릭 이벤트 처리
사용자가 클릭하면 myChild() 함수를 실행하는 COUNT 버튼을 만들었습니다.
<button onclick="myChild()">COUNT</button>
3. myChild() 함수의 동작
myChild() 함수는 id가 "DIV1"인 요소, 즉 위 예제에서는 <div> 요소를 가져온 뒤, 해당 요소의 children.length 값을 변수 x에 할당합니다.
여기서 중요한 점은 children 속성은 공백과 주석을 고려하지 않는다는 것입니다. 따라서 두 개의 <p> 요소만 자식으로 인식하며, children.length는 2를 반환합니다. 최종적으로 이 값은 innerHTML 메서드를 통해 id가 "Sample"인 단락에 출력됩니다.
function myChild() {
var x = document.getElementById("DIV1").children.length;
document.getElementById("Sample").innerHTML = "div 요소는 "+x+"개의 자식 노드를 가지고 있습니다";
}정리
children 속성은 요소 노드만을 대상으로 하기 때문에, 불필요한 텍스트 노드까지 함께 반환하는 childNodes보다 실무에서 자식 요소를 다룰 때 훨씬 직관적이고 안전하게 사용할 수 있습니다. 자식 요소의 개수를 세거나 인덱스로 특정 요소에 접근해야 하는 경우 적극적으로 활용해 보시기 바랍니다.