DOM이란 무엇인가?

문서 객체 모델(Document Object Model, DOM)은 HTML과 XML 문서에 대한 프로그래밍 인터페이스입니다. 문서에 대한 구조적 정보를 제공하고 문서 구조나 외양 및 내용을 바꿀 수 있도록 프로그램에서 접근할 수 있는 방법을 제공합니다. DOM은 프로퍼티와 메소드를 가지는 객체와 노드의 트리형 구조로 표현됩니다. 웹 페이지를 스크립트나 다른 개발 언어로 접근할 때 필수 적입니다.

웹 페이지는 문서 입니다. 문서는 웹 브라우저창에 표시되거나 HTML 소스 창에 표시됩니다. 둘다 같은 문서 입니다만 문서 객체 모델(DOM)은 이 문서를 다루고 저장하기 위해 다른 방법을 사용합니다. DOM은 웹 문서를 객체 지향적으로 다룹니다. 그래서 JavaScript 같은 스크립트 언어가 다루기 쉽습니다.

W3C DOM은 현대 웹 브라우저에서 DOM을 해석하는 표준 형식입니다. 많은 웹 브라우저들은 W3C 표준에 확장 기능을 제공하고 있지만, 이 표준 방식을 따르면 웹 브라우저에서 문서를 접근할 때 다 같은 결과를 얻어 낼 수 있습니다.

예를 들어 W3C DOM은 getElementsByTagName은 아래와 같이 문서 내에 모든 <P>요소의 내용을 가지고 오게 됩니다.

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

웹 문서의 모든 프로퍼티, 메소드, 이벤트은 객체로 정의할 수 있습니다. (예를 들어, document객 체는 문서 자체를 table 객체는 특정 HTMLTableElement DOM 인터페이스를 표시합니다.) 이 문서는 Gecko 기반 브라우저에 구현된 DOM을 객체 방법으로 이용할 수 있는 방법을 제공합니다.

DOM과 JavaScript

The short example above, like nearly all of the examples in this reference, is JavaScript. That is to say, it's written in JavaScript, but it uses the DOM to access the document and its elements. The DOM is not a programming language, but without it, the JavaScript language wouldn't have any model or notion of the web pages, XML pages and elements with which it is usually concerned. Every element in a document—the document as a whole, the head, tables within the document, table headers, text within the table cells—is part of the document object model for that document, so they can all be accessed and manipulated using the DOM and a scripting language like JavaScript.

In the beginning, JavaScript and the DOM were tightly intertwined, but eventually they evolved into separate entities. The page content is stored in DOM and may be accessed and manipulated via JavaScript, so that we may write this approximative equation:

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

The DOM was designed to be independent of any particular programming language, making the structural representation of the document available from a single, consistent API. Though we focus exclusively on JavaScript in this reference documentation, implementations of the DOM can be built for any language, as this Python example demonstrates:

# 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");

How Do I Access the DOM?

You don't have to do anything special to begin using the DOM. Different browsers have different implementations of the DOM, and these implementations exhibit varying degrees of conformance to the actual DOM standard (a subject we try to avoid in this documentation), but every web browser uses some document object model to make web pages accessible to script.

When you create a script–whether it's in-line in a <SCRIPT> element or included in the web page by means of a script loading instruction–you can immediately begin using the API for the document or window elements to manipulate the document itself or to get at the children of that document, which are the various elements in the web page. Your DOM programming may be something as simple as the following, which displays an alert message by using the alert() function from the window object, or it may use more sophisticated DOM methods to actually create new content, as in the longer example below.

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

Aside from the <script> element in which the JavaScript is defined, this JavaScript sets a function to run when the document is loaded (and when the whole DOM is available for use). This function creates a new H1 element, adds text to that element, and then adds the H1 to the tree for this document:

<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
   heading = document.createElement("h1");
   heading_text = document.createTextNode("Big Head!");
   heading.appendChild(heading_text);
   document.body.appendChild(heading);
}
</script>
</head>
<body>
</body>
</html>

Important Data Types

This reference tries to describe the various objects and types in as simple a way as possible. But there are a number of different data types being passed around the API that you should be aware of. For the sake of simplicity, syntax examples in this API reference typically refer to nodes as elements, to arrays of nodes as nodeLists (or simply elements), and to attribute nodes simply as attributes.

The following table briefly describes these data types.

`document`	When a member returns an object of type `document` (e.g., the ownerDocument property of an element returns the `document` to which it belongs), this object is the root `document` object itself. The DOM `document` Reference chapter describes the `document` object.
`element`	`element` refers to an element or a node of type `element` returned by a member of the DOM API. Rather than saying, for example, that the `document.createElement()` method returns an object reference to a `node`, we just say that this method returns the `element` that has just been created in the DOM. `element` objects implement the DOM `Element` interface and also the more basic `Node` interface, both of which are included together in this reference.
`nodeList`	A `nodeList` is an array of elements, like the kind that is returned by the method `document.getElementsByTagName()`. Items in a `nodeList` are accessed by index in either of two ways: list.item(1) list[1] These two are equivalent. In the first, item() is the single method on the `nodeList` object. The latter uses the typical array syntax to fetch the second item in the list.
`attribute`	When an `attribute` is returned by a member (e.g., by the createAttribute() method), it is an object reference that exposes a special (albeit small) interface for attributes. Attributes are nodes in the DOM just like elements are, though you may rarely use them as such.
`NamedNodeMap`	A `namedNodeMap` is like an array, but the items are accessed by name or index, though this latter case is merely a convenience for enumeration, as they are in no particular order in the list. A `NamedNodeMap` has an item() method for this purpose, and you can also add and remove items from a `NamedNodeMap`

DOM Interfaces

A stated purpose of this guide is to minimize talk about abstract interfaces, inheritance, and other implementation details, and to talk instead about the objects in the DOM, about the actual things you can use to manipulate the DOM hierarchy. From the point of view of the web programmer, it's often a matter of indifference that the object representing the HTML FORM element gets its name property from the HTMLFormElement interface but its className property from the HTMLElement interface proper. In both cases, the property you want is simply in the form object.

But the relationship between objects and the interfaces that they implement in the DOM can be confusing, and so this section attempts to say a little something about the actual interfaces in the DOM specification and how they are made available.

Interfaces and Objects

In some cases, an object implements a single interface. But more often than not, an object like an HTML table borrows from several different interfaces. The table object, for example, implements a specialized HTML Table Element Interface, which includes such methods as createCaption and insertRow. But since it's also an HTML element, table implements the Element interface described in the DOM element Reference chapter. And finally, since an HTML element is also, as far as the DOM is concerned, a node in the tree of nodes that make up the object model for a web page or an XML page, the table element also implements the more basic Node interface, from which Element derives.

When you get a reference to a table object, as in the following example, you routinely use all three of these interfaces interchangeably on the object, perhaps without knowing it.

var table = document.getElementById("table");
var tableAttrs = table.attributes; // Node/Element interface
for(var i = 0; i < tableAttrs.length; i++){
  // HTMLTableElement interface: border attribute
  if(tableAttrs[i].nodeName.toLowerCase() == "border")
    table.border = "1"; 
}
// HTMLTableElement interface: summary attribute
table.summary = "note: increased border";

Core Interfaces in the DOM

This section lists some of the most commonly-used interfaces in the DOM. The idea is not to describe what these APIs do here but to give you an idea of the sorts of methods and properties you will see very often as you use the DOM. These common APIs are used in the longer examples in the DOM Examples chapter at the end of this book.

Document and window objects are the objects whose interfaces you generally use most often in DOM programming. In simple terms, the window object represents something like the browser, and the document object is the root of the document itself. Element inherits from the generic Node interface, and together these two interfaces provide many of the methods and properties you use on individual elements. These elements may also have specific interfaces for dealing with the kind of data those elements hold, as in the table object example in the previous section.

The following is a brief list of common APIs in web and XML page scripting using the DOM.

document.getElementById(id)
element.getElementsByTagName(name)
document.createElement(name)
parentNode.appendChild(node)
element.innerHTML
element.style.left
element.setAttribute
element.element.getAttribute
element.addEventListener
window.content
window.onload
window.dump
window.scrollTo

Testing the DOM API

This document provides samples for every interface that you can use in your own web development. In some cases, the samples are complete HTML pages, with the DOM access in a <script> element, the interface (e.g, buttons) necessary to fire up the script in a form, and the HTML elements upon which the DOM operates listed as well. When this is the case, you can cut and paste the example into a new HTML document, save it, and run the example from the browser.

There are some cases, however, when the examples are more concise. To run examples that only demonstrate the basic relationship of the interface to the HTML elements, you may want to set up a test page in which interfaces can be easily accessed from scripts. The following very simple web page provides a <script> element in the header in which you can place functions that test the interface, a few HTML elements with attributes that you can retrieve, set, or otherwise manipulate, and the web user interface necessary to call those functions from the browser.

You can use this test page or create a similar one to test the DOM interfaces you are interested in and see how they work on the browser platform. You can update the contents of the test() function as needed, create more buttons, or add elements as necessary.

<html>
<head>
<title>DOM Tests</title>
<script type="application/x-javascript">
function setBodyAttr(attr,value){
  if(document.body) eval('document.body.'+attr+'="'+value+'"');
  else notSupported();
}
</script>
</head> 
<body>
<div style="margin: .5in; height="400""> 
<p><b><tt>text</tt> color</p> 
<form> 
<select onChange="setBodyAttr('text',
    this.options[this.selectedIndex].value);"> 
<option value="black">black 
<option value="darkblue">darkblue 
</select>
 <p><b><tt>bgColor</tt></p>
 <select onChange="setBodyAttr('bgColor',
    this.options[this.selectedIndex].value);"> 
<option value="white">white 
<option value="lightgrey">gray
 </select>
<p><b><tt>link</tt></p> 
<select onChange="setBodyAttr('link',
     this.options[this.selectedIndex].value);">
<option value="blue">blue
<option value="green">green
</select>  <small>
     <a href="http://www.brownhen.com/dom_api_top.html" id="sample">
(sample link)</a></small><br>
</form>
<form>
  <input type="button" value="version" onclick="ver()" />
</form>
</div>
</body>
</html>

To test a lot of interfaces in a single page-for example, a "suite" of properties that affect the colors of a web page-you can create a similar test page with a whole console of buttons, textfields, and other HTML elements. The following screenshot gives you some idea of how interfaces can be grouped together for testing.

Figure 0.1 Sample DOM Test Page

In this example, the dropdown menus dynamically update such DOM-accessible aspects of the web page as its background color (bgColor), the color of the hyperlinks (aLink), and color of the text (text). However you design your test pages, testing the interfaces as you read about them is an important part of learning how to use the DOM effectively.

자료 : https://developer.mozilla.org

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

'정보기술의 샘터........о♡ > 접근성과 사용성' 카테고리의 다른 글

WCAG2.0 가이드라인 (0)	2010.03.15
object와 대체콘텐츠 (0)	2010.03.15
색상에 무관한 인식 접근성 평가용 컬러닥터 (0)	2010.03.14
한국웹접근성인증위원회 출범, 새 웹 접근성 인증마크 등장 (0)	2010.03.02
웹발전연구소와 숙명여대 e-Biz 석사과정 창립 10주년 (0)	2010.03.02

신망애(信望愛) 그 중에 제일은 사랑이니라!

DOM이란 무엇인가?