자바스크립트 javascript Dom remove 와 removeChild 차이

<자바스크립트 javascript Dom remove 와 removeChild 차이>

 

Dom조작을 할때 비슷비슷한 녀석들이 많아서 잘모르기도하고 헷갈리기도 해서 글쓴이가 이해하기 위해 정리하는 블로그를 써봅니다.

 

remove로 노드삭제도 해보고 domtag도 삭제 해보고 console.log를 찍어보며 차이점을 눈으로 보려고 하였는데, 삭제해서 없는것을 console.log로 찍어볼수가 없어서 사용법과 차이점을 남깁니다.

 

append와는 다르게 메소드 모양이 약간 다르답니다.

 

 

1.remove() 

1)사용법

삭제할노드.remove()       // ()안에 인자를 받지 않습니다.

2)하는일

노드자체를 메모리에서 삭제하고, 실행되고 있는 노드를 종료시켜준다고 합니다. removeChild와 비교하면 진정한 의미의 삭제입니다.

 

2.removeChild()

1)사용법

부모노드.removeChild(삭제할노드)  

2)하는일

remove와는 다르게 removeChild는 노드를 삭제하지않고 부모노드와의  Dom연결고리를 끊어버립니다. 한마디로 append나 appendChild로 이어준 Dom연결고리를 끊어버려, append나 appendChild이전의 상태로 만들어 버리는것이죠. 그렇기 때문에 실제로 removeChild이 진행된 노드는 생성된체로 메모리 어딘가에 저장이 되어있고, 연결을 기다리는 상태로 돌아가게 되는 것입니다. 후에 나중에 다시 설정하고싶은 부모노드에 붙일수 있다고 합니다. 아마 저도 공부하게 되면서 새로 알게된 좋은 정보 인것 같습니다. 어떤식으로 사용하게 될지는 모르겠지만 이런차이가 있다는것만 알고 넘어가도 좋을 것 같습니다.