728x90
문서 객체 모델(DOM, Document Object Model)?
웹 페이지 (HTML, XML)의 콘텐츠, 구조 그리고 스타일 요소를 구조화 시켜 표현하여
프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 `인터페이스`
문서 객체: HTML 태그를 JS에서 사용할 수 있는 `객체`로 만든 것
DOM은 어떻게 생성되고 어떻게 보여지는가
DOM은 HTML 문서를 계층적 구조 & 정보로 표현하며, 이를 제어할 수 있는 트리 자료구조임
∴ HTML DOM 혹은 HTML DOM Tree로 칭함
트리 자료구조는 노드들의 `계층 구조`로 이루어짐
따라서 부모-자식 & 형제 관계를 표현하는 비선형적 자료구조를 나타냄
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h2 style="color: darkred">hello world!</h2>
</body>
</html>
| 노드 종류 | 설명 |
| Document Node | DOM의 최상위 루트 노드, 전체 문서 대표 |
| Element Node | HTML 태그 요소, `<div>`, `<p>` .. etc |
| Attribute Node | 요소의 속성, `id`, `class`, `src` 속성을 포함하지만, element 노드의 일부로 취급 |
| Text Node | 요소 내부의 텍스트 내용 |
| Comment Node | HTML 주석 |
실행 순서에 따른 DOM 사용 오류
<!DOCTYPE html>
<html>
<head>
<title>Document Object Model</title>
<script>
// h1 태그의 배경 색상을 변경합니다.
document.querySelector('h1').style.backgroundColor = 'red';
// h2 태그의 글자 색상을 변경합니다.
document.querySelector('h2').style.color = 'red';
</script>
</head>
<body>
<h1>Process - 1</h1>
<h2>Process - 2</h2>
</body>
</html>
`document.querySelector('h1')`과 `document.querySelector('h2')`를 실행하는 시점에서
해당 요소들이 아직 존재하지 않기 때문에 에러 발생
즉, 스크립트가 실행될 때 h1, h2 태그가 아직 로드되지 않았기 때문에 발생함
해결 방법
문서가 완전히 로드된 후 스크립트를 실행하면 됨.
| 해결 방법 | 설명 | 특징 |
| `DOMContentLoaded` 이벤트 (가장 많이 사용) |
문서가 모두 로드된 후 실행 | 브라우저가 HTML을 파싱하는 동안 스크립트 실행을 기다릴 필요 X |
| `window.onload` 이벤트 | 문서 + 이미지, 스타일 시트까지 로드된 후 실행 | `DOMContentLoaded`보다 실행 시점이 늦음 모든 리소스가 로드된 후 실행 |
| `<script>` 태그 <body> 끝에 배치 | "" | 가장 간단한 방법 |
참고
https://www.codestates.com/blog/content/dom-javascript
문서 객체 모델 DOM 과 자바스크립트 JavaScriptㅣ생성 방식 및 접근 방법 - 코드스테이츠 공식 블로
웹 개발을 하는 프론트엔드 개발자라면 알고 있어야하는 자바스크립트(JavaScript)와 DOM(문서 객체 모델)란 무엇일까요?자바스크립트와 DOM(문서 객체 모델)의 관계와 차이점은 무엇인지, 자바스크
www.codestates.com
728x90