[자바스크립트 cloneNode()] cloneNode 메서드로 노드 복제가 되더라..

 cloneNode()는 쉽게 엘리먼트, 노드를 복제할 수 있는 메서드이다.

프로젝트 진행 중

오시는 길 페이지 초기 접속시에는 위치에 대한 정보가 안나오는 문제가 있었다.

 (궁 이름 클릭하면 나오게 설정되어있음)

// 클릭된 궁의 정보 요소를 표시
const palaceInfoDiv = document.getElementById(palaceName);
palaceInfoDiv.style.display = 'block';

const palaceInfoAddress = palaceInfoDiv.querySelector('.address');
const palaceInfoPhone = palaceInfoDiv.querySelector('.phone');

palaceInfoAddress.innerHTML = '';
palaceInfoPhone.innerHTML = '';

palaceInfoAddress.appendChild(addressIcon);
palaceInfoAddress.insertAdjacentHTML('beforeend', palaceInfo[palaceName].address.replace('/n', '<br>'));
palaceInfoPhone.appendChild(phoneIcon);
palaceInfoPhone.insertAdjacentHTML('beforeend', palaceInfo[palaceName].phone.replace('/n', '<br>'));

//아이콘
const addressIcon = document.createElement("i"); 
addressIcon.classList.add("fa-solid", "fa-location-dot");

const phoneIcon = document.createElement("i"); 
phoneIcon.classList.add("fa-solid", "fa-phone-volume");

// 맨 처음 정보로 경복궁으로 나오도록 설정
const defaultPalace ="경복궁";
const defaultPalaceInfoDiv = document.getElementById(defaultPalace);
const defaultPalaceAddress = defaultPalaceInfoDiv.querySelector('.address');
const defaultPalacePhone = defaultPalaceInfoDiv.querySelector('.phone');

defaultPalaceAddress.appendChild(addressIcon);
defaultPalaceAddress.innerHTML = palaceInfo[defaultPalace].address.replace('/n', '<br>');
defaultPalacePhone.appendChild(phoneIcon);
defaultPalacePhone.innerHTML = palaceInfo[defaultPalace].phone.replace('/n', '<br>');

해서 미리 진행해두었던 (클릭시 정보 나오는 것) 소스 참고하여 지도 초기화시 위와 같이 작업을 하였는데

이렇게 작업하니 아이콘이 따라오지를 않는 문제가 또 있는 것!

---

appendChild 메서드를 사용하여 작업하였는데, 이 메서드는 요소를 추가할 때 해당 요소가 이동되는 것이 아니라서 같은 요소를 여러 번 추가하면 마지막 추가된 위치에만 나타나게 되는 성질이 있다.

해결 방법은 초기 설정에 관한 소스에 새 요소를 만들어서 적용 시키는 것 : cloneNode() 함수를 사용하여 문제를 해결할 수 있었다.

사용방법 :  원하는 노드.cloneNode();

위 함수는 선택 옵션 지정이 가능한데 옵션은 자식 노드를 함께 복사할 것인지 아니면 해당 요소만 복제할 것인지 결정할 수 있다.

! 자식 노드도 함께 clone 복제하는 방법

자식 노드 역시 복제가 필요한 경우라면 true를 사용. -> addressIcon.cloneNode(true);

기본값은 false로 자식 노드는 복사하지 않는다.

---

cloneNode() 함수는 기존에 존재하는 요소를 복제하여 새로운 요소를 만들어주는 메서드이고, 이를 통해 기존에 설정한 아이콘을 재사용하는 대신에 새로운 아이콘을 만들어 사용할 수 있었다.

const defaultPalace ="경복궁";
const defaultPalaceInfoDiv = document.getElementById(defaultPalace);
const defaultPalaceAddress = defaultPalaceInfoDiv.querySelector('.address');
const defaultPalacePhone = defaultPalaceInfoDiv.querySelector('.phone');

//colneNode를 사용해 새로운 아이콘을 생성해서 추가한다
const defaultAddressIcon = addressIcon.cloneNode(true);
const defaultPhoneIcon = phoneIcon.cloneNode(true);

defaultPalaceAddress.appendChild(defaultAddressIcon);
defaultPalaceAddress.innerHTML += palaceInfo[defaultPalace].address.replace('/n', '<br>');
defaultPalacePhone.appendChild(defaultPhoneIcon);
defaultPalacePhone.innerHTML += palaceInfo[defaultPalace].phone.replace('/n', '<br>');

이렇게 수정하면 기본 궁인 경복궁에 대한 주소와 전화번호에 아이콘이 제대로 표시된다.

위에 cloneNode()함수로 작업을 하였기에 원본 소스도 동일하게 작용해보고 싶어서 해보았더니

클릭할때마다 복제되어 나온다는 단점이 있었다.

이 기능은 나의 작업에 일부만 필요했고 일부는 필요하지 않았던 것. 

 

※ cloneNode() 함수를 사용할 때 주의할 점 : 해당 요소의 하위 요소들도 함께 복제된다는 것. 따라서 필요한 경우에만 복제해야 하며, 복제된 요소가 불필요한 경우 메모리 낭비를 초래할 수 있다. cloneNode() 함수의 매개변수로 false를 전달하면 하위 요소를 제외한 복제를 수행할 수 있다.