[HTML] HTML DOM(Document Object Model)

HTML DOM(Document Object Model)이란?

DOM은 W3C(World Wide Web Consortium) 표준으로 DOM은 문서를 접근하기 위한 표준을 정의합니다.
W3C DOM은 프로그램들과 스크립트들이 콘텐츠나 구조, 문서의 스타일에 동적으로 접근하고 수정하기 위한 플렛폼이자 언어 중립적 인터페이스입니다. W3C DOM 표준은 3개로 나뉘어져 있습니다.

• Core DOM - 모든 문서 종류에 대한 표준 모델
• XML DOM - XML 문서에 대한 표준 모델
• HTML DOM - HTML 문서에 대한 표준 모델

DOM은 문서의 구조화된 표현 제공을 통해, 프로그래밍 언어가 DOM구조에 접근할 수 있는 방법을 제공하여 그들의 문서 구조 및 스타일이나 내용등을 변경할 수 있게 합니다. 우리는 그 중 HTML DOM에 대해 자세히 알아보겠습니다.

HTML DOM이란?

HTML DOM은 기본 오브젝트 모델이자, HTML을 위한 프로그래밍 인터페이스이며, 다음과 같이 정의됩니다.

• HTML 요소는 object
• HTML 요소의 property
• HTML 요소에 접근할 수 있는 method
• HTML 요소를 위한 event
  HTML DOM을 이용하면, JavaScript는 HTML 문서의 모든 요소들에 접근하고 수정할 수 있습니다. 웹페이지가 로드될 때, 브라우저는 해당 페이지에 해당하는 DOM(Document Object Model, HTML 문서에 대한 모델)을 생성합니다.
• HTML DOM 모델은 오브젝트들의 트리 형태로 만들어집니다.

이 오브젝트 모델을 이용해서, JavaScirpt는 동적인 HTML을 생성할 수 있게 됩니다.

• JavaScript는 페이지에 있는 모든 HTML 요소를 수정할 수 있습니다.
• JavaScript는 페이지에 있는 모든 HTML 속성을 수정할 수 있습니다.
• JavaScript는 페이지에 있는 모든 CSS 스타일을 수정할 수 있습니다.
• JavaScript는 존재하는 HTML 요소와 HTML 속성을 제거할 수 있습니다.
• JavaScript는 새로운 HTML 요소와 속성을 추가할 수 있습니다.
• JavaScript는 페이지에 존재하는 모든 HTML 이벤트와 상호작용할 수 있습니다.
• JavaScript는 페이지에 새로운 HTML 이벤트를 생성할 수 있습니다.
  다시 말하자면, HTML DOM은 HTML 요소를 어떻게 얻고, 수정하고, 추가하고, 삭제하는지에 대한 표준입니다.

JavaScript를 이용한 HTML DOM의 접근 및 조작

웹페이지는 일종의 문서로, 이 문서는 웹 브라우저를 통해 그 내용이 해석되어 웹 브라우저 화면에 나타나거나 HTML 소스 자체로 나타납니다. DOM 은 동일한 문서를 표현하고, 저장하고, 조작하는 방법을 제공합니다. 웹 페이지의 객체 지향 표현으로 자바스크립트와 같은 스크립팅 언어를 이용해 DOM 을 수정할 수 있습니다.

var paragraphs = document.getElementsByTagName("P");
// paragraphs[0] is the first <p> element
// paragraphs[1] is the second <p> element, etc.
alert(paragraphs[0].nodeName);

DOM은 구조화된 node의 property와 method를 갖고 있는 objects로 문서를 표현합니다. 이들은 웹페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당합니다. 예를 들어 document object 는 document 자체를 의미하며, table object 는 HTML table 에 접근하기 위한 HTMLTableElement DOM 인터페이스를 구현한 것입니다. 이 문서는 Gecko 기반의 브라우저에서 구현된 DOM 에 대한 object-by-object reference를 제공합니다.

참고 자료

• (1.5부) DOM이 뭐죠? jQuery는 왜들 그렇게 좋아한대요? (DOM 공부를 매우 권함 #0)
• DOM, BOM 이란? (자바스크립트 요약)