DOM이란?
문서 객체 모델(The Document Object Model, DOM)은 HTML, XML 문서의 프로그래밍 인터페이스이다.
즉, 우리가 작성해놓은 HTML문서를 브라우저가 해석해서 만들어 놓은 것
2. 페이지의 콘텐츠 및 구조, 그리고 스타일이 자바스크립트 프로그램에 의해 수정되기 위해 사용
▶ 항상 유효한 HTML 형식입니다.
▶ 자바스트립트에 수정될 수 있는 동적모델
▶ 가상요소를 포함하지 않는다
▶ 보이지 않는 요소를 포함하지 않는다.
DOM은 어떻게 생성되고 보이는 걸까?
- DOM의 개체 구조는 "노드 트리"로 표현된다.
- 하나의 부모(줄기)가 여래개의 자식(가지)을 가지고 있고, 자식(가지)은 후손(잎)을 가질 수 있는 나무 구조
- 부모(루트, 줄기) : HTML, 자식(나뭇가지) : 루트 요소에 포함된 태그들, 후손(잎) : 요소 안의 콘텐츠
<!DOCTYPE html>
<html lang="ko">
<head>
<title>study</title>
</head>
<body>
<h1>Hello, World</h1>
<p>Hi, HTML</p>
</body>
</html>이렇게 작성된 코드는 아래와 같은 노드 트리로 표현된다.
DOM의 정리
1. 내가 작성한 HTML 코드는 DOM이 아니다
- DOM은 HTML 작성하여 생성되었지만 항상 동일하지는 않다
- 작성된 HTML 문서가 유효하지 않은 코드를 올바르게 교정해준다
- JavaScript에 의해 DOM이 수정되면 HTML 코드와 다르게 된다.
- 하지만 내가 작성한 코드가 브라우저에 의해 파싱이 되면 DOM이 된다
2. 페이지 소스도 DOM이 아니다
- 페이지 소스는 그 페이지를 이루고 있는 HTML으로, 내가 작성한 HTML과 같다.
3. 개발자 도구를 통해 확인하는 코드 이것이 DOM이라고 할 수 있다.
- 개발자 도구에서 시각적으로 표현된 DOM이 나의HTML코드와 같을수있지만 다른 경우가 많다(해당 5번 참고)
4. DOM은 브라우저에서 보이는 것이 아니다
- 예를 들어, display : none스타일 속성을 가지고 있는 요소의 경우 DOM에서는 표시가 되지만, 화면(뷰포트)에서는 표시되지 않는다
5. 개발자도구에서 보이는 것은 DOM에 가장 가까운 근사치를 제공한다
- 개발자 도구에서는 DOM에 없는 추가적인 정보를 포함한다.
- 예를 들어, CSS의 가상 요소 (::before, ::after)는 기술적으로 DOM의 일부는 아니다.
- DOM은 오직 HTML 문서로부터 생성이 되고 요소에 적용되는 스타일은 포함하지 않기 때문
- 이러한 이유로 가상 요소들은 DOM의 일부가 아니므로 JavaScript로 수정이 불가
- 내가 작성한 문서에 적용되는게 아니라 DOM에 적용이 되므로 개발자도구(f12)를 사용해야한다
6. JavaScript가 브라우저를 일고 작업을 할 수 있는 장소가 DOM이다
7. DOM에서 요소를 찾아가기 위해서는 선택자 사용(다음 게시물에서 선택자 설명)
- w3school -
참고자료
'Web > CSS' 카테고리의 다른 글
| CSS 선택자 - 가상요소, 가상클래스 (1) | 2020.12.19 |
|---|---|
| CSS 선택자 - 조합선택자(후손,자식,형제) (6) | 2020.12.18 |
| CSS 선택자 - id, class (4) | 2020.12.17 |
| CSS 삽입방법 (0) | 2020.10.14 |
| CSS란? (0) | 2020.10.02 |
댓글