HTML DOM의 cloneNode() 메서드는 호출된 대상 노드의 복사본을 생성하고, 그 복제된 노드를 반환하는 메서드입니다. 이 메서드를 사용하면 해당 노드가 가진 모든 속성(attribute)과 값(value)이 그대로 함께 복제됩니다.
문법(Syntax)
cloneNode() 메서드의 기본 문법은 다음과 같습니다.
yourNode.cloneNode([deep])
여기서 deep은 선택적(optional) 매개변수입니다.
- true로 설정하면 해당 노드뿐만 아니라 자식 노드들과 그 자식들이 가진 모든 속성 및 값까지 전부 복제됩니다.
- false로 설정하면 해당 노드 자체와 그 속성·값만 복제되며, 자식 노드는 복제되지 않습니다.
예제(Example)
HTML DOM cloneNode() 메서드의 실제 사용 예제를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<title>CLONE NODE</title>
<style>
h1{color:green;}
h2{ color:blue; }
</style>
</head>
<body>
<div id="DIV1">
<h1> HEADING 1</h1>
<h2> HEADING 2</h2>
</div>
<button onclick="CloneEle()"> CLONE </button>
<script>
function CloneEle() {
var x = document.getElementById("DIV1");
var clone = x.cloneNode(true);
document.body.appendChild(clone);
}
</script>
</body>
</html>
출력 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
CLONE 버튼을 클릭하면 다음과 같이 노드가 복제됩니다.
코드 설명
위 예제에서는 먼저 하나의 div 요소를 만들고, 그 안에 <h1>과 <h2> 요소를 배치했습니다. 각 제목 요소는 고유한 스타일을 가지고 있습니다.
h1{color:green;}
h2{ color:blue; }
<div id="DIV1">
<h1> HEADING 1</h1>
<h2> HEADING 2</h2>
</div>
그다음 사용자가 클릭하면 CloneEle() 함수를 실행하는 CLONE 버튼을 생성했습니다.
<button onclick="CloneEle()"> CLONE </button>
CloneEle() 함수는 getElementById() 메서드를 사용해 id가 "DIV1"인 div 요소를 가져와 변수 x에 할당합니다. 이후 x에 대해 매개변수를 true로 지정한 cloneNode(true) 메서드를 호출하여 해당 div와 그 안의 자식 요소들을 모두 복제한 뒤, 변수 clone에 저장합니다. 마지막으로 appendChild() 메서드를 통해 복제된 노드를 문서의 body 끝에 추가합니다.
function CloneEle() {
var x = document.getElementById("DIV1");
var clone = x.cloneNode(true);
document.body.appendChild(clone);
}
이처럼 cloneNode() 메서드를 활용하면 기존 DOM 구조를 손쉽게 복제하여 동적으로 페이지에 추가할 수 있으며, deep 매개변수의 true/false 설정에 따라 자식 요소까지 복제할지 여부를 유연하게 조절할 수 있습니다.