웹 브라우저는 HTML 문서의 구성 요소를 모두 객체로 인식
-> 하지만 객체는 HTML 문법에서는 존재하지 않는 개념
웹 브라우저는 문서 객체 모델(DOM)을 생성할 수 있음
-> 웹 브라우저에 표시되는 HTML 문서 구조를 객체화한 모델 구조
-> 생성한 문서 객체 모델을 통해 HTML 문서의 구성요소를 객체로 인식 가능
-> JS는 웹 브라우저의 문서 객체 모델을 조작해 웹브라우저에 표시되는 HTML 문서 구조를 변경하거나 새로운 구성 요소 추가 가능
문서 객체모델이 생성되는 방식
웹 브라우저가 HTML 문서를 해석하고, 해석한 HTML 문서 구조를 객체로 변환하는 방식으로 생성
-> 생성한 문서 객체 모델을 웹 브라우저에 표시
문서 객체 모델은 트리 구조를 가짐 -> DOM 트리
<!DOCTYPE html>
<html lang="ko">
<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> DOM</title>
</head>
<body>
<h1> header </h1>
<a href = "#">link </a>
</body>위 코드를 웹브라우저는 해석하는 과정에서 DOM 생성
DOM 트리는 document 객체 하위에 HTML 태그 요소, 텍스트, 주석 등이 트리 형태로 구성됨
-> 이들을 각각 노드라고 함
-> 최상위 노드를 루트 노드라 하는데 document는 노드가 아니라 객체이므로 위에선 html이 루트 노드가 됨
-> head 노드와 body 노드는 같은 레벨에 있으므로 형제 노드이며, html 노드의 자식 노드
DOM을 생성할때는 enter 때문에 생긴 공백 또한 노드로 생성됨
<html lang="ko"><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> DOM</title></head><body><h1> header </h1><a href = "#">link </a></body>노드 타입
HTML 문서에서 각 요소는 DOM 트리에서 노드가 됨
| 타입 | 설명 |
|---|---|
| 문서 노드(Node.DOCUMENT_NODE) | 최상위 document 객체의 노드 타입 |
| 요소 노드(Node.ELEMENT_NODE) | h1, p 태그와 같은 요소의 노드 타입 |
| 속성 노드(Node.ATTRIBUTE_NODE) | href,src와 같은 속성의 노드 타입 |
| 텍스트 노드(Node.TEXT_NODE) | 텍스트에 해당하는 노드 타입 |
| 주석 노드(Node.COMMENT_NODE) | 주석에 해당하는 노드 타입 |
Journey for Backend Developer