지정된 개체의 직접적인 자식개체인 HTML Elements와 TextNode 개체들의 컬렉션을 반환한다.

인수
: (개체)
필수적인 요소이고 컬렉션을 포함하는 모체 개체이다.

cVal : (컬렉션)
선택적인 요소이고 값은 컬렉션을 나타내는 개체이다.
지정된 개체의 직접 자식 개체들로 구성된다.

oVal : (개체)
선택적인 요소이고 값은 컬렉션의 한개의 엘레멘트 개체이다.

index : (정수)
필수적인 요소이고 값은 컬렉션의 인수로 한개의 엘레멘트 개체를 참조할 수 있고 배열변수의 규칙에따라 0부터 시작하고 제일 마지막 인수는 길이보다 1 작다.

특기
IE6 부터 attribute 개체에도 적용된다.

childNodes 컬렉션은 HTML 엘레멘트들과 TextNode 개체들을 포함할 수 있다.

표준 HTML을 통하여 생성된 엘레멘트들의 childNodes 컬렉션을 점검해 보면 br과 같은 기대하지 않은 개체에서 TextNode 개체들을 볼 수 있다. 한편 DOM을 통하여 엘레멘트를 생성하면 Explorer는 이질적인 TextNode 개체들을 생성하지 않는다.

적용
개체scriptHTML규격IE
참조

이 컬렉션은 (영문)DOM Level 1(W3C Document Object Model)에 정의되었다.


설명을 위한 예제

예제 DIV

length 속성 IE
⇒ 컬렉션의 길이를 반환하거나 지정한다.
문법: [iVal=].length
코드: document.write(oObj.length); 결과:
코드: for (i=0;i< oObj.length;i++){ document.write(oObj[i].nodeName+', ')}; 결과:
코드: document.write(oObj[4].childNodes[0].childNodes[0].childNodes[0].nodeName); 결과:

item 메서드 IE
⇒ 인덱스로 children이나 컬렉션의 한개의 개체를 반환한다.
문법: [oVal=].item('iVal')
코드: document.write(oObj.item(1).nodeName 결과:
urns 메서드 IE
⇒ behavior가 첨부된 모든 개체의 컬렉션을 반환한다.
문법: [oVal=].urns('sVal')
코드: document.write(Sample.behaviorUrns.length) 결과:
코드: document.write(document.all.namedItem('Sample').children.urns('../public/hilite.htc')) 결과:

createElement, insertBefore 메서드를 이용한 개체를 생성하고 삽입하는 컬렉션 예제

  1. span1 문자열
  2. span2 문자열
  3. span3 문자열
결과 표시창
<OL id=testOl style="border:solid 1 blue"><LI>span1 문자열 <LI>span2 문자열 <LI>span3 문자열</OL>
<SCRIPT>
str='';
allColl=document.all.tags('ol');
testObj=allColl.item('testOl');
sObj=testObj.childNodes;
str+='sObj.length='+sObj.length+'<BR>';
for (i=0;i< sObj.length;i++){
  str+='sObj['+i+'].nodeName='+sObj[i].nodeName+' '+sObj[i].innerText+'<BR>';
}
str+='<BR>';
str+='<BUTTON onclick=doInsert()>엘레멘트 삽입</BUTTON>';
document.write(str);

function doInsert(){
  if (sObj.length>5) return;
  str='';
  newObj1=document.createElement('<LI>');
  newObj1.innerText='생성된 개체 문자열 '+i;
  testObj.insertBefore(newObj1);
  sObj=testObj.childNodes;
  str+='sObj.length='+sObj.length+'<BR>';
  for (i=0;i< sObj.length;i++){
    str+='sObj['+i+'].nodeName='+sObj[i].nodeName+' '+sObj[i].innerText+'<BR>';
  }
  showA.innerHTML=str;
}
</SCRIPT>
<DIV id=showA>결과 표시창</DIV>