NODE 최상의 객체를 활용해봐요!

NODE 객체는 DOM(Document Object Model) 에서 가장 최상위에 있는 객체입니다.

Node 객체는 모든 하위객체에 뿌리와 같은 존재입니다 

Node객체에는 다양한 종류 들이 있는데 오늘은 Node를 추가 , 제거 , 변경하는 방법을 알아보겠습니다.

 

프론트 작업중 유용하게 활용할수 있는 기술 입니다  

저또한 작업중 활용한 NODE API를 활용해서 작업을 했던 기억이 있습니다 

 

먼저 Node 객체를 추가해보겠습니다.

= createElement() 엘리먼트 노드를 추가하고 

= createTextNode() 로 Text추가하고 appendChild & insertBefore 를 활용해서 생성하고 추가할수있습니다

= 추가를할때는 대표적으로 appendChild 활용해서 마지막자식으로 추가하는것이고 

= insertBefore 활용해서 제가 넣고싶은 자식에 위치에 추가할수있습니다

 

자 그럼 추가해보죠!

 

 

html 작성해주시고 

this.onclick=null 무시하셔도 됩니다 onclick이벤트를 한번만 실행하게 하는 코드입니다!

boommmmm 이렇게 활용할수있습니다

 

이번엔 removeChild를 활용해서 li remove해보겠습니다!

html 작성해주시요

button 클릭하면 없어지네요!^^

 

마지막으로 replaceChild 활용해서 새로은 정보를 넣어 보겠습니다

html을 작성해주시고

boommm 버튼을 클릭하면 a태그로 바뀌네요!

기본적인 Node API에 추가 , 제거  , 변경 기능을 활용해봤습니다!