HTML DOM Element children 속성

정의와 사용법

children 속성은 요소의 자식 요소 셋합을 반환합니다.

children 속성은 HTMLCollection 객체를 반환합니다.

추가로 참조하세요：

firstElementChild 속성

lastElementChild 속성

nextElementSibling 속성

previousElementSibling 속성

childElementCount 속성

childNodes 속성

HTML 노드와 요소

HTML HTML DOM（도메인 모델）에서, HTML 문서는 자식 노드를 가진(또는 가지지 않은) 노드 셋합입니다.

노드요소 노드, 텍스트 노드 및 주석 노드를 의미합니다.

요소끼리 간 공백도 텍스트 노드입니다.

그러나 요소는 단지 요소 노드일 뿐.

자식 노드와 자식 요소

childNodes 반환자식 노드（요소 노드, 텍스트 노드 및 주석 노드）。

children 반환자식 요소（텍스트와 주석 노드가 아닌）。

동양과 요소 동양

형제형제와 자매.

형제는 같은 부모 노드를 가진 노드(같은 childNodes 리스트에).

요소 형제는 같은 부모 요소를 가진 요소(같은 children 리스트에).

예제

예제 1

<body> 요소의 자식 요소의 집합을 가져옵니다：

const collection = document.body.children;

직접 시도해보세요

예제 2

"myDIV"에는 몇 개의 자식 요소가 있습니다：

let count = document.getElementById("myDIV").children.length;

직접 시도해보세요

예제 3

"myDIV"의 두 번째 자식 요소의 배경을 변경합니다：

const collection = document.getElementById("myDIV").children;
collection[1].style.backgroundColor = "yellow";

직접 시도해보세요

예제 4

<select> 요소의 세 번째 자식 요소(인덱스 2)의 텍스트를 가져옵니다：

const collection = document.getElementById("mySelect").children[2].text;

직접 시도해보세요

예제 5

<body>의 모든 자식 요소를 순회하며 배경을 변경합니다：

const collection = document.body.children;
for (let i = 0; i < collecton.length; i++) {
  collection[i].style.backgroundColor = "red";
}

직접 시도해보세요

문법

element.children

반환 값

타입 설명
대상

HTMLCollection 객체.

요소 노드의 집합.

요소는 문서에서 나타나는 순서로 정렬됩니다.

브라우저 지원

element.children DOM Level 1 (1998) 기능입니다.

모든 브라우저가 완벽하게 지원합니다：

크롬 IE 에지 파이어폭스 사파리 오페라
크롬 IE 에지 파이어폭스 사파리 오페라
지원 9-11 지원 지원 지원 지원