자바스크립트 (06.13) 13주차 | Notion

📘 8장. HTML DOM 객체 이해와 활용

🎯 학습 목표

HTML DOM의 개념과 필요성 이해
DOM 트리 구조와 브라우저 렌더링 과정 이해
DOM 객체 조작 및 동적 콘텐츠 생성·삭제 가능

🔹 1. DOM이란?

DOM (Document Object Model): HTML 문서를 객체 트리로 표현한 것
DOM 트리는 부모-자식 관계로 구성된 노드 구조
각 HTML 태그 → **DOM 객체(노드)**가 됨
document는 DOM 트리의 루트

🔹 2. DOM 객체 구조와 요소

구성 요소	설명
프로퍼티	HTML 태그의 속성 값
메소드	DOM 객체 조작 함수 (`setAttribute()`, `appendChild()` 등)
컬렉션	자식 DOM 객체들의 집합
이벤트 리스너	`onclick`, `onload`, `onkeydown` 등
CSS 스타일	`style` 프로퍼티로 접근 가능

🔹 3. DOM 객체 조작 예시

✅ `getElementById()`로 객체 가져오기

let p = document.getElementById("firstP");
p.style.color = "red";