<aside> 💡 목차

</aside>

1. DOM의 정의

1) 문서 객체

• HTML 안에서는 요소(Element)로 불리는 객체를 JS에서는 문서 객체라고 불림

2) 문서 객체 모델(Document Object Model: DOM)

• 웹 페이지를 프로그래밍 방식으로 조작하고 관리할 수 있는 인터페이스(상호작용, 규약)

2. DOM의 사용

• JS를 사용하여 DOM에 접근하는 경우 웹 페이즈이 요소를 선택, 추가, 수정, 삭제하는 데 사용할 수 있는 메소드와 속성에 접근이 가능
• CRUD - Create(생성), Read(읽기), Update(수정), Delete(삭제)

3. DOMContentLoaded 이벤트

• 문서 객체를 조작할 때 사용하는 이벤트
• HTML의 모든 문서 구조(내용)가 모두 로드된 이후에 해당 이벤트가 발생
• 웹 브라우저가 문서 객체를 모두 읽고 나서 실행하는 이벤트
• 문서 객체가정립된 이후에 스크립트(콜백함수)가 실행되기 때문에 오류 방지 가능

document.addEventListener('DOMContentLoaded', () => {
  // 해당 위치에 DOM 조작 코드를 작성
});

4. 문서 객체 가져오기

1) document.body