DOM(Document Object Model)

DOM이 뭔지 설명할 수 있나요?

Table Of Contents

TL;DR

DOM(Document Object Model)이란?

DOM(Document Object Model)은 HTML 또는 XML 문서의 구조를 표현하는 인터페이스이다.

cf) DOM의 표준 정의를 보고 싶으면 https://dom.spec.whatwg.org/ 을 참고하자.

DOM tree와 Node

DOM 인터페이스의 예시

Node 인터페이스

속성

내가 코딩할 때 자주 쓴 대표적인 속성만 몇 가지 알아보겠다...ㅎㅎ

Node를 상속하는 객체들은 당연히 아래 속성들과 메서드들을 사용할 수 있다.

메서드

Document 인터페이스

Document 인터페이스는 브라우저에 로드된 웹 페이지를 나타내며, 페이지 콘텐츠(DOM tree)의 진입점이 된다.

DOMContentLoaded 이벤트

DOMContentLoaded 이벤트는 HTML 문서가 완전히 파싱되고 모든 지연된 스크립트(<script defer src="…">, <script type="module">)들이 다운로드되고 실행될 때 발생한다. 단, 이미지, 서브프레임, 비동기 스크립트들의 로드는 기다리지 않는다.

참고