나만의 연습장

DOM이란? 본문

용어

DOM이란?

My-Berr 2018. 11. 20. 14:42

DOM이란?


문서 객체 모델(The Document object Model ; DOM)은 HTML, XML 문서의 프로그래밍 interface이다. DOM은 문서의 구조화된 표현 (structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM은 구조화된 nodes와 property와 method를 갖고 있는 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결 시켜주는 역할을 담당한다.


웹 페이지는 일종의 문서(document)다. 이 문서는 웹 브라우저를 통해 그 내용이 해석되어 웹 브라우저 화면에 나타나거나 HTML 소스 자체로 나타나기도 한다. 동일한 문서를 사용하여 이처럼 다른 형태로 나타날 수 있다는 점에 주목할 필요가 있다. DOM은 동일한 문서를 표현하고, 저장하고, 조작하는 방법을 제공한다. DOM은 웹 페이지의 객체 지향 표현이며, 자바스크립트와 같은 스크립팅 언어를 이용해 DOM을 수정할 수 있다.


W3C DOM, WHATWG DOM 표준은 대부분의 브라우저에서 DOM을 구현하는 기준이다. 많은 브라우저들이 표준 규약에서 제공하는 기능 외에도 추가적인 기능들을 제공하기 때문에 사용자가 작성한 문서들이 각기 다른 DOM이 적용된 다양한 브라우저 환경에서 동작할 수 있다는 사실을 항상 인지하고 있어야 한다.


예를 들어, 표준 DOM에서는 문서 안에서 모든 <P> elements에 대한 list를 리턴하는 getElementsByTagName method를 정의하고 있다.


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


웹 페이지를 수정하거나 생성하는데 사용되는 모든 property, method, event 들은 objects로 구성된다. 예를 들어 document object는 document 자체를 의미하며, table object는 HTML table에 접근하기 위한 HTMLTableElement DOM 인터페이스를 구현한 것이다. 이 문서는 Gecko 기반의 브라우저에서 구현된 DOM에 대한 object-by-object reference 를 제공한다.




DOM과 자바스크립트


위에서 사용된 예제는 JavaScript이다. 위의 예제는 자바스크립트로 작성되었지만 문서(document)와 문서의 요소(element)에 접근하기 위해 DOM이 사용되었다. DOM은 프로그래밍 언어는 아니지만 DOM이 없어다면 자바스크립트 언어는 웹 페이지 또는 XML페이지 및 요소들과 관련된 모델이나 개념들에 대한 정보를 갖지 못하게 된다. 문서의 모든 element -전체 문서, 헤드, 문서 안의 table, table header, table cell 안의 text - 는 문서를 위한 documnet object model의 한 부분이다. 때문에, 이러한 요소들을 DOM과 자바 스크립트와 같은 스크립팅 언어를 통해 접근하고 조작 할 수 있는 것이다.


초창기에는 자바스크립트와 DOM가 밀접하게 연결되어 있었지만 나중에는 각각 분리되어 발전해 왔다.

페이지 콘텐츠(the page comtent)는 DOM에 저장되고 자바스크립트를 통해 접근하거나 조작할 수 있다.


API (web or XML page) = DOM + JS (scripting language)

DOM은 프로그래밍 언어와 독립적으로 디자인되었다. 때문에 문서의 구조적인 표현은 단일 API를 통해 이용가능하다. 이 문서에서는 자바스크립트를 주로 사용하였지만, DOM의 구현은 어떠한 언어에서도 가능하다. 
아래의 예제는 파이썬을  사용한 것이다.


 

# Python DOM example
import xml.dom.minidom as m
doc = m.parse("C:\\Projects\\Py\\chap1.xml");
doc.nodeName # DOM property of document object;
p_list = doc.getElementsByTagName("para");




DOM에 어떻게 접근할 수 있는가?


DOM을 사용하기 위해 특별히 해야할 일은 없다. 각각의 브라우저는 자신만의 방법으로 DOM을 구현하였으며, 이로 인해 실제 DOM 기준을 따르는지 확인해야 하는 번거러움이 발생하였다. 모든 웹 브라우저는 스크립트가 접근할 수 있는 웹 페이지를 만글기 위해 어느 정도의 DOM을 항상 사용한다.


스크립트를 작성할때 (<script>), 문서 자체를 조작하거나 문서의 children을 얻기위해 document 또는 window elements를 위한 API를 즉시 사용할 수 있다. DOM 프로그래밍은 아래처럼 window object로 부터 alert()함수를 사용하여 alert message를 표시하는 매우 간단한 것일 수도 있고 다음번 예제처럼 새로운 content를 작성하는 복잡한 DOM이 될수 도 있다.


 <body onload="window.alert('welcome to my home page!');">


아래의 자바스크립트는 문서가 로드될 때 (모든 DOM을 사용할 수 있게 되는 때)실행되는 함수를 정의하였다.

이 함수는 새로운 H1 element를 생성하고, element에 text를 추가하며, H1을 이 문서의 트리에 추가한다.


  <head>
    <script>
       // run this function when the document is loaded
       window.onload = function() {

         // create a couple of elements in an otherwise empty HTML page
         var heading = document.createElement("h1");
         var heading_text = document.createTextNode("Big Head!");
         heading.appendChild(heading_text);
         document.body.appendChild(heading);
      }
    </script>
  </head>
  <body>
  </body>
</html>





중요한 데이터 타입들


이 문서는 objects 와 types 을 최대한 간단하게 설명하려 한다. API 에는 우리가 반드시 알고 있어야 할 수많은 data types 이 있다는 사실을 염두해 두기 바란다.  이 문서에서는 nodes 는 elements 로, 노드의 arrays 는 nodeLists(또는 elements), attribute 노드들은 attributes 로 표현하였다.

아래의 표는 이러한 data types 에 대한 간략한 설명이다.

document

member 가 document type 의 object 를 리턴할 때(예를 들어 element의 ownerDocument property 는 그것이 속해 있는 document 를 return 한다. ), 이 object 는 root document object 자체이다. 는 document object 에 대한 설명은 DOM documentReference 챕터를 참조하라.

element

element 는 DOM API 의 member 에 의해 return 된 element 또는 element type 의 node 를 의미한다. document.createElement() method 가 node 를 참조하는 object 를 리턴한다고 말하는 대신, 이 method 가 DOM 안에서 생생되는 element 를 리턴한다고 좀 더 단순하게 말할 수 있다. element 객체들은 DOM Element interface 와 함께 좀 더 기본적인 Node interface 를 구현한 것이기 때문에 이 reference 에는 두 가지가 모두 포함되었다고 생각하면 된다.

nodeList

nodeList 는 elements 의 배열이다. (document.getElementsByTagName() method 에 의해 리턴된 것과 같은) nodeList의 Items 은 index 를 통해 접근 가능하며, 다음과 같이 두 가지 방식이 있다:

    list.item(1)

    list[1]

위의 방식들은 동일한 것이다. item()method는 

nodeList

 object 의 단일 method 이다. 두번째 방식은 list 에서 두번째 item 을 fetch 하는 전형적인 array syntax 이다.  

attribute

attribute 가 member 에 의해 리턴되는 것은(예를 들어 createAttribute() method 호출에 의한 리턴), attribute 에 대한 특별한 인터페이스를 노출하는 object reference 이다. attributes 는 DOM 에서 elements 와 같은 nodes 이다. elements 만큼 많이 사용되지는 않는다.

namedNodeMap

namedNodeMap 는 array 와 유사하지만 items 은 name 또는 index 에 의해 접근 가능하다. 리스트는 특별한 정렬이 적용되지 않았기 enumeration 할 때 index 를 주로 사용한다. namedNodeMap 는 이를 위해 item() method 가 있으며, namedNodeMap 에 item 을 추가하거나 삭제할 수 있다.


저작자표시 비영리 변경금지

'용어' 카테고리의 다른 글

암호화 복호화  (0) 2018.11.19
OWASP TOP 10  (0) 2018.11.12
[HTTP] 쿠키와 세션  (0) 2018.11.12
스크립트란?  (0) 2018.11.12
캐슬 (CASTLE)  (0) 2018.10.28
'용어' Related Articles more
Comments