치춘짱베리굿나이스

html DOM 본문

ClientSide/html css

html DOM

치춘 2022. 3. 25. 23:32

DOM

정의

Document Object Model, 웹 페이지에 대한 인터페이스이다

웹 브라우저는 HTML 문서를 읽어들이고, 문서의 내용을 선언된 형식대로 파싱하여 어떻게 페이지를 렌더링할 지 결정한다

문서에 대한 파싱이 끝난 뒤에는 렌더 트리가 생성되며, 이 트리에는 웹 페이지에 표시될 HTML 요소들과 스타일 요소들이 트리 구조로 표현된다

예시

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="div-hello">안녕하세요</div>
    <div class="div-hello">방가방가</div>
</body>
</html>

html 파일의 내용은 웹 브라우저에 의해 파싱되어 DOM 형태로 메모리에 올라가고, DOM은 노드로 구성된 논리 트리로 표현된다

가장 최상단에 위치한 루트 태그인 html 태그는 트리의 루트가 되고, 하위 태그들은 자식 요소가 된다

DOM === html ?

DOM은 html 파일로부터 생성됨에도 불구하고 항상 1대1로 매치되진 않는다

  • html 문서가 올바르게 구성되지 않았을 때
    • <head>, <body> 등 필수 태그의 부재
    • 제대로 구성되지 않아 오류가 발생해야 하는 html 문서
  • 스크립트 (대개 javascript) 에 의해 DOM이 수정될 때
    • 요소의 속성을 변경할 때
    • 새로운 태그 (노드) 를 추가할 때

CSSOM과 렌더 트리

CSSOM

스타일 정보도 DOM과 비슷한 객체 모델로 변환되며 이것이 CSSOM (Cascading Style Sheet Object Model) 이다

스타일시트의 모든 내용을 담고 있으며, 웹 페이지에서 실질적으로 요소들이 어떤 모습으로 표현될 지를 결정한다

렌더 트리

DOM과 CSSOM이 조합되면 렌더 트리가 되어 화면에 어떤 요소를 (DOM) 어떻게 그릴지 (CSSOM) 결정한다

DOM은 html의 모든 요소를 가지고 있지만, 렌더 트리는 보이지 않는 요소를 제외한다

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="div-hello" style="display: none;">안녕하세요</div>
</body>
</html>

위의 예시에서 div-hello 클래스의 div 태그는 display 스타일이 none으로 설정되어, 스크린상에서 숨겨지게 된다

DOM 트리는 해당 div 태그를 포함하지만, 렌더 트리는 포함하지 않는다

또한, CSSOM과 렌더 트리에 포함된 가상 요소 (::before, ::after 등) 는 개발자 도구에서는 확인할 수 있지만, DOM에는 포함되지 않는다 (원본 html에 있던 내용이 아니므로)

DOM과 자바스크립트

DOM은 직접적인 프로그래밍 언어는 아니지만, 자바스크립트에서 html과 xml 등의 파일에 포함된 요소들의 정보를 얻어오도록 돕는다

페이지에 포함되는 요소들은 DOM에 저장되고, 자바스크립트 내에서 읽어들일 수 있으며, 자바스크립트에 의해 수정될 수 있다

document나 window 인터페이스를 통해 DOM의 노드들에 직접 접근할 수 있다 (document.getElementbyID 함수나 window.location.href 함수가 그 예시)

참고 문서

DOM은 정확히 무엇일까? | WIT블로그

DOM 소개 - Web API | MDN

저작자표시

'ClientSide > html css' 카테고리의 다른 글

가상선택자 ::before, ::after  (0) 2022.05.09
CSS 선택자  (0) 2022.05.09
미디어 쿼리  (2) 2022.04.06
Attribute vs Property  (0) 2022.03.25
[CSS] 길이 단위  (0) 2022.03.25
'ClientSide/html css' Related Articles more
Comments