**DOM(Document Object Model, 문서 객체 모델)**은 웹 브라우저가 HTML 문서를 파싱하여, 자바스크립트가 접근하고 조작할 수 있도록 만든 객체의 트리 구조입니다.
1. DOM 트리 구조
브라우저는 HTML 태그들을 **노드(Node)**라는 객체로 변환하여 상하 부모-자식 계층 구조를 만듭니다.
document: DOM 트리의 최상위 루트 객체.element node:<h1>,<p>,<div>등의 HTML 태그 요소.text node: 태그 안에 적힌 글자 데이터.
2. DOM 요소 탐색하기 (Selection)
현대 자바스크립트에서는 CSS 선택자 스타일을 그대로 사용하는 querySelector 방식을 주로 사용합니다.
// 아이디로 탐색
const title = document.querySelector('#main-title');
// 클래스로 첫 번째 요소 탐색
const button = document.querySelector('.btn-submit');
// 해당되는 모든 요소를 NodeList 배열 형태로 선택
const items = document.querySelectorAll('.menu-item');
3. DOM 요소 내용 및 스타일 변경
const heading = document.querySelector('h1');
// 텍스트 내용 변경
heading.textContent = "반갑습니다!";
// CSS 스타일 직접 변경
heading.style.color = "#ff6b35";
// HTML 클래스 추가/제거
heading.classList.add('active');
heading.classList.remove('hidden');
4. 자주 묻는 질문 (Q&A)
Q. innerHTML 과 textContent 의 차이와 보안상 주의점은?
A. textContent는 순수 글자만 안전하게 변경하지만, innerHTML은 HTML 태그를 직접 파싱해 삽입합니다. 사용자가 입력한 데이터를 innerHTML로 그냥 넣으면 악성 스크립트가 실행되는 XSS(크로스 사이트 스크립팅) 공격 위험이 생깁니다.