1. document ready
document ready는 문서가 DOM(Document Object Model)을 모두 로드했을 때 실행되는 이벤트입니다.
즉, DOM이 준비된 시점에 JavaScript 코드를 실행할 수 있도록 합니다.
예시:
jQuery를 사용한 방식
javascript
코드 복사
$(document).ready(function() { console.log("DOM이 준비되었습니다!"); });
Vanilla JavaScript를 사용한 방식
javascript
코드 복사
document.addEventListener("DOMContentLoaded", function() { console.log("DOM이 준비되었습니다!"); });
// jQuery
$(document).ready(function() {
console.log("DOM이 준비되었습니다!");
});
//Vanilla JavaScript를 사용한 방식
document.addEventListener("DOMContentLoaded", function() {
console.log("DOM이 준비되었습니다!");
});- 사용 이유:
- HTML 구조가 모두 로드된 이후에 DOM 요소를 조작할 수 있게 합니다.
- 페이지 전체의 리소스(이미지 등)가 모두 로드되기 전에 실행됩니다.
2. document on
document on은 jQuery에서 **이벤트 위임(Event Delegation)**을 구현하는 데 사용됩니다. 특정 이벤트를 하위 요소에 위임하는 방식으로, 동적으로 추가된 요소에도 이벤트를 적용할 수 있습니다.
예시:
jQuery를 사용한 방식
javascript
코드 복사
$(document).on("click", ".dynamic-button", function() { console.log("동적으로 추가된 버튼이 클릭되었습니다!"); });
- 사용 이유:
- 동적으로 생성된 요소에도 이벤트를 바인딩할 수 있음.
- DOM에 미리 존재하지 않는 요소를 대상으로 이벤트 처리.
3. document와 관련된 이벤트 및 메서드
document 객체와 관련된 다양한 이벤트와 메서드가 있습니다:
이벤트
- DOMContentLoaded
- DOM이 모두 로드되었을 때 발생.
javascript코드 복사document.addEventListener("DOMContentLoaded", function() { console.log("DOM 준비 완료"); }); - load
- 페이지의 모든 리소스(이미지, CSS 등 포함)가 로드되었을 때 발생.
javascript코드 복사window.addEventListener("load", function() { console.log("모든 리소스가 로드되었습니다."); });
beforeunload / unload
- 사용자가 페이지를 떠나기 전에 발생.
document.addEventListener("DOMContentLoaded", function() {
console.log("DOM 준비 완료");
});메서드
- getElementById / querySelector
- DOM 요소를 선택.
const element = document.getElementById("myElement"); const anotherElement = document.querySelector(".myClass"); - createElement
- 새로운 DOM 요소 생성.
const newDiv = document.createElement("div"); newDiv.textContent = "새로운 요소"; document.body.appendChild(newDiv);
4. 비교 정리
기능document readydocument on
| 주요 목적 | DOM 준비 후 실행 | 이벤트 위임을 통한 동적 요소 처리 |
| 사용 시점 | DOMContentLoaded 이벤트 시점 | 이벤트 발생 시 |
| 사용 예시 | 초기 DOM 조작 | 동적 요소(ajax 로드 등) 이벤트 처리 |
5. 추가로 알아두면 좋은 document 관련 기능
- document.title: 현재 문서의 제목을 가져오거나 설정.
- document.cookie: 쿠키를 읽거나 설정.
- document.body: <body> 요소를 직접 참조.
- document.forms: 페이지의 모든 폼을 배열 형태로 반환.
- document.querySelectorAll: CSS 셀렉터로 DOM 요소를 모두 선택.
이외에도 document는 웹 페이지의 구조와 동작을 다루는 핵심적인 객체로, 다양한 속성과 메서드를 제공합니다.
728x90
반응형
'JS' 카테고리의 다른 글
| [JS] 웹의 모든 이미지 한번에 없애 버리기 (1) | 2024.11.15 |
|---|---|
| [JS] 부드러운 애니메이션을 위한 requestAnimationFrame (0) | 2024.11.09 |
| [JS] alert 메세지 띄우고 false 시키기 (4) | 2024.10.08 |
| [JS] 이미지 로딩 지연 방지하기(Image Preload) (5) | 2024.10.04 |
| 캐시 버전명을 혁명적으로 변경해서 웹로딩 빠르게하기! (0) | 2024.09.09 |