Achievement Goals
• DOM이 무엇인지에 대해서 이해할 수 있다.
• HTML과 DOM이 어떻게 닮아있는지 알 수 있다.
DOM을 JavaScript로 조작하여 HTML Element를 추가하거나 삭제, 혹은 내용을 변경할 수 있다.
• createElement - CREATE
• querySelector, querySelectorAll - READ
document.body.append(tweetDiv)
• textContent, id, classList, setAttribute - UPDATE
• appendChild - APPEND
• remove, removeChild, innerHTML = "" , textContent = "" - DELETE
innerHTML과 textContent의 차이
- Dom구조를 조회하기위해선 console.dir이 유용
(Dom의 객체의 모습으로 보여주는 친구)
DOM 은 HTML문서를 수정 조작할수있는 원본 HTML 문서의 객체 기반 표현 방식
. Node는 Element의 상위 개념입니다. (node안에 element가 존재)DOM 관련 객체는 대부분 Node에서 파생되었다고 봐도 과언이 아닙니다. Node의 기능을 적용(implements)한 객체는 여러 타입이 있는데, 그 중 가장 많이 사용되는 타입이 Element입니다.
DOM은 HTML을 조작(manipulate) 할 수 있습니다. DOM이라는 구조를 기반으로, JS로 프로그램을 작성하여 HTML을 조작합니다.
C. DOM은 document 객체를 통해 HTML(root document)에 접근합니다.
- Window가 document보다 상위객체다
- 트리구조는 부모자식관계와 같다고 보면된다
참고 - BOM(Browser Object Model)이 window 객체를
통해 브라우져에 접근합니다.
- innerHTML은 단독으로 쓸수없고 querySelctor로 집어와서 써야한다
document.cloneNode 는, 생성하는 메소드가 아니라 복제하는 메소드 입니다
document.importNode 는, template 을 활용하여 내용을 붙여넣을 때 사용하는 메소드 입니다.
태그를 조회하는 법
- 태그를 조회하는지 id를 조회하는지 class를 조회하는지
document.querySelector('div') 는 최상단 div 하나만 조회합니다. - document.getElementById('div') 는 id가 div 인 element 하나를 조회합니다.
조회하면 하나의 값이기때매 따로 배열에 담아주지않음 - document.getElementsByClassName('div') 는 class가 div 인 element 여려 개를 조회합니다.
조회하면 빈 배열에 담김
