JavaScript HTML DOM
HTML DOM 으로 JavaScript 는 HTML 문서(document)의 모든 요소에 접근해서 수정이 가능하다.
The HTML DOM (Document Object Model)
웹페이지가 로드될 때, 브라우저는 페이지의 Document Object Model 을 생성한다.
HTML DOM 은 Objects 의 트리로 구성된다.:
The HTML DOM Tree of Objects
객체 모델로, JavaScript는 동적인 HTML을 생성하는 데 필요한 모든 힘을 갖게 됩니다.:
- JavaScript 페이지의 모든 HTML 요소를 변경할 수 있습니다
- JavaScript 페이지의 모든 HTML 속성을 변경할 수 있습니다
- JavaScript 페이지의 모든 CSS 스타일을 변경할 수 있습니다
- JavaScript 기존의 HTML 요소와 속성을 제거 할 수 있습니다
- JavaScript 새로운 HTML 요소와 속성을 추가 할 수 있습니다
- JavaScript 페이지의 모든 기존의 HTML 이벤트에 반응 할 수 있습니다
- JavaScript 페이지에 새로운 HTML 이벤트를 만들 수 있습니다
What You Will Learn
In the next chapters of this tutorial you will learn:
- How to change the content of HTML elements
- How to change the style (CSS) of HTML elements
- How to react to HTML DOM events
- How to add and delete HTML elements
What is the DOM?
DOM 은 W3C (World Wide Web Consortium) 표준 입니다.
DOM 은 문서(documents)에 접근하기 위한 표준을 정의합니다. :
"W3C Document Object Model (DOM) 는 프로그램과 스크립트가 동적으로 문서의 내용, 구조, 스타일에 접근하고 업데이트 할 수있는 플랫폼 및 언어 중립적인 인터페이스입니다."
W3C DOM 표준은 3가지 부분으로 나누어진다. :
- Core DOM - standard model for all document types
- XML DOM - standard model for XML documents
- HTML DOM - standard model for HTML documents
What is the HTML DOM?
HTML DOM 은 HTML에 대한 표준 객체(object) 모델이며, 프로그래밍 인터페이스(programming interface)이다. 다음과 같이 정의 된다:
- HTML 요소를 객체(objects)로 정의
- 모든 HTML 요소의 속성(properties) 정의
- 모든 HTML 요소를 엑세스 할 메서드(methods) 정의
- 모든 HTML 요소의 이벤트(events) 정의
다시 말해서: HTML DOM 은 HTML 요소(elements)를 얻고, 변경하고, 추가하고, 삭제하는 방법에 대한 표준이다.