웹개발 필수개념! DOM이 뭔가요? (+ Web API)
DOM (Document Object Model) 이란?
웹 페이지(HTML 문서)의 구조를 트리(Tree) 형태로 표현하는 모델.
HTML 요소들을 JavaScript로 조작할 수 있도록 해주는 인터페이스다.
📌 쉽게 말하면?
HTML 문서를 객체(Object)처럼 다룰 수 있게 해주는 모델
JavaScript가 HTML 요소를 변경, 삭제, 추가할 수 있도록 하는 구조
브라우저가 HTML을 이해하는 방식
DOM의 기본 구조
DOM은 트리(Tree) 구조로 되어 있다.
<!DOCTYPE html>
<html>
<head>
<title>DOM 예제</title>
</head>
<body>
<h1 id="title">Hello, DOM!</h1>
<p class="content">이것은 문단입니다.</p>
</body>
</html>📌 위 HTML을 DOM 구조로 표현하면?
document
├── <html>
│ ├── <head>
│ │ ├── <title>DOM 예제</title>
│ ├── <body>
│ ├── <h1 id="title">Hello, DOM!</h1>
│ ├── <p class="content">이것은 문단입니다.</p>HTML 문서 전체를 document 객체로 관리하고, 각 요소(<html>, <body> 등)가 노드(Node)로 표현됨.
DOM은 이 트리 전체를 말하고, 이를 구성하는 요소들 하나하나를 Node라고 부른다.
DOM 조작방법 (JavaScript)
1. 요소 선택 (DOM 접근)
📌 방법 1: getElementById() - ID로 선택
let title = document.getElementById("title");
console.log(title.innerText); // "Hello, DOM!"📌 방법 2: querySelector() - CSS 선택자로 선택
let paragraph = document.querySelector(".content"); // 첫 번째 .content 클래스 선택
console.log(paragraph.innerText); // "이것은 문단입니다."📌 방법 3: getElementsByTagName() - 태그명으로 선택
let paragraphs = document.getElementsByTagName("p"); // 모든 <p> 태그 선택
console.log(paragraphs[0].innerText); // "이것은 문단입니다."이벤트 리스너 (Event Listener)
📌 버튼 클릭 이벤트 추가
<button id="btn">클릭하세요</button>
<script>
document.getElementById("btn").addEventListener("click", function() {
alert("버튼이 클릭되었습니다!");
});
</script>웹 개발에서 사용되는 document 객체는 브라우저에서 제공하는 window 객체의 한 요소다. 그리고 이 window.document 객체를 DOM이라 분류한다.
우리가 웹사이트에 접속하면 브라우저가 html 문서를 읽어들인다.
html코드가 어떤 제품의 설계도라면 브라우저는 공장이라고 가정을 해보자.
공장에서는 이 설계도를 해석하는 과정을 거치는데 이를 '파싱'이라고 부른다. 그리고 그 결과물로 DOM이라는 기계가 만들어지는 것.
우리가 자바스크립트로 웹페이지의 요소들을 제어할 수 있는 건 이것들 하나하나가 모두 API이기 때문이다.
API를 간단히 설명하자면 <네가 이렇게 주문하면 내가 요렇게 해줄게!> 라고 메뉴판처럼 만들어놓은 거라고 할 수 있다.
Web API란?
JavaScript가 브라우저와 상호작용할 수 있도록 해주는 기능들의 모음.
DOM API도 Web API의 한 부분이다.
BOM (Browser Object Model) 이란?
웹 브라우저와 관련된 객체들을 제공하여 JavaScript가 브라우저를 조작할 수 있도록 해주는 모델.
✅ DOM이 HTML 문서를 조작하는 모델이라면 BOM은 브라우저 자체를 조작하는 모델이다.
✅ BOM을 사용하면 창 크기 변경, 새 창 열기, URL 변경, 브라우저 정보 가져오기 등이 가능.
1. BOM의 주요 객체
- window 브라우저 창 전체를 나타내는 최상위 객체
- navigator 브라우저 정보(이름, 버전, OS 등) 제공
- screen 사용자의 화면(해상도, 색상 깊이 등) 정보 제공
- location 현재 페이지의 URL 정보 제공 및 변경 가능
- history 사용자의 브라우저 방문 기록 관리
2. 주요 BOM 객체의 사용법
1️⃣ window 객체 (브라우저 창 관련)
window 객체는 브라우저 창 전체를 나타내는 최상위 객체로 생략이 가능.
-
새 창 열기 (window.open())
window.open("https://www.google.com", "_blank", "width=800, height=600"); -
현재 창 닫기 (window.close())
window.close();
2️⃣ screen 객체 (화면 정보)
사용자의 화면 해상도 및 색상 정보 제공.
- 화면 해상도 정보
console.log(screen.width); // 화면 너비
console.log(screen.height); // 화면 높이
console.log(screen.availWidth); // 실제 사용 가능한 너비
console.log(screen.availHeight); // 실제 사용 가능한 높이3️⃣ location 객체 (URL 관련)
현재 웹페이지의 URL 정보를 가져오거나 변경할 수 있음.
- 현재 URL 정보 가져오기
console.log(location.href); // 현재 페이지의 URL
console.log(location.hostname); // 도메인 이름
console.log(location.pathname); // 현재 경로
console.log(location.search); // URL의 쿼리스트링 (?뒤의 값들)-
다른 페이지로 이동 (location.href)
location.href = "https://www.google.com"; -
페이지 새로고침
location.reload(); // 새로고침
4️⃣ history 객체 (브라우저 방문 기록)
사용자의 방문 기록을 관리할 수 있음.
- 뒤로 가기 & 앞으로 가기
history.back(); // 이전 페이지로 이동
history.forward(); // 다음 페이지로 이동- 특정 페이지로 이동
history.go(-2); // 2페이지 뒤로 가기
history.go(1); // 1페이지 앞으로 가기