<tag>
가 javascript의 node라는 오브젝트로 변환됨.DOM node는 DOM API를 쓰는데 꼭 필수적인 인터페이스이다.
node
여러 가지 DOM 타입들이 상속하는 인터페이스이며 그 다양한 타입들을 비슷하게 처리할 수 있게 한다
이 node라는 오브젝트는 EventTarget이라는 오브젝트를 상속한다. 즉 모든 node는 이벤트가 발생할 수 있다. document, element(HTMLElement, HTMLDivElement 등), text ... 은 node를 상속한다. 즉 모든 요소에서 이벤트가 발생 가능하다.eventTarget은 3가지 method가 있다.
addeventListener은 결국 eventTarget에서 지원해주는 API였다.
ex) `<h1>` = HTMLHeadingElement, `<text>` = TextNode
개발자도구에서 원하는 부분 클릭후 $0을 하면 그 부분이 모두 나오게됨.
$0.childNodes
=> 모든 node들을 받아오게 됨 parentNode, nextSibling 등등 사용
DOM + CSS = CSSOM
CSSOM에는 우리가 정의한 스타일 뿐 아니라 브라우저에서 기본적으로 설정된 모든 속성값들 cascading에 따라 설정된 모든 css값들이 정의돼 있다.
DOM + CSSOM = Render Tree
Render Tree는 궁극적으로 사용자에게 보여지는 요소들로만 구성됨. Render Tree에 head부분이 포함되지 않는 이유는 사용자 눈에 절대 보여지지 않기 때문이다.
display: none
이라고 설정된 태그는 최종 Render Tree에는 포함 안 됨.
opacity:0
, visibility: hidden
은 눈에는 안보이지만 Render Tree에 포함됨.
construction
파트와 operation
파트 2가지 파트로 나눌 수 있다