DOM(1)

8251 단어 JavaScriptDOMCSShtmlCSS

DOM

😄 DOM

  • Document Object Model
  • 브라우저가 HTML 파일을 읽어서 브라우저가 이해할 수 있는 Node로 변환하는 것, 즉 페이지와 상호작용하기 위한 인터페이스
  • HTML 파일에 있는 태그들은 객체로 변환된 이후부터 element가 된다
  • Style (CSS)은 제외

Node ?

  • EventTarget을 상속한다 즉 EventTarget의 Object이다
  • EventTarget을 상속하기 때문에 모든 Node는 이벤트가 발생할 수 있다
  • EventTarget <- Node
  • Node <- Document, Element, Text
    • Document와 Text, Element도 Node를 상속하고 Node는 EventTarget을 상속하기 때문에 똑같이 이벤트가 발생할 수 있다
  • 관계
    • parentNode : 부모 노드
    • childNodes : 자식 노드 리스트
    • firstChild : 첫번째 자식 노드
    • lastChild : 마지막 자식 노드
    • nextSibling : 다음 형제 노드
    • previousSibling : 이전 형제 노드
    • 요소와 요소 사이의 빈 공백 or 개행은 텍스트 노드로 처리

EventTarget ?

  • 메서드
    • addEventListener() : 특정 이벤트 핸들러 등록
    • removeEventListener() : 특정 이벤트 리스너 제거
    • dispatchEvent() : 특정 이벤트 전달, 발행

😄 DOM Tree

<html>
  <head>
  	<meta charset="UTF-8" />
  	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  	<meta name="author" content="SeungOk">
  	<title>DOM Tree</title>
  	<link rel="stylesheet" href="style.css">
  </head>
  <body>                               
  	<section>
      <img src="img.png" alt="img">
      <h1>DOM Tree 이해하기</h1>
      <h2>어려워보이지만 쉬워요</h2>
      <h3>DOM Tree 예제입니다</h3>
    </section>
    <span>아무말이나 써보아요</span>
</html>
  • 브라우저는 위와 같은 HTML을 한줄씩 Parsing해서 브라우저가 이해할 수 있도록 DOM Tree로 변환한다
  • html <- head <- meta, meta, meta, title, link
  • html <- body <- section <- img, h1, h2, h3
  • html <- body <- span <- TextNode
    • 위와 같이 부모로부터 자식으로 뻗어 나가는 나무같은 구조를 DOM Tree라고 한다
    • 위와 같이 DOM Tree로 변환되어 브라우저 웹페이지상에 보이고 JavaScript로 DOM Tree의 각 요소에 접근하여 요소를 수정, 삭제, 추가 등 작업을 하는 것이다

CSSOM

😄 CSSOM

  • CSS Object Model
  • 각 태그에 대한 CSS 속성을 가지고 있는 Tree
  • 브라우저에서 HTML을 읽고 DOM으로 만들면 이후 CSS 속성과 병합하여 CSSOM이라는 Tree를 만든다 (주의 : Document element x)
  • 사용자가 정의한 Style 뿐만 아니라 브라우저에서 기본적으로 Style 된 것들도 포함된다. (cascading)
  • html <- body <- section <- h1 <- h3에서 html에 font-size를 20px로 지정하면 자식 요소들도 동일한 20px가 적용된다 (cascading)

Render Tree

😄 Render Tree

  1. 브라우저가 html 파일을 parsing하기 시작
  2. DOM Tree 생성
  3. CSS 파일을 읽고 CSSOM Tree 생성
  4. 2,3을 병합해서 최종적으로 브라우저에 표시될 것들만 Render Tree에 선별해서 표시
    4-1. head는 표시되지 않는다 (사용자 눈에 안보이기 때문에)
    4-2. display : none이 있는 요소도 포함되지 않는다 (사용자 눈에 안보이기 때문에)
    4-3. opacity는 표시된다 (사용자 눈에만 안보일뿐 아이템이 자리는 차지하고 있기 때문에)
  • 즉 브라우저는 DOM과 CSSOM을 합쳐서 사용자에게 보여지는 요소들만 Render Tree에 표시한다
  • DOM + CSSOM(DOM + CSS) = Render Tree

😍 코드 지적은 언제나 환영입니다. 읽어주셔서 감사합니다. 😍

스프링 소스 분석 (1) XmlWebapplicationContext
JAVAEE 프레임 의 Spring 새 주해

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage