자바스크립트 children 속성 – 자식 요소 목록 찾기

`Element.children` 사용법

children 속성은
현재 요소의 모든 자식 요소를 HTMLCollection 객체로 반환합니다.
자식 요소가 없으면 빈 HTMLCollection 객체를 반환합니다.

HTMLCollection은
웹 페이지의 HTML 문서 내에서 선택한 요소만을 문서 내 정렬된 순서대로 모아둔 집합입니다.
흔히 DOM 컬렉션이라 말하는 이 집합은 요소를 배열의 항목처럼 유사하게 다룰 수 있으며, 웹 페이지의 요소를 쉽게 조작할 수 있게 하는 객체입니다.

자바스크립트 HTMLCollection

HTMLCollection은 유사 배열 객체이면서, for...of 문으로 순회 가능한 이터러블(iterable) 객체입니다.
그리고, DOM의 변경 사항을 실시간(또는 live)으로 반영하는 객체입니다.
length 속성으로 유사 배열 객체인 HTMLCollection의 길이를 반환할 수 있습니다.

children 속성은 특정 요소의 자식 요소를 찾을 때 유용하게 사용할 수 있습니다.

JavaScript

const fruitList = document.getElementById("fruits");
const childElements = fruitList.children;

/* HTMLCollection 객체(유사 배열)로 반환 */
console.log(childElements); // HTMLCollection(3) [li, li, li]

/* length 속성으로 길이를 반환 */
console.log(childElements.length); // 3

/* 인덱싱으로 자식 요소 객체에 접근 가능 */
console.log(childElements[0]); // <li>...</li>

/*
 *  반복문으로 자식 요소 순회
*/

/*  방법 1 - for...of 문 적용 */
for (const childElement of childElements) {
    console.log(childElement.textContent); // "사과" "바나나" "복숭아"
}

/*  방법 2 - for 문 적용 */
for (let i = 0; i < childElements.length; i++) { // length 속성 사용
    console.log(childElements[i].textContent);
}

/* 방법 3_1 - forEach() 함수 적용 */
const arr = [...childElements]; // 스프레드 문법으로 배열 개체를 만듦
arr.forEach(li => {
    console.log(li.textContent); // "사과" "바나나" "복숭아"
});

/* 방법 3_2 - forEach() 함수 적용 */
const childElementsArray = Array.from(childElements); // Array.from() 메서드로 배열 개체를 만듦
childElementsArray.forEach(li => {
    console.log(li.textContent); // "사과" "바나나" "복숭아"
});

children 속성이 반환하는 HTMLCollection은 배열이 아니기 때문에 forEach() 함수를 바로 사용할 수 없습니다. HTMLCollection은 배열과 유사하지만, 실제 배열이 아니므로 배열 메서드를 지원하지 않습니다. 하지만, Array.from() 또는 스프레드(...) 문법을 사용해 배열로 변환하면 forEach()를 사용할 수 있습니다.

코드 부연설명
forEach() 함수는 배열을 순회해서 각 요소를 콜백 함수로 처리하기 위한 함수입니다.

코드 부연설명
getElementById() 함수는 HTML 문서 내에서 주어진 문자열과 값이 일치하는 id 속성을 가진 요소 객체를 반환합니다.

코드 부연설명
for 문은 특정 횟수나 범위만큼 반복하는 문입니다.

코드 부연설명
textContent 속성은 HTML 요소의 텍스트 콘텐츠를 가져오거나 설정합니다.

구문

element는 자식 요소를 확인할 부모 DOM 요소입니다.

반환 값

현재 요소의 모든 자식 요소를 HTMLCollection 객체로 반환합니다.
자식 요소가 없으면 빈 HTMLCollection 객체를 반환합니다. 즉, length 값이 0인 빈 목록입니다.

주요 특징

children 속성은 읽기 전용입니다.
children 속성은 요소 노드만 반환하며, 텍스트나 주석 노드는 포함되지 않습니다.

노드
HTML DOM은 노드의 집합체입니다.
HTML에서 말하는 요소는 "요소 노드"를 의미하며,
텍스트는 "텍스트 노드",
주석은 "주석 노드"라고 말합니다.
요소는 오직 "요소 노드"만을 의미합니다.

간단한 활용 예제

다음은 children 속성을 활용한 다양한 실용적인 예제들입니다.

특정 자식 요소 스타일 변경

children 속성을 사용하여 특정 자식 요소의 스타일을 변경하는 예제입니다.

HTML

<ul id="fruits">
    <li>사과</li>
    <li>바나나</li>
    <li>복숭아</li>
</ul>
<button type="button">첫 번째 자식 요소 글자 색상 변경</button>

JavaScript

const fruitList = document.getElementById("fruits");
const childElements = fruitList.children;
const button = document.querySelector("button");

button.addEventListener("click", () => { // 버튼 클릭 이벤트
    // 첫 번째 자식 요소의 텍스트 색상을 빨간색으로 변경
    childElements[0].style.color = "red";
});

코드 부연설명
querySelector() 함수는 지정한 CSS 선택자와 일치하는 첫 번째 요소 객체를 반환합니다.

짝수 번째 자식 요소에 클래스 추가

children 속성을 사용하여 짝수 번째 자식 요소에 HTML 클래스를 추가하는 예제입니다.

HTML

<style>
    .highlight {
        background-color: gold;
    }
</style>
<ul id="fruits">
    <li>사과</li>
    <li>바나나</li>
    <li>복숭아</li>
</ul>
<button type="button">짝수 번째 자식 요소에 클래스 추가</button>

JavaScript

const fruitList = document.getElementById("fruits");
const childElements = fruitList.children;
const button = document.querySelector("button");

button.addEventListener("click", () => { // 버튼 클릭 이벤트
    // 짝수 번째 자식 요소에 클래스 "highlight" 추가
    for (let i = 0; i < childElements.length; i++) {
        if (i % 2 === 0) { // 짝수 번째 인덱스 (0, 2, ...)
            childElements[i].classList.add("highlight");
        }
    }
});

코드 부연설명
querySelector() 함수는 지정한 CSS 선택자와 일치하는 첫 번째 요소 객체를 반환합니다.

코드 부연설명
classList.add() 함수는 DOM 요소에 주어진 클래스 속성 값을 추가합니다.