DHTML 개체들의 직접 후손인 자식 개체들의 컬렉션을 반환한다.

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

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

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

index : (정수/문자열)
필수적인 요소이고 값은 컬렉션의 인수나 문자열로 한개의 엘레멘트 개체나 다른 컬렉션을 참조할수 있고 배열변수의 규칙에따라 0부터 시작하고 제일 마지막 인수는 길이보다 1 작다. 같은 name이나 id 속성을 가진 개체들이 있는 경우에는 컬렉션을 반환한다.

subIndex : (문자열)
선택적인 요소이고 값은 컬렉션의 반환받고저 하는 개체의 위치를 지정하며 name이나 id 속성값을 지정하는 문자열이다. 일치하는 개체나 컬렉션을 반환한다.

특기

all 컬렉션과 유사하며 개체의 자식 개체들을 반환하고 children 개체들은 엘레멘트들을 포함할 수 있다.

적용
개체scriptHTML규격IE

설명을 위한 예제

하이라이트 DIV

length 속성 IE
⇒ 컬렉션의 길이를 반환하거나 지정한다.
문법: [iVal=].length
코드: document.write(oObj.length); 결과:

item 메서드 IE
⇒ 인덱스로 childNodes이나 컬렉션의 한개의 개체를 반환한다.
문법: [oVal=].item('iVal')
코드: document.write(oObj.item(1).nodeName 결과:
tags 메서드 IE
컬렉션에서 HTML 엘레멘트 이름 문자열과 일치하는 엘레멘트들의 컬렉션이나 한개의 엘레맨트 개체를 반환한다.
문법: [oVal=].tags('sVal')
코드: document.write(oObj.tags('table').length) 결과:
urns 메서드 IE
behavior가 첨부된 모든 개체의 컬렉션을 반환한다.
문법: [oVal=].urns('sVal')
코드: document.write(document.all.namedItem('sampleTags').children[0].className) 결과:

javascript를 이용한 컬렉션 예제

모체 DIV (ID: parentObj)
텍스트 입력 개체 :

DIV 속의 문단 개체

자식 속의 자식 SPAN

index자식 개체id모체 개체개체 내용
<SCRIPT>
var childrenColl,rowsColl,cellsColl; //자식, 줄, 칸 개체들의 선언
function getCollections(){
  childrenColl=parentObj.children; // 모체의 자식들 컬렉션을 얻는다.
  getChildren(childrenColl,parentObj); // 개체의 자식개체를 얻는 기능함수를 호출한다.
  childrenColl=childObj.children;
  getChildren(childrenColl,childObj);
}

function getChildren(childrenColl,childrenCollection){
  for(idx=0;idx< childrenColl.length;idx++){
    rowsColl=tableObj.insertRow(); // 새로운 줄을 만듬.
    cellsColl=rowsColl.insertCell(); // 새로운 칸을 만듬.
    cellsColl.align='center';
    cellsColl.style.color='green';

    cellsColl.innerText=idx; // 자식의 태그이름이 들어가는 칸을 만든다.
    cellsColl=rowsColl.insertCell();
    cellsColl.align='center';

    cellsColl.innerText=childrenCollection.children.item(idx).tagName; // id나 name이 들어가는 칸을 만든다.
    cellsColl=rowsColl.insertCell();
    cellsColl.align='center';
    if(childrenCollection.children.item(idx).name!=null){
      cellsColl.innerText=childrenCollection.children.item(idx).name;
    }else{
      cellsColl.innerText=childrenCollection.children.item(idx).id;
    }

    cellsColl=rowsColl.insertCell(); // 모체 개체의 id가 들어가는 칸을 만든다.
    cellsColl.align='center';
    cellsColl.innerText=childrenCollection.id;

    cellsColl=rowsColl.insertCell(); // 개체의 내용이 들어가는 칸을 만든다.
    cellsColl.align='center';
    if (childrenCollection.children.item(idx).type=='text') cellsColl.innerText=childrenCollection.children.item(idx).value;
    else cellsColl.innerText=childrenCollection.children.item(idx).innerText;
  }
}
</SCRIPT>

<DIV id="parentObj" style="border:solid 1 red;text-align:center"><SPAN id=spanObj>모체 DIV (ID: parentObj)</SPAN><BR id="brObj">
텍스트 입력 개체 : <INPUT type="text" name="textObj" value="입력 문장" size="8" contenteditable="false">
<DIV id="childObj"><P id="paraObj">DIV 속의 문단 개체</P><SPAN id=span1Obj>자식 속의 자식 SPAN</SPAN></DIV>
<BUTTON name="buttonObj" onclick="alert('단추를 클릭했다');">단추 개체</BUTTON>
<HR id="hrObj">
<BUTTON name="button2Obj" onclick="getCollections();this.disabled=true;" style="cursor:hand">컬렉션 얻기 단추</BUTTON>
</DIV>
<TABLE id="tableObj" border="1" width="600" alt="자식 목록 결과">
<TR><TH>index</TH><TH>자식 개체</TH><TH>id</TH><TH>모체 개체</TH><TH>개체 내용</TH></TR>
</TABLE>