Document 객체 완벽 정리

Document 객체 완벽 정리

 

JavaScript의 Document 객체는 웹 페이지의 전체 문서 구조와 콘텐츠를 나타내며, 웹 페이지에 접근하고 조작하는 데 사용됩니다. 이 객체는 웹 페이지에 있는 모든 요소에 대한 엑세스를 제공하며, HTML 문서의 모든 요소를 포함하는 트리 구조를 형성합니다. Document 객체는 웹 개발에서 매우 중요하며, 웹 페이지의 동적인 구조를 조작하고 변경하는 데 사용됩니다.

 

### Document 객체의 속성과 메서드

1. **속성(Properties)**:
   - `document.body`: 현재 문서의 body 요소에 대한 참조를 반환합니다.
   - `document.head`: 현재 문서의 head 요소에 대한 참조를 반환합니다.
   - `document.title`: 현재 문서의 제목을 나타내는 문자열을 반환하거나 설정합니다.
   - `document.URL`: 현재 문서의 URL을 나타내는 문자열을 반환합니다.
   - `document.documentElement`: 현재 문서의 root 요소에 대한 참조를 반환합니다.
   - 등등.

 

 

2. **메서드(Methods)**:
   - `document.getElementById()`: 주어진 ID를 가진 요소를 찾아 반환합니다.
   - `document.getElementsByClassName()`: 주어진 클래스 이름을 가진 요소들을 모두 찾아 반환합니다.
   - `document.getElementsByTagName()`: 주어진 태그 이름을 가진 요소들을 모두 찾아 반환합니다.
   - `document.querySelector()`: 주어진 CSS 선택자에 일치하는 첫 번째 요소를 반환합니다.
   - `document.querySelectorAll()`: 주어진 CSS 선택자에 일치하는 모든 요소를 반환합니다.
   - 등등.

 

 

### 구체적인 예시와 쓰임새

1. 요소 접근과 조작

###################  JavaScrip  t##################

// HTML에서 <div id="myDiv">를 찾아 텍스트를 변경하는 예제
let myDiv = document.getElementById('myDiv');
myDiv.textContent = 'Hello, World!';

 

###################  #########  t##################

 

 2. 이벤트 처리

###################  JavaScrip  t##################

// 버튼 클릭 시 메시지를 출력하는 예제
let myButton = document.getElementById('myButton');
myButton.addEventListener('click', function() {
    alert('버튼이 클릭되었습니다!');
});

###################  #########  t##################

 

 

3. 동적 요소 생성

###################  JavaScrip  t##################

// 버튼 클릭 시 새로운 요소를 생성하는 예제
let container = document.getElementById('container');
let addButton = document.getElementById('addButton');
addButton.addEventListener('click', function() {
    let newParagraph = document.createElement('p');
    newParagraph.textContent = '새로운 단락입니다.';
    container.appendChild(newParagraph);
});

###################  #########  t##################

 

 

4. 스타일 조작

###################  JavaScrip  t##################

// 버튼 클릭 시 요소의 스타일을 변경하는 예제
let myElement = document.getElementById('myElement');
let changeButton = document.getElementById('changeButton');
changeButton.addEventListener('click', function() {
    myElement.style.color = 'blue';
    myElement.style.fontSize = '20px';
});

 

###################  #########  t##################

 

 

 5. 폼 데이터 접근

###################  JavaScrip  t##################

// 폼 데이터를 읽고 제출하는 예제
let myForm = document.getElementById('myForm');
myForm.addEventListener('submit', function(event) {
    event.preventDefault(); // 폼 제출 기본 동작 방지
    let formData = new FormData(myForm);
    // formData를 이용한 추가 처리
});

###################  #########  t##################

 

*Document 객체의 중요성

Document 객체는 JavaScript로 웹 페이지를 조작하는 데 필수적입니다. 웹 페이지의 요소에 접근하고 수정하여 동적으로 콘텐츠를 변경하거나 이벤트를 처리할 수 있습니다. 이를 통해 사용자 경험을 개선하고 웹 애플리케이션의 기능을 확장할 수 있습니다. 따라서 웹 개발에서는 Document 객체에 대한 이해가 매우 중요합니다.