카테고리 없음

`cloneNode`메서드

개발_자 2024. 7. 18. 14:24

`cloneNode`

JS에서 DOM 노드를 복제하는 메서드

복제본은 DOM 트리의 다른 위치에 삽입 가능하며,

원래 노드의 구조와 속성 그대로 유지함

 

두 가지 모드 지원 : 얕은 복사(shallow clone), 깊은 복사(deep clone)

 

기본 사용법

const clone = orginalNode.cloneNode(deep);

`orignalNode` : 복제할 원래 노드

`deep` : 불리언 값. `true`이면 깊은 복사, `false`이면 얕은 복사 (기본값은 `false`)

 

 

<얕은 복사> 

const shallowClone = originalNode.cloneNode(false);

복제할 노드 자체만 복사하고, 그 하위 노드(자식 요소)는 복사하지 않음

 

<html>

<div id="original">
  <p>Child paragraph</p>
</div>

 

<js>

const originalNode = document.getElementById('original');
const shallowClone = originalNode.cloneNode(false);
document.body.appendChild(shallowClone);

 

<결과>

<div id="original">
  <p>Child paragraph</p>
</div>
<div id="original"></div>

 

 

 

<깊은 복사>

const deepClone = originalNode.cloneNode(true);

노드와 그 하위 노드 모두를 복사

 

<html>

<div id="original">
 <p>Child paragraph</p>
</div>

 

<js>

const originalNode = document.getElementById('original');
const deepClone = originalNode.cloneNode(true);
document.body.appendChild(deepClone);

 

<결과>

<div id="original">
 <p>Child paragraph</p>
</div>
<div id="original">
 <p>Child paragraph</p>
</div>