치춘짱베리굿나이스
html DOM 본문
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
함수가 그 예시)
참고 문서
'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 |