자바스크립트 cloneNode() 함수 – 요소 복제

`Node.cloneNode()` 사용법

cloneNode() 함수는
동일 문서 내에서 호출한 DOM 노드를 복사하여 복제본을 반환합니다.
매개변수로 해당 노드만 복제할지, 아니면 자손 노드까지 복제할지 설정할 수 있습니다.

이때, 해당하는 노드의 모든 속성과 그 값도 복제합니다.

노드
HTML DOM은 노드의 집합체입니다.
HTML에서 말하는 요소는 "요소 노드"를 의미하며,
텍스트는 "텍스트 노드",
주석은 "주석 노드"라고 말합니다.
요소는 오직 "요소 노드"만을 의미합니다.

cloneNode() 함수는 문서 내의 특정 요소를 복제하는데 많이 활용됩니다.

예시

JavaScript

/*
 * 원본 노드
*/
const original = document.getElementById("original-element");


/*
 * 얕은 복제(자손 노드 없이 복제)
 * 자신만 복제(노드의 모든 속성과 그 값도 복제)
*/
const shallowClone = original.cloneNode();

// 자손 노드 제외한 자신 노드 객체를 반환
console.log(shallowClone);
/* 출력:
<div id="original-element"></div>
*/


/*
 * 깊은 복제(자손 노드 포함 복제)
 * 자손 노드 포함하여 복제(노드의 모든 속성과 그 값도 복제)
*/
const deepClone = original.cloneNode(true);

// 자손 노드 포함한 자신 노드 객체를 반환
console.log(deepClone);
/* 출력:
<div id="original-element">
    <div id="first">First</div>
    <div id="second">Second</div>
</div>
*/

코드 부연설명
getElementById() 함수는 HTML 문서 내에서 주어진 문자열과 값이 일치하는 id 속성을 가진 요소 객체를 반환합니다.

구문

node는 복제하려는 노드 객체입니다.

매개변수

cloneNode() 함수의 매개변수
`deep`	옵션, 기본값은 `false`입니다. `false`일 경우 원본 노드만 복제하고 자손 노드는 복제되지 않습니다(얕은 복제). `true`일 경우 원본 노드와 그 자손 노드까지 모두 복제됩니다(깊은 복제). 하위 콘텐츠를 가질 수 없는 빈 요소(Void element, 예를 들어 `<img>`나 `<input>` 등)는 영향을 미치지 않습니다.

사용법 참고사항

cloneNode() 함수는 동일 문서 내에서 호출한 DOM 노드를 복사하여 복제본을 반환합니다.
하지만, 자바스크립트로 할당된 이벤트 리스너와 <canvas> 요소의 콘텐츠(그려진 이미지나 그래픽)는 복사되지 않습니다.

속성과 값의 복사

cloneNode() 를 사용하면 노드의 모든 속성과 그 값을 복사합니다. 여기에는 인라인 스타일이나 HTML 속성도 해당됩니다.
예를 들어, HTML 요소의 style 속성이나 class 속성 등은 값과 함께 복제된 노드에 그대로 적용됩니다.

HTML 속성으로 할당한 인라인 이벤트 리스너: 복사 됨

인라인 이벤트 리스너, 즉 HTML에서 직접 속성으로 설정한 이벤트 리스너(예: <button onclick="someFunction()">Click me</button>)는 그대로 복사됩니다.

자바스크립트로 할당한 이벤트 리스너: 복사 안 됨

자바스크립의 addEventListener()를 사용하여 추가된 이벤트 리스너는 복사되지 않으며, 이 경우 복제된 노드에는 해당 이벤트 리스너가 없습니다.

또한, 노드의 속성으로 할당한 이벤트 리스너(예: node.onclick = someFunction)도 복사되지 않습니다. 이러한 방식으로 설정된 이벤트는 복제된 요소에서 작동하지 않게 됩니다.

`<canvas>` 요소의 복제

<canvas> 요소는 복사될 때, 그려진 이미지나 그래픽을 포함하지 않습니다.
즉, 원본 <canvas>에서 그린 내용은 복제된 <canvas>에는 존재하지 않습니다. 복사된 <canvas>는 빈 상태로 복제됩니다.

주의할 점

cloneNode()를 용할 경우, 문서 내에 중복된 id가 발생할 수 있습니다.
원본 노드에 id 속성이 있는 경우, 복제 후에는 복제본의 id를 고유하게 변경해야 합니다.
name 속성도 중복이 발생할 수 있으므로, 상황에 따라 수정이 필요할 수 있습니다.

부연설명
id 속성은 해당 요소의 고유식별자를 지정하는 속성입니다. 이 속성의 값은 문서(웹 페이지)에서 유일하고, 고유해야 합니다.

간단한 활용 예제

다음의 예제에서는 버튼을 클릭하면 <ol> 요소의 마지막 자식 요소인 <li>를 동적으로 복제하여 마지막 자식으로 추가되도록 만들어 보겠습니다.

HTML

<ol id="fruits">
    <li>사과</li>
    <li>바나나</li>
    <li style="color: red;">복숭아</li>
</ol>
<button type="button">마지막 자식 요소 복제하기</button>

JavaScript

const fruitList = document.getElementById("fruits");
const button = document.querySelector("button");

button.addEventListener("click", () => { // 버튼 클릭 이벤트
    // 마지막 자식 요소 가져오기
    const lastChildLi = fruitList.lastElementChild;

    // 마지막 자식 요소를 복제하기
    const cloneChild = lastChildLi.cloneNode(true); // 자손 노드인 텍스트까지 모두 복제됩니다.

    // 부모 노드 안쪽 끝 부분, 즉 마지막 자식으로 복제한 노드 삽입하기
    fruitList.appendChild(cloneChild);
});

코드 부연설명
lastElementChild 속성은 현재 요소의 마지막 자식 요소를 반환합니다.

코드 부연설명
querySelector() 함수는 지정한 CSS 선택자와 일치하는 첫 번째 요소 객체를 반환합니다.

코드 부연설명
appendChild() 함수는 노드를 특정 노드의 마지막 자식으로 추가합니다.

이 예제에서 실제 적용된 모습을 보면, 마지막 자식 요소인 <li>에 포함되어 있는 style 속성과 값도 함께 복제되어 텍스트('복숭아')의 색상이 red로 적용되는 것을 알 수 있습니다.

브라우저 호환성

cloneNode() 함수의 브라우저 호환성
메서드	데스크탑 Chrome	데스크탑데스크탑 Edge	데스크탑 Firefox	Safari
`cloneNode()`	1	12	1	1.1

명세서

cloneNode() 함수의 명세서 사양
명세서 사양
`cloneNode()`	DOM Standard #ref-for-dom-node-clonenode①

참고문헌

MDN - Node: cloneNode() method

Node.cloneNode() 사용법

예시

구문