Document 객체란?
Document 객체는 웹 브라우저에서 HTML 문서를 나타내는 최상위 객체로, DOM(Document Object Model) 트리의 루트(root) 역할을 합니다.
모든 HTML 요소들은 document 객체를 통해 접근할 수 있으며, 이를 활용하여 요소 검색, 수정, 삭제, 추가 등의 조작을 수행할 수 있습니다.
1. DOM 트리의 루트 (Root) 노드
웹 문서는 DOM 트리로 표현되며, 이 트리의 최상위 노드가 바로 document 객체입니다.
즉, HTML 문서 전체를 다룰 때 가장 먼저 접근해야 하는 객체가 document입니다.
📌 예제: 현재 HTML 문서의 루트 요소(html) 가져오기
console.log(document.documentElement); // <html> 요소 출력2. HTML 요소에 접근하기
document 객체를 활용하면 특정 HTML 요소에 쉽게 접근할 수 있습니다.
📌 대표적인 요소 접근 메서드
document.getElementById("myId"); // 특정 ID를 가진 요소 선택
document.getElementsByClassName("myClass"); // 특정 클래스명을 가진 요소 선택
document.getElementsByTagName("p"); // 특정 태그명을 가진 요소 선택
document.querySelector(".myClass"); // CSS 선택자를 이용해 요소 선택 (첫 번째 요소)
document.querySelectorAll("div"); // CSS 선택자를 이용해 모든 요소 선택3. 문서 정보 및 속성 가져오기
HTML 문서의 정보(타이틀, URL, 문자 인코딩 등)를 가져올 수도 있습니다.
📌 예제: 문서 정보 가져오기
console.log(document.title); // 현재 문서의 제목 가져오기
console.log(document.URL); // 현재 문서의 URL 가져오기
console.log(document.charset); // 현재 문서의 문자 인코딩 가져오기
console.log(document.lastModified); // 문서의 마지막 수정 시간 가져오기4. HTML 요소 조작하기
HTML 문서의 내용을 동적으로 변경할 수도 있습니다.
📌 예제: 특정 요소의 내용을 변경하기
document.getElementById("demo").innerHTML = "새로운 텍스트!";📌 예제: 새로운 요소 추가하기
const newDiv = document.createElement("div"); // <div> 요소 생성
newDiv.textContent = "새로운 DIV 요소"; // 내용 추가
document.body.appendChild(newDiv); // 문서의 body에 추가5. 이벤트 처리
document 객체를 활용하여 다양한 이벤트를 감지하고 처리할 수 있습니다.
📌 예제: 클릭 이벤트 추가
document.getElementById("btn").addEventListener("click", function () {
alert("버튼이 클릭되었습니다!");
});📌 예제: 키보드 이벤트 감지
document.addEventListener("keydown", function (event) {
console.log("눌린 키:", event.key);
});📌 정리
| 기능 | 설명 |
| 문서의 루트 요소 가져오기 | document.documentElement |
| 특정 요소 선택 | document.getElementById() |
| 문서 정보 확인 | document.title, document.URL |
| HTML 내용 변경 | .innerHTML |
| 요소 추가 | document.createElement() |
| 이벤트 처리 | addEventListener() |
💡 결론
document 객체는 DOM 트리의 최상위 루트로, HTML 문서를 조작하고 관리하는 핵심 역할을 합니다.
이를 활용하면 HTML 요소 접근, 수정, 이벤트 처리 등을 쉽게 구현할 수 있으며, 동적인 웹 페이지를 만들 때 필수적인 개념입니다. 🚀
반응형
'Frondend > JavaScript' 카테고리의 다른 글
| [JavaScript] Closure 란? (0) | 2025.03.29 |
|---|---|
| [JavaScript] JavaScipt Module System(모듈 시스템) (0) | 2025.02.15 |
| [JavaScript] preventDefault() 와 stopPropagation() (0) | 2025.02.15 |
| [JavaSciprt] 이벤트 위임 (0) | 2025.02.15 |
| [JavaScript] 구조 분해 할당(Destructuring Assignment) (1) | 2025.02.13 |