문서 계통도(hierarchy)로부터 개체의 참조를 복사하여 컬렉션이나 개체를 반환한다.

인수/파라메터

bCloneChildren

선택적인 요소이며, 다음과 같은 부울을 지정한다.

false	디폴트이며, 복사된(Cloned) 개체는 childNodes를 포함하지 않는다.
true	복사된(Cloned) 개체는 childNodes를 갖는다.

반환값 objVal

새로이 생성된 노드의 참조하는 컬렉션이나 개체를 반환한다.

특기

cloneNode 메서드는 개체와 애트리뷰트들, 그리고 지정되어 있으면 자식 노드들(childNodes)를 복사한다.

복사(cloned) 개체의 인식자 id를 참조하는 컬렉션을 반환한다.

cloneNode 메서드는 IFRAME에서 직접적으로 작용하지 않는다. 아래 예제와 같이 IFRAME에서 cloneNode 메서드를 all 컬렉션을 통하여 호출하여야 한다.

클릭하여 복사한 iFrame 내역을 보라.

<IFRAME id="frameObjA" src="about:blank"
  style="border:solid 1px black; position:absolute; top:200px; left:660px; width:200px; height:100px;""></IFRAME>
<SCRIPT>
function doBegin(){
  var frameObjB=document.all.frameObjA.cloneNode();
  str='frameObjB.nodeName='+frameObjB.nodeName+'<BR>';
  str+='frameObjB.id='+frameObjB.id+'<BR>';
  str+='frameObjB.src='+frameObjB.src+'<BR>';
  str+='frameObjB.style.cssText=<FONT color=green size=-1>'+frameObjB.style.cssText+'</FONT><BR>';
  showA.innerHTML=str;
}
</SCRIPT>
<DIV id=showA onclick=doBegin()>클릭하여 복사한 iFrame 내역을 보라.</DIV>

이 메서드는 IE6부터 attribute 개체에 적용된다.

적용

개체	script	IE

참조

appendChild removeNode replaceNode swapNode

이 메서드는 (영문)DOM1(W3C Document Object Model Level 1)에서 정의되었다.

메서드 예제

<SCRIPT>
function fnClone(){
  var oCloneNode=oList.cloneNode(true);
  showB.insertBefore(oCloneNode);
  str='oList[0].id=<B>'+oList[0].id+'</B> oList[0].children.length=<B>'+oList[0].children.length+'</B><BR>';
  str+='oList[1].id=<B>'+oList[1].id+'</B> oList[1].children.length=<B>'+oList[1].children.length+'</B><BR>';
  str+='oCloneNode.nodeName='+oCloneNode.nodeName+'<BR>';
  str+='oCloneNode.length='+oCloneNode.children.length+'<BR>';
  for (i=0;i< oCloneNode.children.length;i++){
    str+='   '+i+'] '+oCloneNode.children[i].innerText+'<BR>';
  }
  showB.innerHTML=str;
  cloneButton.disabled=true;
}
</SCRIPT>
<UL id=oList>
<LI>목록 node 1
<LI>목록 node 2
<LI>목록 node 3
<LI>목록 node 4
</UL>
<INPUT id="cloneButton" type="button" value="Clone 목록" onclick="fnClone()">
<DIV id=showB></DIV>