▶ JavaScript HTML DOM

JavaScript DOM Document

JavaScript DOM Document: 문서 객체 모델의 Document 객체

DOM Document 객체는 웹 페이지의 전체 HTML 문서를 나타내며, JavaScript를 통해 문서의 구조, 내용, 스타일 등을 조작할 수 있는 주요 방법을 제공합니다. Document 객체는 **DOM 트리의 루트(root)**로, 페이지에 있는 모든 요소, 텍스트, 속성 등에 접근하고 수정할 수 있는 메서드와 속성을 포함하고 있습니다.

이 가이드는 JavaScript DOM Document 객체의 기본 개념과 주요 메서드 및 속성을 설명합니다.

1. Document 객체란?

Document 객체는 HTML 문서를 표현하는 객체로, 웹 페이지의 모든 요소에 접근하고 조작할 수 있는 인터페이스를 제공합니다. Document 객체를 사용하여 DOM 요소를 선택하고, 생성하고, 삭제하는 등의 작업을 수행할 수 있습니다.

1.1. Document 객체 생성

Document 객체는 브라우저에 의해 자동으로 생성되며, JavaScript를 통해 접근할 수 있습니다.

console.log(document);  // Document 객체를 출력

*document*는 전역 객체이며, 페이지 로드 시 브라우저가 자동으로 생성합니다.

2. Document 객체의 주요 속성

Document 객체는 여러 속성을 제공하여 웹 페이지의 구조와 내용을 쉽게 탐색할 수 있습니다.

2.1. `document.title`

문서의 제목을 나타내는 속성입니다. 제목은 <title> 태그의 내용을 나타내며, 읽거나 수정할 수 있습니다.

console.log(document.title);  // 현재 문서의 제목 출력
document.title = 'New Document Title';  // 제목 변경

2.2. `document.body`

문서의 <body> 요소를 나타내는 속성입니다. 이 속성을 사용하여 body 내부의 콘텐츠를 조작할 수 있습니다.

console.log(document.body);  // <body> 요소 출력
document.body.style.backgroundColor = 'lightblue';  // 배경색 변경

2.3. `document.documentElement`

문서의 루트 요소를 나타내는 속성입니다. 보통 <html> 요소를 참조합니다.

console.log(document.documentElement);  // <html> 요소 출력

2.4. `document.head`

문서의 <head> 요소를 나타내는 속성입니다. 이 속성을 사용하여 head 내부의 요소를 조작할 수 있습니다.

console.log(document.head);  // <head> 요소 출력

3. Document 객체의 주요 메서드

Document 객체는 HTML 요소를 선택하고, 생성하고, 삭제하는 다양한 메서드를 제공합니다.

3.1. `createElement()`

새로운 HTML 요소를 생성하는 메서드입니다. 이 메서드는 DOM에 추가하기 전에 요소를 동적으로 생성할 수 있게 해줍니다.

const newDiv = document.createElement('div');  // 새로운 <div> 요소 생성
newDiv.textContent = 'Hello, World!';  // 텍스트 추가
document.body.appendChild(newDiv);  // body에 추가

3.2. `getElementById()`

ID 속성으로 특정 요소를 선택하는 메서드입니다. HTML 문서에서 ID는 고유해야 하므로, 이 메서드는 단일 요소를 반환합니다.

const element = document.getElementById('myElement');
console.log(element);  // ID가 'myElement'인 요소 출력

3.3. `querySelector()`

CSS 선택자를 사용하여 첫 번째 일치하는 요소를 선택하는 메서드입니다. 보다 유연하게 요소를 선택할 수 있습니다.

const firstParagraph = document.querySelector('p');  // 첫 번째 <p> 요소 선택
console.log(firstParagraph.textContent);  // 텍스트 출력

3.4. `querySelectorAll()`

CSS 선택자를 사용하여 모든 일치하는 요소를 NodeList로 반환하는 메서드입니다.

const allItems = document.querySelectorAll('.item');  // 모든 클래스가 'item'인 요소 선택
allItems.forEach(item => console.log(item.textContent));

3.5. `remove()`

선택한 요소를 DOM에서 삭제하는 메서드입니다.

const elementToRemove = document.getElementById('removeMe');
elementToRemove.remove();  // 요소 삭제

4. Document 객체와 이벤트

Document 객체는 DOM 요소에 이벤트 리스너를 추가하여 사용자 상호작용을 처리하는 데 중요한 역할을 합니다.

4.1. `addEventListener()`

Document 객체에서 이벤트 리스너를 추가하여 특정 이벤트가 발생했을 때 처리할 작업을 정의할 수 있습니다.

<button id="myButton">Click Me!</button>

<script>
  const button = document.getElementById('myButton');
  button.addEventListener('click', () => {
      alert('Button was clicked!');
  });
</script>

위 코드에서 버튼이 클릭될 때마다 이벤트 리스너가 실행되어 알림 창이 표시됩니다.

5. Document 객체의 사용 예시

Document 객체를 사용하여 웹 페이지의 특정 작업을 수행하는 예시입니다.

5.1. 동적 콘텐츠 추가

사용자가 버튼을 클릭할 때마다 새로운 내용을 추가하는 간단한 예시입니다.

<button id="addButton">Add Item</button>
<ul id="itemList"></ul>

<script>
  const button = document.getElementById('addButton');
  const itemList = document.getElementById('itemList');

  button.addEventListener('click', () => {
      const newItem = document.createElement('li');
      newItem.textContent = 'New Item';
      itemList.appendChild(newItem);  // <ul>에 새로운 항목 추가
  });
</script>

사용자가 "Add Item" 버튼을 클릭하면 새로운 목록 항목이 추가됩니다.

요약

JavaScript DOM Document 객체는 HTML 문서를 프로그래밍적으로 제어할 수 있는 중요한 도구입니다. Document 객체를 사용하면 웹 페이지의 구조와 내용을 조작, 이벤트 처리를 수행할 수 있습니다.

Document 객체의 주요 속성: title, body, documentElement, head 등으로 문서의 기본 정보를 접근합니다.
DOM 요소 선택 메서드: getElementById(), getElementsByClassName(), querySelector() 등을 사용하여 요소에 접근합니다.
DOM 요소 조작 메서드: createElement(), setAttribute(), remove() 등을 사용하여 요소를 생성하거나 삭제합니다.
이벤트 처리: addEventListener()를 사용하여 사용자 상호작용을 감지하고 처리합니다.

DOM Document 객체를 활용하여 동적이고 상호작용적인 웹 애플리케이션을 구축할 수 있습니다.

코딩 스쿨 JavaScript