728x90
1. 문서 객체 모델 기본 용어
문서 객체란?
👉 HTML 태그를 자바스크립트에서 사용할 수 있는 객체로 만든 것.
문서 객체를 조작한다 = 태그를 조작한다
- 웹 브라우저는 HTML 페이지를 읽으면서 태그의 포함 관계에 따라 문서 객체를 트리 형태로 만든다.
- 노드: 각 트리의 각 요소
- 요소 노드: 요소를 생성하는 노드
예) h1 태그, script 태그 - 텍스트 노드: 화면에 출력되는 문자열
- 요소 노드: 요소를 생성하는 노드
더보기
텍스트 노드를 갖지 않는 태그들
<br>
<hr>
<img src="rintiantta.png">
- 문서 객체 생성 방법
- 정적 생성: 웹 페이지를 처음 실행할 때 HTML 태그로 적힌 문서 객체를 생성하는 것
- 동적 생성: 웹 페이지 실행 중에 자바스크립트를 사용해 문서 객체를 생성하는 것
문서 객체 모델이란?
👉 DOM(Document Object Model). 웹 브라우저가 HTML 파일을 분석하고 출력하는 방식
2. 웹 페이지 실행 순서
- 웹 브라우저는 HTML 코드를 위쪽에서 아래쪽으로 실행한다.
🩶 문서 객체 사용 오류 🩶
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
document.querySelector('h1').style.backgroundColor = 'red';
document.querySelector('h2').style.color = 'red';
</script>
</head>
<body>
<h1>Process - 1</h1>
<h2>Process - 2</h2>
</body>
</html>- 👉 Uncaught TypeError: Cannot read property 'style' of null at html:7 오류가 뜸
- 웹 브라우저가 위쪽에서 아래쪽으로 코드를 순서대로 실행함
👉 script 태그를 읽을 때는 h1, h2 태그가 생성되어 있지 않아서 발생하는 문제
🩶 해결방법 🩶
1) script 태그 위치 옮기기
- script 태그를 h1 태그와 h2 태그 아래에 삽입하기
- 단점: HTML 페이지가 방대해서 유지 보수하기 어렵다.
<!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>
<h1>Process - 1</h1>
<h2>Process - 2</h2>
<script>
document.querySelector('h1').style.backgroundColor = 'red';
document.querySelector('h2').style.color = 'red';
</script>
</body>
</html>2) 이벤트 활용하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload = function() {
document.querySelector('h1').style.backgroundColor = 'red';
document.querySelector('h2').style.color = 'red';
};
</script>
</head>
<body>
<h1>Process - 1</h1>
<h2>Process - 2</h2>
</body>
</html>
'Language > JavaScript + TypeScript' 카테고리의 다른 글
| JavaScript와 TypeScript는 어떤 차이가 있을까? (1) | 2024.11.14 |
|---|---|
| [JavaScript] 문서 객체 선택 및 조작 (0) | 2024.03.12 |
| [JavaScript] 객체 (0) | 2024.03.12 |
| [JavaScript] 함수 실행 우선순위 (0) | 2024.03.12 |
| [JavaScript] 콜백 함수 (0) | 2024.03.09 |
