📌 1. DOM (Document Object Model) 이란?
HTML 문서를 트리 형태로 표현한 객체 구조
즉, 웹페이지의 모든 요소(태그, 텍스트 등)를 자바스크립트가 다룰 수 있게 만든 구조입니다.
✅ DOM 구조 이해하기
예를 들어 이 HTML이 있다면:
<!DOCTYPE html>
<html>
<body>
<h1 id="title">Hello</h1>
<p>Welcome!</p>
</body>
</html>👉 이건 내부적으로 트리 형태의 객체로 표현됩니다.
Document
└─ html
└─ body
├─ h1#title
└─ pDOM은 이 트리 구조에서 노드(Node) 라고 부르는 요소들을 다루는 API를 제공합니다.
✅ DOM을 JavaScript로 조작하는 예시
<h1 id="title">안녕하세요</h1>
<script>
const title = document.getElementById("title"); // DOM 접근
title.textContent = "DOM 조작 완료!"; // 내용 변경
title.style.color = "blue"; // 스타일 변경
</script>✅ DOM을 다루는 주요 메서드들
🔧 2. Web API란?
브라우저가 JavaScript를 통해 제공하는 기능/서비스들의 모음
브라우저에는 DOM 말고도 수많은 기능이 내장되어 있고,
이 기능을 JS로 사용하게 해주는 API들이 Web API입니다.
✅ Web API의 예시들
✅ 예시 1: Fetch API
fetch("https://api.example.com/data")
.then(response => response.json())
.then(data => console.log("데이터:", data))
.catch(err => console.error("에러:", err));✅ 예시 2: 로컬스토리지 API
// 저장
localStorage.setItem("username", "kanna");
// 읽기
const name = localStorage.getItem("username");
// 삭제
localStorage.removeItem("username");📌 DOM vs Web API 차이
🎯 결론 요약
🧱 DOM은 웹페이지를 구성하고 조작하는 JS의 기본 도구이고,
🛠️ Web API는 브라우저가 제공하는 다양한 기능(저장, 통신, 알림 등)을 JS에서 사용할 수 있게 해주는 도구입니다.
처음이라서 그래 가본적 없던 길에