문서 객체 모델 (Document Object Model)
JS를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법
∴ DOM은 웹 문서와 그 안의 모든 요소를 객체로 인식
DOM 트리
DOM은 문서 안의 요소뿐만 아니라 각 요소에서 사용한 내용과 속성도 자식으로 인식
노드 : DOM 트리에서 가지가 갈라져 나간 항목
루트 노드 : DOM 트리의 시작 부분
또한 부모와 자식, 형제 간으로 표현 가능
부모 노드에는 자식 노드가 존재
부모 노드가 같은 형제 노드도 존재
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>DOM 트리 알아보기</title>
</head>
<body>
<h1>제목입니다</h1>
<img src="images/이미지파일.jpg" alt="사진">
</body>
</html>
위 예시에서
html 요소 : head, body의 부모이며 루트 노드
head, body : 서로 형제이며 html의 자식이며 부모 노드
meta, title : 서로 형제이며 head의 자식이며 부모 노드
h1, img : 서로 형제이며 body의 자식이며 부모 노드
DOM 구성의 기본
1. 모든 HTML 태그는 요소 노드
2. HTML 태그에서 사용하는 텍스트 내용은 자식 노드인 텍스트 노드
3. HTML 태그에 있는 속성은 자식 노드인 속성 노드
4. 주석은 주석 노드
더보기
Do it! HTML+CSS+자바스크립트 웹 표준의 정석 교재를 참고하여 작성했다.
'JAVASCRIPT' 카테고리의 다른 글
| DOM에서 이벤트 처리하기 (1) (0) | 2023.09.29 |
|---|---|
| DOM 요소 접근 및 속성 가져오기 (0) | 2023.09.24 |
| 브라우저 관련 객체 (0) | 2023.07.15 |
| 자바스크립트 내장 객체 - Math (0) | 2023.07.04 |
| 자바스크립트 내장 객체 - Date (0) | 2023.04.11 |