코드스테이츠 - DOM

• DOM의 개념을 이해할 수 있다.
  Document Object Model --> 웹 페이지에 대한 인터페이스
  
  
• DOM의 구조를 파악하고, HTML과 DOM이 어떻게 닮아있는지 알 수 있다.

 

HTML에서 Javascript 파일을 불러올 때 주의점에 대해서 이해할 수 있다.

• <script> 태그가 적용되는 위치에 따라서 실행 결과가 달라질 수 있음을 이해할 수 있다.
  
  
  

 

parentElement or parentNode

 

특정 엘리먼트의 부모 엘리먼트를 가지고 있는 속성값이다.

 

이 속성값은 엘리먼트 마다 할당되어 있다.

 

parentElement와 parentNode는 같은 기능을 하지만, 리턴값에서 약간 다르다.

 

parentElement는 부모 노드가 없을 때 null 을 리턴하지만,

parentNode는 Document node를 리턴한다.

출처: https://gafani.tistory.com/entry/javascript-부모-엘리먼트노드 [Sanctuary]

 

 

Element VS Node

 

Element : HTML 태그 기준으로 부모, 자식으로 나눕니다.

 

Node : 태그, 글 내용까지 포함시키고 부모,자식으로 나눕니다.

 

 

DOM을 JavaScript로 조작하여 HTML Element를 추가하거나 삭제, 혹은 내용을 변경할 수 있다.

• createElement - CREATE
• querySelector, querySelectorAll - READ
• textContent, id, classList, setAttribute - UPDATE
• remove, removeChild, innerHTML = "" , textContent = "" - DELETE
• appendChild - APPEND
• innerHTML과 textContent의 차이

 

DOM의 더 깊은 내용에 대해서 이해할 수 있다.

• createDocumentFragment를 활용하여, 더 효율적으로 DOM을 제어할 수 있다. (메모리 낭비 X)
• children과 childNodes의 차이를 이해할 수 있다. (Nodes가 있으면 HTML 태그, 글까지 포함시킴)
• remove와 removeChild의 차이를 이해할 수 있다. (remove --> 노드을 메모리에서 삭제 , removeChild --> 부모자식 관계 끊음)
• 좌표 정보 조회를 할 수 있다. - offsetTop...
• 크기 정보 조회를 할 수 있다. - offsetWidth...