웹 개발을 하다 보면 특정 부모 요소 아래에 있는 모든 자식 요소에 접근해서 스타일을 변경하거나 이벤트를 처리해야 하는 경우가 자주 발생합니다. JavaScript에서는 children 속성을 사용하면 부모 요소의 자식 요소들을 손쉽게 가져올 수 있습니다.
children 속성이란?
element.children은 해당 요소의 모든 자식 요소 노드(Element)만을 담고 있는 HTMLCollection을 반환합니다. 텍스트 노드나 주석은 포함되지 않으며, 오직 HTML 태그 요소만 선택됩니다.
HTMLCollection은 배열과 유사하지만 forEach 같은 배열 메서드를 직접 사용할 수 없기 때문에, Array.from()으로 실제 배열로 변환한 뒤 반복 처리하는 것이 일반적입니다.
예제 코드
아래는 버튼을 클릭하면 부모 요소(parent1)의 자식 요소들을 화면에 표시하는 전체 예제입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.child1,
.child2,
.child3 {
display: none;
margin: 10px;
width: 70px;
height: 70px;
}
.child1 {
background-color: red;
}
.child2 {
background-color: pink;
}
.child3 {
background-color: blue;
}
</style>
</head>
<body>
<h1>JavaScript로 부모 요소의 자식 요소 가져오기</h1>
<div class="parent1">
<div class="child1">Child 1</div>
<div class="child2">Child 2</div>
<div class="child3">Child 3</div>
</div>
<br />
<button class="Btn">CLICK HERE</button>
<h3>위 버튼을 클릭하면 parent1의 자식 요소들이 표시됩니다</h3>
<script>
let BtnEle = document.querySelector(".Btn");
let parentEle = document.querySelector(".parent1");
BtnEle.addEventListener("click", (event) => {
Array.from(parentEle.children).forEach((item) => {
item.style.display = "inline-block";
});
});
</script>
</body>
</html>코드 설명
이 예제의 핵심 동작 흐름은 다음과 같습니다.
1. 요소 선택 — document.querySelector()를 사용해 버튼(.Btn)과 부모 요소(.parent1)의 참조를 각각 변수에 저장합니다.
2. 클릭 이벤트 등록 — addEventListener("click", ...)으로 버튼 클릭 시 실행될 콜백 함수를 등록합니다.
3. 자식 요소 순회 — parentEle.children으로 자식 요소 목록을 가져온 후, Array.from()으로 배열로 변환하고 forEach()로 각 자식 요소의 display 스타일을 inline-block으로 변경해 화면에 표시합니다.
실행 결과
페이지를 처음 열면 세 개의 자식 요소(child1, child2, child3)가 display: none 설정 때문에 화면에 보이지 않습니다.
'CLICK HERE' 버튼을 클릭하면 −
부모 요소의 세 개 자식 요소가 빨간색, 분홍색, 파란색 사각형으로 화면에 나타나는 것을 확인할 수 있습니다.
참고: 다른 자식 요소 접근 방법
상황에 따라 아래와 같은 방법들도 유용하게 사용할 수 있습니다.
querySelectorAll() 사용 — CSS 선택자로 원하는 자식만 골라 가져올 수 있으며, NodeList는 기본적으로 forEach를 지원합니다.parentEle.querySelectorAll('.child')
firstElementChild / lastElementChild — 첫 번째 또는 마지막 자식 요소 하나만 필요할 때 사용합니다.
childNodes — 요소 노드뿐 아니라 텍스트 노드까지 모두 포함하므로, 순수한 요소만 다룰 때는 children이 더 적합합니다.