<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>