이벤트 처리

DOMContentLoaded란?

이 이벤트는 웹 페이지의 HTML 문서가 모두 파싱되어 DOM 트리가 완성된 시점에 발생합니다.

DOMContentLoaded의 의미

• DOM(Document Object Model): HTML 문서가 브라우저에 의해 해석되어 만들어진 구조화된 객체 트리입니다.
• DOMContentLoaded 이벤트
  • 브라우저가 HTML을 모두 읽고, DOM 트리를 완성하면 발생합니다.
  • 이 시점에는 자바스크립트로 모든 HTML 요소를 안전하게 조작할 수 있습니다.
• load 이벤트와의 차이

  • DOMContentLoaded

    • HTML 파싱(구조화)만 끝나면 바로 발생합니다. (이미지, CSS, 외부 스크립트 등 리소스의 로딩은 기다리지 않음)

  • load

    • HTML뿐만 아니라 모든 리소스(이미지, CSS 등)가 완전히 로드된 후 발생합니다.

사용 하는 이유

• 자바스크립트가 HTML 요소를 조작할 때, DOM이 완전히 준비되지 않은 상태라면 오류가 발생할 수 있습니다.
• DOMContentLoaded를 활용하면 HTML 구조가 완성된 후에만 스크립트가 실행되도록 할 수 있어 안전하게 DOM 조작이 가능합니다.

예시

document.addEventListener('DOMContentLoaded', function () {  
  const textarea = document.getElementById('content');  
  const counter = document.getElementById('charCount');  
  
  const updateCount = () => {  
    const length = textarea.value.length;  
    counter.textContent = `${length}/500`;  
  };  
  
  textarea.addEventListener('input', updateCount);  
  
  // 초기값 세팅 (폼 값이 미리 채워져 있을 수도 있으므로)  
  updateCount();  
});