HTML DOM children 속성

HTML DOM Element 객체

children자식 속성은 활성 HTMLCollection을 반환하며, 지정된 부모 요소의 모든 자식 요소를 포함합니다.

집합의 요소는 원본 코드에서 나타난 순서로 정렬됩니다.

집합의 각 자식 요소에 대해 인덱스 번호를 사용하여 접근할 수 있습니다. 인덱스는 0에서 시작합니다.

length 속성을 사용하여 자식 요소의 수를 결정하고, 그런 다음 모든 자식 요소를 순회할 수 있습니다.

주의:부모 요소가 자식 요소를 가지지 않으면, 자식 요소는 길이가 0인 비어 있는 목록입니다.

이 속성은childNodes차이점은 childNodes가 모든 노드를 포함하고 있으며, 텍스트 노드와 주석 노드도 포함하고 있지만, 자식 노드는 단지 요소 노드만 포함한다는 점입니다.

문법:

ParentElement.children

var list = document.body.children;

브라우저 호환성

표에서의 숫자는 children 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다:

기술 세부 사항

更多实例

DIV 요소의 자식 요소의 수를 찾다:

var len = document.querySelector("div").children.length;

DIV 요소의 두 번째 자식 요소(인덱스1）의 배경색을 변경하다:

var parent = document.querySelector("div");
var list = parent.children;
list[1].style.backgroundColor = "coral";

DIV 요소의 첫 번째 자식 요소(인덱스 0)의 텍스트를 변경하다:

var parent = document.querySelector("div");
var list = parent.children;
list[0].innerHTML = "HELLO WORLD";

HTML DOM Element 객체