DOM (Document Object Model) : HTML 문서객체
자바스크립트 페이지는 HTML 문서에 의해 작성되고 CSS에 의해 꾸밈이 이루어진다.
자바스크립트는 동적으로 홈페이지를 관리하는 역할이며 HTML DOM을 사용하면 자바스크립트가 HTML 문서의 모든 요소에 액세스하여 이를 변경할 수 있다.
앞선 내용을 합치면, 자바스크립트는 HTML문서와 웹 브라우저를 객체로 다룬다.
HTML 문서 객체럴 DOM, 웹 브라우저 객체럴 BOM이라고 한다.
HTML DOM
웹 페이지가 로드되면 브라우저는 페이지의 문서 객체 모델(DOM)을 만든다.
HTML DOM은 객체 트리로 구성된다. (즉, DOM에서 모든 HTML요소는 객체로 정의된다.)
문서 노드는 DOM 트리의 최상위에 존재하는 루트 노드로, document 객체를 가리킨다. 루트 노드이므로 모든 요소, 속성, 텍스트 노드에 접근하려면 문서 노드를 통해야한다.
객체 모델 사용하면 자바스크립트는 동적 HTML을 만드는데 다음과 같은 기능을 제공한다.
자바스크립트 기능
1. 페이지의 모든 HTML 요소를 변경할 수 있다.
2. 페이지의 모든 HTML 속성을 변경할 수 있다.
3. 페이지의 모든 CSS 스타일을 변경할 수 있다.
4. HTML요소와 속성을 제거할 수 있다.
5. 페이지의 모든 기존 HTML 이벤트에 반응할 수 있다.
6. 페이지의 새로운 HTML 이벤트를 생성할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>dom</title>
</head>
<body>
<p id="intro">Hello World!</p>
<script>
let myElement = document.querySelector("#intro");
document.write("The text from the intro paragraph is " + myElement.innerHTML);
</script>
</body>
</html>
'웹 프로그래밍 기초 > DOM 문서객체' 카테고리의 다른 글
| document 컬렉션 (0) | 2025.04.11 |
|---|---|
| HTML 요소 검색하기 (0) | 2025.04.11 |
| HTML 요소 추가/삭제하기 (0) | 2025.04.11 |
| HTML 요소 내용 변경하기 (0) | 2025.04.11 |
| HTML 요소 선택하기 (0) | 2025.04.11 |