더 "Try it Yourself" 아래의 예.
정의 및 사용
아이들 속성은 HTMLCollection 객체로, 요소의 자식 요소의 컬렉션을 반환합니다.
그들은 소스 코드에 나타나는 인덱스 번호로 액세스 할 수있는 컬렉션의 요소가 분류되어 있습니다. 인덱스는 0에서 시작한다.
팁 : 당신은 모든 아이들을 반복하고 원하는 정보를 추출 할 수 있습니다, 아이 요소의 수를 결정하기 위해 HTMLCollection 객체의 길이 속성을 사용할 수 있습니다.
이 속성과의 차이 childNodes에이 아이는 요소 노드를 포함하면서, childNodes에 텍스트 노드 및 주석 노드를 포함한 모든 노드를 포함하고 있다는 점이다.
브라우저 지원
테이블의 숫자는 완전히 속성을 지원하는 최초의 브라우저 버전을 지정합니다.
| 재산 | |||||
|---|---|---|---|---|---|
| children | 2.0 | 9.0 * | 3.5 | 4.0 | 10.0 |
* 참고 : 어린이 속성은 완전히 IE8에 IE6 지원됩니다. 그러나 이러한 버전에서,이 요소 노드 및 주석 노드를 반환합니다. IE9 +는 요소 노드를 반환합니다.
통사론
element .children기술적 세부 사항
| 반환 값 : | 요소 노드의 컬렉션을 대표하는 라이브 HTMLCollection 객체. 그들은 소스 코드에 나타나는 반환 된 컬렉션의 요소는 분류되어 있습니다 |
|---|---|
| DOM 버전 | 코어 레벨 1 요소 개체 |
더 예
예
얼마나 많은 아이들이 찾아 <div> 요소가있다 :
var c =
document.getElementById("myDIV").children.length;C의 결과는 다음과 같습니다
2 »그것을 자신을 시도 예
a의 두 번째 자식 요소의 배경 색상 변경 <div> 요소를 :
var c = document.getElementById("myDIV").children;
c[1].style.backgroundColor = "yellow"; »그것을 자신을 시도 예
세 번째 자식 요소의 텍스트를 가져옵니다 (index 2) (A)의 <select> 요소 :
var c = document.getElementById("mySelect").children[2].text;C의 결과는 다음과 같습니다
Saab »그것을 자신을 시도 예
모든 아이들을 통해 루프 <body> 과 빨간색으로 자신의 배경색을 변경 :
var c = document.body.children;
var i;
for (i = 0; i < c.length; i++)
{
c[i].style.backgroundColor = "red";
} »그것을 자신을 시도 관련 페이지
HTML DOM 참조 : childNodes Property