제이브루스크립트 HTML DOM
HTML DOM을 통해 JavaScript는 HTML 문서의 모든 요소에 접근하고 변경할 수 있습니다.
HTML DOM(문서 객체 모델)
웹 페이지가 로드될 때, 브라우저는 페이지의 문서 객체 모델(DOM)을 생성합니다(Document Object Model)。
HTML DOM 모델은 구조화되었습니다객체 트리:
객체의 HTML DOM 트리

이 객체 모델을 통해 JavaScript는 동적 HTML을 생성하는 모든 힘을 얻습니다:
- JavaScript는 페이지에서 모든 HTML 요소를 변경할 수 있습니다
- JavaScript는 페이지에서 모든 HTML 속성을 변경할 수 있습니다
- JavaScript는 페이지에서 모든 CSS 스타일을 변경할 수 있습니다
- JavaScript는 기존 HTML 요소와 속성을 제거할 수 있습니다
- JavaScript는 새로운 HTML 요소와 속성을 추가할 수 있습니다
- JavaScript는 페이지에서 모든 기존 HTML 이벤트에 반응할 수 있습니다
- JavaScript는 페이지에서 새로운 HTML 이벤트를 생성할 수 있습니다
어떤 것을 배울 수 있습니까
이 튜토리얼의 다음 장에서는 다음과 같은 내용을 배울 수 있습니다:
- HTML 요소의 내용을 어떻게 변경할 수 있습니까
- HTML 요소의 스타일(CSS)을 어떻게 변경할 수 있나요
- HTML DOM 이벤트에 대한 반응을 어떻게 하는가요
- HTML 요소를 추가하고 제거하는 방법
DOM이 무엇인가요?
DOM은 W3C (World Wide Web Consortium) 표준입니다.
DOM은 문서에 접근하는 표준을 정의합니다:
“W3C 문서 객체 모델(DOM)은 플랫폼과 언어에 중립적인 인터페이스로, 프로그램과 스크립트가 문서의 내용, 구조, 스타일을 동적으로 접근하고, 업데이트할 수 있는 것을 가능하게 합니다.”
W3C DOM 표준은 3개의 다른 부분으로 나뉩니다:
- Core DOM - 모든 문서 유형의 표준 모델
- XML DOM - XML 문서의 표준 모델
- HTML DOM - HTML 문서의 표준 모델
HTML DOM이 무엇인가요?
HTML DOM은 HTML의 표준입니다객체모델과프로그래밍 인터페이스입니다. 그것은 다음과 같이 정의합니다:
- 로서객체의 HTML 요소
- 모든 HTML 요소의속성
- 모든 HTML 요소에 접근할 수 있는메서드
- 모든 HTML 요소의이벤트
다른 말로 하면: HTML DOM은 HTML 요소를 얻을 수 있고, 변경할 수 있고, 추가할 수 있고, 제거할 수 있는 표준입니다。