cloneNode()

cloneNode()는 DOM (Document Object Model) API의 메서드 중 하나로, 호출된 노드를 복제하여 반환합니다. 이 메서드는 특히 이미지와 같은 요소를 복제할 때 유용합니다. cloneNode() 메서드에는 선택적 매개변수로 깊은 복사를 지정할 수 있습니다.

 

// 원본 이미지 요소 선택
const originalImage = document.querySelector('img');

// 이미지 요소 복제
const clonedImage = originalImage.cloneNode(true);  // true는 깊은 복사를 의미합니다

// 복제된 이미지 요소를 DOM에 추가
document.body.appendChild(clonedImage);

매개변수

• deep (선택적): Boolean 값을 가지며, true로 설정하면 모든 자식 노드도 함께 복사됩니다. false로 설정하면 요소 자체만 복제됩니다. 기본값은 false입니다.

주요 포인트

• 얕은 복사 (false): 노드 자체만 복사되며, 자식 노드는 포함되지 않습니다.
• 깊은 복사 (true): 노드와 그 자식 노드까지 모두 복사됩니다.

이 메서드는 DOM 구조에서 특정 요소를 빠르게 복제해야 할 때 매우 유용합니다. 이를 통해 이미지 갤러리나 반복적인 UI 요소를 쉽게 생성할 수 있습니다.