<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