DOM

1.11 Using removeChild() and replaceChild() to Remove and Replace Nodes

Posted by yunki kim on August 31, 2021

  돔에서 노드를 지울려면 여러 과정을 거쳐야 한다. 우선 지움의 대상이 되는 노드를 선택한 후 parentNode를 사용해 그의 부모를 선택하고 지움의 대상이 되는 노드를 인자로 넘겨서 노드를 지운다.

1
2
var divA = document.getElementById('A'); 
divA.parentNode.removeChild(divA);
cs

  replaceChild()의 경우 리시버 객체는 부모, 첫번째 인자는 새로운 노드, 두번째 인자는 바꿈의 대상이 되는 노드를 넘기면 된다.

 

1
2
3
4
var divA = document.getElementById('A');
var newSpan = document.createElement('span'); 
newSpan.textContent = 'Howdy';
divA.parentNode.replaceChild(newSpan,divA);
cs

  어떤 대상을 지우거나 대체함에 따라 innerHTML, outerHTML, textContent 프로퍼티를 사용하는 편이 더 쉽고 빠를 수 있다. 하지만 메모리 누수를 주의해야 한다.

  replaceChild()와 removeChild()는 대체된, 삭제된 노드를 반환한다. 하지만 이 노드들은 단지 현재의 라이브 문서에서만 사라졌을 뿐 이 노드들에 대한 참조는 여전히 존재한다.

 

출처 - DOM Elightment