자바스크립트 HTML DOM

HTML DOM을 사용하여, 자바스크립트는 HTML 문서의 모든 요소에 액세스하고, 변경할 수 있습니다.


HTML DOM (Document Object Model)

웹 페이지가 로드될 때, 브라우저는 페이지의 Document Object Model을 생성합니다.

HTML DOM 모델은 객체(Objects)의 트리(tree)로 구성됩니다:

The HTML DOM Tree of Objects

DOM HTML tree

객체 모델(object model)을 사용하여, 자바스크립트는 동적(dynamic) HTML을 만드는데 필요한 모든 힘(power)을 얻을 수 있습니다:

  • 자바스크립트는 페이지의 모든 HTML 요소를 변경할 수 있습니다.
  • 자바스크립트는 페이지의 모든 HTML 속성(attributes)을 변경할 수 있습니다.
  • 자바스크립트는 페이지의 모든 CSS 스타일을 변경할 수 있습니다.
  • 자바스크립트는 기존 HTML 요소 및 속성을 제거할(remove) 수 있습니다.
  • 자바스크립트는 새로운 HTML 요소와 속성을 추가할 수 있습니다.
  • 자바스크립트는 페이지의 모든 기존 HTML 이벤트에 반응할 수 있습니다.
  • 자바스크립트는 페이지에서 새로운 HTML 이벤트를 만들 수 있습니다.

배우게 될 내용

이 자습서의 다음 장에서 배울 것은:

  • HTML 요소의 내용을 변경하는 방법
  • HTML 요소의 스타일 (CSS)을 변경하는 방법
  • HTML DOM 이벤트에 반응하는 방법
  • HTML 요소 추가 및 삭제 방법

DOM이란 무엇인가요?

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

DOM은 문서에 액세스하기 위한 표준을 정의합니다:

“W3C DOM (Document Object Model)은, 프로그램 및 스크립트가 콘텐츠, 구조 및 스타일을 동적으로 액세스하고, 업데이트할 수 있게 해주는, 플랫폼 및 언어 중립적 인터페이스입니다.”

W3C DOM 표준은 세 가지 부분으로 구분됩니다:

  • Core DOM – 모든 문서 유형(types)에 대한 표준 모델
  • XML DOM – XML 문서의 표준 모델
  • HTML DOM – HTML 문서의 표준 모델

HTML DOM이란 무엇인가?

HTML DOM은, HTML에 대한, 표준 객체(object) 모델 및 프로그래밍 인터페이스 (programming interface)입니다. 정의하는 것은:

  • 객체(objects)로서의 HTML 요소
  • 모든 HTML 요소의 속성(properties)
  • 모든 HTML 요소에 액세스하기 위한 메소드(methods)
  • 모든 HTML 요소를 위한 이벤트(events)

즉:HTML DOM은 HTML 요소를 가져오고, 변경하고, 추가하거나 삭제하는 방법에 대한 표준입니다.

출처: JavaScript HTML DOM

Leave a comment