DOM이란? 자바스크립트로 HTML을 제어하는 원리 쉽게 이해하기
HTML은 웹 문서를 만드는 언어입니다.
하지만 단순히 정적인 HTML만으로는 사용자의 입력이나 페이지의 반응을 처리할 수 없습니다.
그래서 JavaScript가 필요합니다!
JavaScript를 통해 HTML 요소를 동적으로 조작할 수 있는 기반이 바로 DOM(Document Object Model)입니다.
📄 브라우저와 렌더링 엔진
HTML 파일을 브라우저로 열면, 렌더링 엔진이 HTML 문서를 한 줄씩 해석하고 객체화합니다.
이렇게 객체화된 문서를 JavaScript로 제어할 수 있게 만든 것이 DOM(Document Object Model)입니다.
🌳 DOM 트리 구조
DOM은 Tree 구조를 갖습니다.
HTML 문서는 태그마다 부모-자식 관계를 가지게 되고, 이러한 구조를 시각화한 것을 DOM Tree라고 부릅니다.
예를 들어, 아래와 같은 HTML이 있다고 할 때:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>제목</h1>
<p>내용</p>
<div>
<ul>
<li>목록1</li>
<li>목록2</li>
<li>목록3</li>
</ul>
</div>
</body>
</html>이 문서는 다음과 같은 DOM 트리로 구조화됩니다:
📌 DOM, BOM, 그리고 CSSOM
- DOM (Document Object Model): HTML 문서를 JavaScript로 조작할 수 있도록 만든 구조
- BOM (Browser Object Model): 브라우저 자체를 제어할 수 있도록 하는 모델 (뒤에서 자세히 설명 예정)
- CSSOM (CSS Object Model): JavaScript로 CSS를 조작할 수 있도록 만든 구조
📍 Document 객체 = DOM의 시작점
JavaScript에서 DOM을 제어하기 위한 진입점은 document입니다.
document는 HTML 문서 전체를 가리키며, DOM 트리의 최상위 노드 역할을 합니다.
🔍 DOM 트리 탐색 예제
document.getRootNode(); // 최상위 루트 노드 (document)
document.childNodes; // document 하위의 노드들이렇게 점점 내려가며 HTML 요소를 찾아갈 수 있습니다:
✏️ DOM 요소 수정 방법
가장 흔한 DOM 조작 방법은 querySelector()와 textContent를 사용하는 것입니다.
let domObject = document.querySelector('h1'); // h1 요소 선택
domObject.textContent = '변경이라우~'; // 텍스트 변경참고: 처음에는 오타로
textContext를 사용했는데도 작동한 건… 브라우저가 친절하게 무시해 준 걸 수도 있어요. 😅
정확한 속성은textContent입니다!
✅ 정리
- DOM은 HTML 문서를 객체로 표현한 구조로, JavaScript가 이를 조작할 수 있게 함
- document 객체를 통해 DOM 요소에 접근 가능
- querySelector, textContent 등을 활용하여 DOM을 쉽게 제어할 수 있음
📚 참고
이미지와 강의내용을 인용하여 정리하였습니다!
덕분에 DOM의 개념을 훨씬 잘 이해할 수 있었습니다! 🙏
