Element.children
사용법
children
속성은
현재 요소의 모든 자식 요소를 HTMLCollection
객체로 반환합니다.
자식 요소가 없으면 빈 HTMLCollection
객체를 반환합니다.
HTMLCollection
은
웹 페이지의 HTML 문서 내에서 선택한 요소만을 문서 내 정렬된 순서대로 모아둔 집합입니다.
흔히 DOM 컬렉션이라 말하는 이 집합은 요소를 배열의 항목처럼 유사하게 다룰 수 있으며, 웹 페이지의 요소를 쉽게 조작할 수 있게 하는 객체입니다.
children
속성은 특정 요소의 자식 요소를 찾을 때 유용하게 사용할 수 있습니다.
children
속성이 반환하는 HTMLCollection
은 배열이 아니기 때문에 forEach()
함수를 바로 사용할 수 없습니다. HTMLCollection
은 배열과 유사하지만, 실제 배열이 아니므로 배열 메서드를 지원하지 않습니다. 하지만, Array.from()
또는 스프레드(...) 문법
을 사용해 배열로 변환하면 forEach()
를 사용할 수 있습니다.
코드 부연설명
forEach()
함수는 배열을 순회해서 각 요소를 콜백 함수로 처리하기 위한 함수입니다.
코드 부연설명
for
문은 특정 횟수나 범위만큼 반복하는 문입니다.
코드 부연설명
textContent
속성은 HTML 요소의 텍스트 콘텐츠를 가져오거나 설정합니다.
구문
element
는 자식 요소를 확인할 부모 DOM 요소입니다.
반환 값
- 현재 요소의 모든 자식 요소를
HTMLCollection
객체로 반환합니다. - 자식 요소가 없으면 빈
HTMLCollection
객체를 반환합니다. 즉,length
값이0
인 빈 목록입니다.
주요 특징
children
속성은 읽기 전용입니다.children
속성은 요소 노드만 반환하며, 텍스트나 주석 노드는 포함되지 않습니다.
노드
HTML DOM은 노드의 집합체입니다.
HTML에서 말하는 요소는 "요소 노드"를 의미하며,
텍스트는 "텍스트 노드",
주석은 "주석 노드"라고 말합니다.
요소는 오직 "요소 노드"만을 의미합니다.
간단한 활용 예제
다음은 children
속성을 활용한 다양한 실용적인 예제들입니다.
특정 자식 요소 스타일 변경
children
속성을 사용하여 특정 자식 요소의 스타일을 변경하는 예제입니다.
코드 부연설명
querySelector()
함수는 지정한 CSS 선택자와 일치하는 첫 번째 요소 객체를 반환합니다.
- 사과
- 바나나
- 복숭아
짝수 번째 자식 요소에 클래스 추가
children
속성을 사용하여 짝수 번째 자식 요소에 HTML 클래스를 추가하는 예제입니다.
코드 부연설명
querySelector()
함수는 지정한 CSS 선택자와 일치하는 첫 번째 요소 객체를 반환합니다.
코드 부연설명
classList.add()
함수는 DOM 요소에 주어진 클래스 속성 값을 추가합니다.
- 사과
- 바나나
- 복숭아
브라우저 호환성
속성 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
---|---|---|---|---|
children
|
1 | 12 | 3.5 | 4 |
명세서
명세서 사양 | |
---|---|
children
|
DOM Standard #ref-for-dom-parentnode-children① |