HTML DOM 요소 자식
요소 개체예시
<body> 요소의 자식 컬렉션을 가져옵니다.
const collection = document.body.children;
아래에 더 많은 예가 있습니다.
정의 및 사용
속성 은 children
요소의 자식 요소 컬렉션을 반환합니다.
children
속성은 HTMLCollection 개체를 반환합니다 .
차이점
속성은 텍스트 노드와 주석 노드를 포함한 childNodes
모든 자식 노드 를 반환하는 반면 속성은 자식 요소children
만 반환합니다 .
또한보십시오:
HTML컬렉션
HTMLCollection 은 HTML 노드의 모음입니다 .
컬렉션의 노드는 인덱스 번호로 액세스할 수 있습니다. 인덱스는 0에서 시작합니다.
length 속성 은 컬렉션의 요소 수를 반환합니다.
통사론
element.children
반환 값
유형 | 설명 |
물체 | HTMLCollection 개체입니다. 요소 노드의 컬렉션입니다. 요소는 문서에 나타나는 대로 정렬됩니다. |
더 많은 예
<div> 요소에 몇 개의 자식이 있는지 알아보세요.
var c =
document.getElementById("myDIV").children.length;
<div> 요소의 두 번째 자식 요소의 배경색을 변경합니다.
var c = document.getElementById("myDIV").children;
c[1].style.backgroundColor = "yellow";
<select> 요소의 세 번째 자식 요소(인덱스 2)의 텍스트를 가져옵니다.
var c = document.getElementById("mySelect").children[2].text;
<body>의 모든 자식을 반복하고 배경색을 빨간색으로 변경합니다.
var c = document.body.children;
var i;
for (i = 0; i < c.length; i++) {
c[i].style.backgroundColor = "red";
}
관련 페이지
HTML DOM 참조: childNodes 속성
브라우저 지원
element.children
DOM 레벨 1(1998) 기능입니다.
모든 브라우저에서 완벽하게 지원됩니다.
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 9-11 | Yes | Yes | Yes | Yes |
요소 개체