NODE 객체는 DOM(Document Object Model) 에서 가장 최상위에 있는 객체입니다.
Node 객체는 모든 하위객체에 뿌리와 같은 존재입니다
Node객체에는 다양한 종류 들이 있는데 오늘은 Node를 추가 , 제거 , 변경하는 방법을 알아보겠습니다.
프론트 작업중 유용하게 활용할수 있는 기술 입니다
저또한 작업중 활용한 NODE API를 활용해서 작업을 했던 기억이 있습니다
먼저 Node 객체를 추가해보겠습니다.
= createElement() 엘리먼트 노드를 추가하고
= createTextNode() 로 Text추가하고 appendChild & insertBefore 를 활용해서 생성하고 추가할수있습니다
= 추가를할때는 대표적으로 appendChild 활용해서 마지막자식으로 추가하는것이고
= insertBefore 활용해서 제가 넣고싶은 자식에 위치에 추가할수있습니다
자 그럼 추가해보죠!
this.onclick=null 무시하셔도 됩니다 onclick이벤트를 한번만 실행하게 하는 코드입니다!
이번엔 removeChild를 활용해서 li remove해보겠습니다!
마지막으로 replaceChild 활용해서 새로은 정보를 넣어 보겠습니다
기본적인 Node API에 추가 , 제거 , 변경 기능을 활용해봤습니다!
'JavaScript' 카테고리의 다른 글
| JavaScript Ajax 비동기 통신에 대해서 알아보자 part2! (9) | 2021.07.26 |
|---|---|
| 오늘은 addEventListener 에 대해서 알아봐요! (9) | 2021.07.26 |
| Element Api 속성에 에대서 알아봐요! (9) | 2021.07.22 |
| javascript map() 함수 알아보자 (9) | 2021.07.15 |
| Ajax 비동기 통신에 대해서 알아보자! (10) | 2021.07.11 |