DOM (Document Object Model)
DOM 이란?
마크 업을 구문 분석할 때 브라우저가 생성하는 객체로,
Document를 Object(Node)의 집합체로 "해석"해 놓은 것이다.
모든 사람의 요구에 맞는 새 HTML 파일을 그때마다 생성해 제공해줄 수 없기 때문에 DOM을 만들고
JS 등의 스크립팅 언어를 통해 Document 내용 변경하거나 엑세스한다.
왜 DOM이 필요한가?
옛날에는 HTML이 단지 텍스트 문서에서만 사용되었다.
브라우저가 HTML문서 다운 후 구문 분석하며 화면에 렌더링하면 그게 끝이었다.
그러나 점차 사람들이 웹용 어플리케이션을 구축하기 원하게 되었는데 "서버 측"에서 모든 상호 작용을 구현하는 것은 너무나 느렸다. 그래서 JS를 도입하게 되었다.
JS는 브라우저에 의해 다운로드되고 "클라이언트 측"에서 처리되었다. (엄청난 속도 향상을 가져옴)
그러나 UI 자체는 거의 독점적으로 HTML을 사용하여 구현되었고
JS 다운로드 끝났을 시점에는 이미 HTML이 빼도박도 못하게 정착되어 있었다. (수정이 불가하다는 소리)
그래서 HTML로 생성된 UI를 수정할 방법이 필요했고, DOM이 탄생하게 되었다.
즉, HTML 은 조리법이라면 DOM은 요리다.
조리법에 따라 준비하고 바로 먹을 수 있다.
조리법 변경해도 이미 조리된 요리는 바뀌지 않는다.
하지만 만들어진 요리에 손을 댈 수는 있다.
DOM은 JS가 HTML조작하는 API다.
DOM은 본질적으로 HTML의 메모리 내 표현이다.
HTML 사용자 에이전트 (ex : 웹 브라우저)는 마크 업을 구문 분석하여 DOM (문서 개체 모델) 트리로 변환한다.
모든 HTML 요소는 JS가 상호작용 및 조작할 수 있는 객체인 DOM 노드로 표현된다.
각 노드에는 자식 노드들이 있다.
※ 실제로 DOM은 언어 독립적이라서 JS말고도 다른 스크립팅 언어로도 조작 가능함.
<h1> Hello </ h1>다음과 같은 방법으로 액세스 가능
const h1 = document.querySelector ( 'h1'); // 문서 <h1> 요소 찾기
const 텍스트 = h1.textContent; // 요소의 텍스트 콘텐츠 가져 오기
if (text ==="Hello") {
h1.textContent ="Hello"; // 텍스트 내용 수정
}
DOM 트리에는 여러 종류의 노드 포함된다.
- DocumentType노드
- Element노드
- Text노드
- Comment노드
- 경우에 따라 ProcessingInstruction노드가 포함
에시
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sample page</title>
</head>
<body>
<h1>Sample page</h1>
<p>This is a <a href="demo.html">simple</a> sample.</p>
<!-- this is a comment -->
</body>
</html>
DOCTYPE : HTML 문서의 항상 최상단 위치하는 요소.
head, body 노드가 포함됨
'프론트엔드 개발 > HTML CSS' 카테고리의 다른 글
| HTML - 이미지, 오디오, 비디오, 링크 삽입 (0) | 2021.05.30 |
|---|---|
| HTML - HTML 태그 (목록, 표) (0) | 2021.05.30 |
| HTML - HTML 태그 (제목, 단락, 인용구, 서식) (0) | 2021.05.30 |
| HTML - 기본 구조, 태그 (0) | 2021.05.26 |
| MIME-Type, Content-Type 이란? (0) | 2021.05.23 |