[javascript] 53. HTML DOM - 자바스크립트 강좌 JS / CSE

JavaScript HTML DOM

 HTML DOM에서, 자바스크립트는 모든 HTML 문서를 접근하고 변경 할 수 있습니다.

1. The HTML DOM (Document Object Model)

 웹페이지가 로드될 때, 브라우저는 페이지의 문서 객체 모델(Document Object Model)을 생성합니다.

 HTML DOM은 객체의 트리 형태 구조로 되어 있습니다:

 

  객체 모델에서, 자바스크립트는 동적인 HTML을 만들어서 모든 걸 가져올 수 있습니다:

   - 페이지 내의 모든 HTML 요소를 변경 할 수 있습니다.

   - 페이지 내의 모든 HTML 속성을 변경 할 수 있습니다.

   - 페이지 내의 모든 CSS 스타일을 변경 할 수 있습니다.

   - 존재하는 HTML 요소와 속성을 제거 할 수 있습니다.

   - 새로운 HTML 요소와 속성을 추가 할 수 있습니다.

   - 페이지 내의 모든 존재하는 HTML 이벤트에 대해 반응 할 수 있습니다.

   - 페이지 내의 새로운 HTML 이벤트를 생성 할 수 있습니다.

2. What You Will Learn

 아래와 같은 것을 배웁니다:

  - HTML 요소의 내용물을 변경

  - HTML 요소의 CSS 스타일 변경

  - HTML DOM 이벤트의 반응

  - HTML 요소의 추가와 삭제

3. What is the DOM?

 DOM은 W3C(World Wide Web Consortium) 표준 입니다.

 

 DOM은 문서의 접근을 위한 표준을 정의 합니다:

 "The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."

 W3C DOM 표준은 3가지 부분으로 나뉘어 집니다:

  - Core DOM - 모든 문서 타입의 표준 모델

  - XML DOM - XML 문서의 표준 모델

  - HTML DOM - HTML 문서의 표준 모델

4. What is the HTML DOM?

 HTML DOM은 표준 객체 모델이고 HTML을 위한 프로그래밍 인터페이스 입니다:

  - 객체 로서의 HTML 요소

  - 모든 HTML 요소의 속성

  - 접근 가능한 모든 HTML 요소의 메소드

  - 모든 HTML 요소의 이벤트