자바스크립트 - 문서 객체 모델 (DOM)

Document Object Model

웹페이지 = 웹문서 

웹페이지에 나타나는 HTML 문서 전체를 객체로 표현한 것

document 객체 = 웹문서의 최상단 객체 -> 웹페이지를 수정하고 새로운 컨텐츠를 생성할 수 있다. 

 

console.log(window) 로 출력했을때는 윈도우 객체와 그가 갖는 프로퍼티가 출력되는데

console.log(document) 를 출력하면 DOM에 해당하는 html 태그가 출력된다

console.dir(document) 를 출력하면 객체 형태 + 프로퍼티 출력됨 

---

console.log( )

전달받은 값 위주로 출력

여러 개의 파라미터를 받을 수 있다

 

console.dir( )

객체의 속성을 출력

문자열 형식으로 콘솔에 출력

첫번째 파라미터만 받는다

---

DOM Tree 

각각의 객체 : Node 노드 

각 노드 간의 관계 : 부모parent 노드/ 자식child 노드 / 형제sibling 노드

 

노드 타입 : 요소 노드 (태그 h1, h2, title...) / 텍스트 노드: 요소 노드의 자식 노드가 되고, 따로 자식 노드를 가질 수 없음 (leaf 잎 노드)  / 코멘트 노드 / 문서document 노드 ... 총 12개 타입