MDN을 필사한 것입니다.
DOM 이란?
문서 객체 모델(The Document Object Model, 이하 DOM)은 HTML, XML 문서의 프로그래밍 interface이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM은 구조화된 nodes와 property와 method를 갖고 있는 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.
웹 페이지는 일종의 문서(document)다. 이 문서는 웹 브라우저를 통해 그 내용이 해석되어 웹 브라우저 화면에 나타나거나 HTML 소스 자체로 나타나기도 한다. 동일한 문서를 사용하여 이처럼 다른 형태로 나타날 수 있다는 점에 주목할 필요가 있다. DOM은 동일한 문서를 표현하고, 저장하고, 조작하는 방법을 제공한다. DOM은 웹 페이지의 객체 지향 표현이며, 자바스크립트와 같은 스크립팅 언어를 이용해 DOM을 수정할 수 있다.
DOM과 자바스크립트
DOM은 프로그래밍 언어는 아니지만 DOM이 없다면 자바스크립트 언어는 웹 페이지 또는 XML 페이지 및 요소들과 관련된 모델이나 개념들에 대한 정보를 갖지 못하게 된다. 문서의 모든 element - 전체 문서, 헤드, 문서 안의 table, table header, table cell 안의 text - 는 문서를 위한 document object model의 한 부분이다. 때문에 이러한 요소들을 DOM과 자바스크립트와 같은 스크립팅 언어를 통해 접근하고 조작할 수 있는 것이다.
초창기에는 자바스크립트와 DOM이 밀접하게 연결되어 있었지만, 나중에는 각각 분리되어 발전했다. 페이지 콘텐츠는 DOM에 저장되고 자바스크립트를 통해 접근하거나 조작할 수 있다. 이것을 방정식으로 표현하면 아래와 같다.
API(web or XML page) = DOM + JS(scripting language)
DOM은 프로그래밍 언어와 독립적으로 디자인되었다. 때문에 문서의 구조적인 표현은 단일 API를 통해 이용 가능하다. DOM의 구현은 어떠한 언어에서도 가능하다.
DOM에 어떻게 접근할 수 있는가?
각각의 브라우저는 자신만의 방법으로 DOM을 구현하였으며, 이로 인해 실제 DOM 기준을 따르는지 확인해야 하는 번거로움이 발생하였다. 모든 웹 브라우저는 스크립트가 접근할 수 있는 웹 페이지를 만들기 위해 어느 정도의 DOM을 항상 사용한다.
스크립트를 작성할 때 문서 자체를 조작하거나 문서의 children을 얻기 위해 document 또는 window elements를 위한 API를 즉시 사용할 수 있다. DOM 프로그래밍은 아래처럼 window object로부터 alert() 함수를 사용하는 매우 간단한 것일 수도 있고, 다음 예제처럼 새로운 content를 작성하는 복잡한 DOM이 될 수도 있다.
<body onload="window.alert('welcome to my home page!');">아래의 자바스크립트는 문서가 로드될 때(모든 DOM을 사용할 수 있게 되는 때임) 실행되는 함수를 정의하였다. 이 함수는 새로운 H1 element를 생성하고, element에 text를 추가하며, H1을 이 문서의 트리에 추가한다.
<html>
<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로 표현하였다.
document
element의 ownerDocument property는 그것이 속해있는 document를 리턴한다.
이렇게 member가 document type의 object를 리턴할 때, 이 object는 root document object 자체이다.
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는 element의 배열이다. nodeList의 Items는 index를 통해 접근 가능하며, 다음과 같이 두 가지 방식이 있다.
- list.item(1)
- list[1]
두 가지 방식은 동일한 것이다. item() 메서드는 nodeList object의 단일 메서드이다. 두 번째 방식은 list에서 두 번째 item을 fetch하는 전형적인 array syntax이다.
attribute
attribute가 member에 의해 리턴되는 것은(예를 들어 createAttribute()) attribute에 대한 특별한 인터페이스를 노출하는 object reference이다. attributes는 DOM에서 elements와 같은 nodes이다. elements만큼 많이 사용되지는 않는다.
namedNodeMap
array와 유사하지만 items는 name 또는 index에 의해 접근 가능하다. 리스트는 특별한 정렬이 적용되지 않았기 때문에 enumeration할 때 index를 주로 사용한다. namedNodeMap은 이를 위해 item() method가 있으며, namedNodeMap에 item을 추가하거나 삭제할 수 있다.
'언어 > JavaScript' 카테고리의 다른 글
| 함수 바인딩 (0) | 2021.05.14 |
|---|---|
| DOM 인터페이스와 테스팅 (0) | 2021.05.14 |
| Document (0) | 2021.05.13 |
| Node.js로 입력값 받기 (0) | 2021.05.01 |
| Array.from() (0) | 2021.04.19 |
