DOM 인터페이스와 테스팅

mdn을 필사한 것입니다.

 

DOM interface

 

이 문서는 objects와 DOM에서 조작가능한 것들에 대해 설명하고 있다. 사람들은 HTML FORM element가 HTMLFormElement interface로부터 name property를 얻고, className property는 HTMLElement interface로 부터 얻는 것에 대해 별로 관심이 없는 것 같다. 두 가지 경우 모두, property는 form object 안에 있는 것이다.

 

하지만 DOM 안에 구현된 objects와 interfaces 사이의 관계는 혼동될 수 있다. 이 섹션에서는 DOM specification 안의 실제 interfaces와 그들을 어떻게 활용할 수 있는지에 대해 살펴보도록 하자.

 

Interface와 Objects

 

많은 objects가 여러 개의 다른 인터페이스들과 연관되어 있다. 예를 들어, table 오브젝트는 createCaption, insertRow method들이 포함된 HTMLTableElement를 구현한 것이다. table 오브젝트는 HTML element이기도 하기 때문에, table은 Element interface(DOM Element Reference 챕터 참조)도 구현한다. 마지막으로, HTML element는 DOM이 연관되어 있는 한 nodes 트리(tree)에서 하나의 node이다. nodes 트리는 웹 페이지 또는 XML 페이지를 위한 object model을 구성한다. 때문에 table element는 보다 기본적인 Element에서 파생된 Node interface를 구현하고 있다.

 

아래의 예제처럼, table 오브젝트를 참조하게 되면, 기본적으로 이들 3가지 인터페이스들을 사용할 수 있게 된다.

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

 

DOM의 핵심 Interfaces

 

Document와 window 오브젝트는 DOM 프로그래밍에서 가장 자주 사용하는 오브젝트이다. 간단하게 설명하자면, window object는 브라우저와 같다고 할 수 있으며, document object는 root document 자체라고 할 수 있다. generic Node interface로부터 상속받은 Element와 Node,  Element interfaces가 협력하여 각각의 elements에서 사용할 수 있는 수많은 methods와 properties를 제공한다. 이러한 elements는  table object 예제에서도 살펴봤듯이, elements가 보유한 데이터를 처리할 수 있는 특정한 interfaces도 가지고 있다.

 

아래는 웹 페이지, XML 페이지 스크립팅에서 DOM 을 사용하는 공통적인 API 들의 간략한 목록이다.

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

DOM API 테스팅