Binyard

Appearance

웹과 DOM ​

웹(Web) ​

  • 인터넷에 연결된 사용자들이 서로 정보를 공유할 수 있는 공간을 의미한다.
  • HTML로 작성된 하나의 문서를 웹 페이지라고 하고, 이 웹 페이지들이 모여 있는 집합을 웹 사이트라고 부른다.
  • 웹 사이트는 특정한 주소(URL)로 접근할 수 있으며, 흔히 말하는 홈페이지에 해당한다.

DOM(Document Object Model) ​

less
// HTML
<!DOCTYPE html>
<html>
  <body>
    <div>
      <h1>Hello</h1>
    </div>
    <div>
      <p>World</p>
    </div>
  </body>
</html>

// 브라우저 내부의 DOM 트리 구조
Document
└── html
    └── body
        ├── div
        │   └── h1 ("Hello")
        └── div
            └── p("World")
  • DOM은 문서 객체 모델로, HTML 문서를 브라우저가 객체 형태로 구조화한 모델이다.
  • 웹 브라우저는 HTML 문서를 로드한 뒤, 각 요소를 자바스크립트가 접근하고 조작할 수 있도록 객체 기반의 트리 구조(DOM Tree)로 변환한다.
  • DOM은 트리 구조로 이루어져 있으며, 각 HTML 요소는 노드 Node라고 부른다.
  • 이 노드들은 자바스크립트 객체로 표현되며, 자바스크립트는 DOM API를 통해 이 객체들을 제어할 수 있다.

DOM 노드의 종류 ​

less
Document
└── html
    └── body
        ├── div
        │   └── h1 ("Hello")
        └── div
            └── p("World")
  • 문서 노드(Document Node): document
  • 요소 노드(Element Node): html, body, div, h1, p
    • 텍스트 노드(Text Node): 요소 안의 실제 텍스트 내용, 요소 노드의 자식으로 존재
    • 속성 노드(Attribute Node): class, id, src 등 속성, 요소 노드에 연결된 정보, (DOM 트리에는 일반적으로 표시되지 않음)
  • 주석 노드 (Comment Node): 형식의 주석, 브라우저에 표시되지는 않지만 DOM에는 존재한다.