'Interface'에 해당되는 글 1건

  1. 2008.03.03 DOM Interface in javascript
1. 엘리먼트element

<tagName id="element" ... properties = "value">   </tagName>

어떤 면에서 보면 단지 HTML 태그에 불과합니다.

하지만 좀더 XML 관점에서 바라본다면 위의 단위를 "엘리먼트element"라 부릅니다.
하나의 엘리먼트는 DOM spec의 IDL(Interface Definition Language) 에 정의된 attributes를 취하게 됩니다.


2. 인터페이스interface

  우리는 DOM의 내부(core) 구현은 알 필요가 없이 다양한 언어(java, javascript, ect)로 오브젝트와 인터페이스를 통해 document object 에 접근을 하게 됩니다.  여기서 인터페이스라는 간단히 말해

    개발자 언어(java, javascript)와 Document Objec와의 의사소통을 담당하는 중간 매개체
    <#참고 : 위키백과 - 인터페이스>   <#참고 : Web Kit DOM>

입니다.

이 인터페이스는 FireFox에서 아래와 같은 수행을 했을 때 쉽게 볼 수 있습니다. 또한 Web Kit DOM 사이트에서도 찾아 볼 수 있습니다.

var el = document.createElement('img');
//[object HTMLImageElement]
var el = document.createElement('input');
//[object HTMLInputElement]
var el = document.createElement('div');
//[object HTMLDivElement]
...
...
위 예제처럼 알 수 있듯이 [type interface]를 취하는 것을 알 수 있습니다.  단편적인 createElement 메서드의 수행 결과이나 모든 javascript 에서 object 화 하여 취하게 되는 모든 document object 에는 고유의 interface를 제공받게 됩니다.


3.자바스크립트javascript  엘리먼트element 인터페이스interface의 관계

여기서 javascript를 이용하였을 때의 interface에 대한 관계를 설명하고자 합니다.

var el = document.getElementById('element');

  우리는 HTML Document에서 엘리먼트의 고유한 id 프로퍼티가 'element' 인 엘리먼트 오브젝트를 넘겨줍니다.  간단하게 본 el에는 object type의 엘리먼트를 취한다고 봅니다.  또한 el을 통해서 위에 명시했던 엘리먼트의 속성을 접근하거나 이벤트 핸들링을 하거나 style을 변경하거나 할 수 있다 라고 봅니다.

  이러한 하나의 엘리먼트에 어떤 프로퍼티의 속성에 값을 지정하거나 삭제를 하거나 하는 다양한 처리를 통하여 엘리먼트에 원하는 결과로 설정합니다.

  여기서 el을 얻기 위해서 사용하는 document는 자바스크립트 엔진 런타임 시에 도입되는 window의 하위 오브젝트로 window.document 입니다.   이는 또한 DOM(Document Object Model)에 접근하기 위한 가장 상위 인터페이스(DOM 관점에서 볼때) 혹은 오브젝트(자바스크립트 관점에서 볼때)입니다.


좀더 자세한 예제를 통해서 DOM HTML Spec에서의 interface에 접근해 보도록 하겠습니다.

우리는 HTML document에 표현되지 않고 랜더링 되지 않는 엘리먼트 오브젝트를 생성할 수 있습니다.

var el = document.createElement('img');
var el = document.createElement('div');
var el = document.createElement('input');

이렇게 createElement 메서드를 통해서 image 엘리먼트를 생성하였습니다.

이때도 알 수 있지만 el에는 image object가 담겨져 있고 이것은 image가 갖는 attribute를 제공받습니다.
createElement 수행 시 생성된 엘리먼트에는  아래의 interface를 제공 받습니다.

interface Element,
interface HTMLElement:Element,
interface HTMLImageElement:HTMLElement
interface HTMLDivElement:HTMLElement     
interface HTMLInputElement:HTMLElement     

간단한 예제 코드로 interface HTMLImageElement가 취하게 되는 attributes를 보겠습니다.
var el = document.createElement('img');
var DOM_ATTRIBUTE = [];
for(property in el) DOM_ATTRIBUTE.push(property);

more..


위에서 보셨던 많은 attributes는 interface HTMLImageElement 에 의해서만 제공받은 attributes는 아닙니다. 상속 계층에 있는 모든 interface에서 제공되는 attributes를 제공받습니다.
<#참조 : Web Kit - interface HTMLImageElement> <#참조 : Web Kit - HTMLImageElement IDL>

아래의 다이어그램과 같이 javascript에서는 window.document에 의해서 얻어진 Document Object는 DOM interface의 계층에 따라 상위 인터페이스를 제공받습니다.  달리 말하면 상위 interface에 의해서 HTMLImageElement 을 제공받게 됩니다.
사용자 삽입 이미지


4. 요약
javascript 는 window.document 즉 interface document 에 의해서 document object 에 접근합니다.
window.document는 javascript runtime 시 도입되는 interface 역활을 합니다.

javascript에서 접근하는 모든 document object는 자신만의 interface를 제공받으며 또한 상속 계층에 있는 상위 interface 또한 제공받게 됩니다. 이를 통해 개발자 언어를 통하여 document object를 제어, 획득 할 수 있게 됩니다.

신고
Posted by Rhio.kim