removeChild() 및 replaceChild()를 사용하여 노드를 제거하거나 바꾸기

• DOM에서 노드 제거시에 여러 단계의 과정으로 이루어짐
• 먼저 삭제할 노드를 선택한다.
• 다음 부모 노드에 대한 접근을 얻어야하고, 보통 parentNode 속성 사용.
• 부모 노드에서 삭제할 노드에 대한 참조를 전달하여 removeChild() 메서드 호출.
• element 노드나 텍스트 노드를 바꾸는 것은 제거하는것과 별반 다르지 않음.

 

* removeChild()

<div id="A">hi</div>
<div id="B">Dude</div>

------------------------------------------------------------------

[1]
var divA = document.getElementById('A');
divA.parentNode.removeChild(divA);

[2]
var divB = document.getElementById('B').firstChild;
divB.parentNode.removeChild(divB);

[3]
console.log(document.body.innerHTML);


설명
[1] element 노드 삭제. 
[2] text 노드 삭제.
[3] 출력하면 빈div#B만 남는다. (<div id="B"></div>)

 

 

* replaceChild()

<div id="A">hi</div>
<div id="B">Dude</div>

------------------------------------------------------------------

[1]
var divA = document.getElementById('A');
var newSpan = document.createElement('span');
	newSpan.textContent = "Howdy";
	divA.parentNode.replaceChild(newSpan, divA);
    
[2]
var divB = document.getElementById('B').firstChild;
var newText = document.createTextNode('buddy');
	divB.parentNode.replaceChild(newText, divB);

[*]
console.log(document.body.innerHTML);


설명
[1] span태그를 생성.
	span에 textContent(Howdy) 추가. 
    #A의 부모노드(<div>)에 replace해준다(span추가, divA(div#A) 참조)
    출력해보면 <span>Howdy</span> 기존의 div가 span으로 바뀜.
    
[2] div#B의 firstChild를 divB로 선언.
	새로운 textNode(buddy) 만들고.
    divB의 부모노드에 replace해준다 (새 텍스트, divB참조)
    출력해보면 <div id="B">buddy</div> 기존의 text(Dude)가 buddy로 바뀜.
    
 [*] 웹에는 Howdy
           buddy

   콘솔에는 <span>Howdy</span>
           <div id="B">buddy</div>   
 
    
	

 

• removeChild() 및 replaceChild()는 각각 교체되거나 제거된 노드를 반환.
• 기본적으로 해당 노드는 바꾸거나 제거하는 것이므로 사리지지 않았다.
• 해당 노드가 현재 문서의 범위를 벗어나게 만든다.
• 메모리상 참조는 여전히 가진다.