DOM (Document Object Model)

DOM (Document Object Model)

문서 객체(DOM)이라는 방식을 통해 HTML내에 있는 거의 모든 요소를 스크립트 처리 가능한 객체로서 활용 만들어 자바 스크립트에서 활용하거나 CSS에서 스타일을 지정해 줄 수도 있다. 그런데 이러한 객체를 읽어 올 때 브라우저에서는 독자적인 객체 모델을 가지고 있다. 예를 들어 넷스케이프4 에서는 객체 모델안의 특정의 요소에 액세스 하는데 document.tags 가 사용되며 IE 문서 객체모델(MS DOM)에서는 document.all[]이 사용된다. 이러한 차이로 인해 상당수가 W3C의 표준 DOM의 사양에 포함되지 않아 모질라나 오페라와 같은 표준에 준거한 브라우저에서는 자바 스크립트 에러의 요인이 된다.

W3C 표준 DOM에서는 getElementByID라는 객체 모델을 사용하고 있으며, 현재 대부분의 브라우저들이 이를 지원하고 있다. 구형브라우저를 지원하기 위해서는 객체판별 스크립트를 사용하면 된다.

function getObject(objectId)

{

    // checkW3C DOM, then MSIE4, then NN 4.

    if(document.getElementById && document.getElementById(objectId))

    {

        return document.getElementById(objectId); // 대부분의 브라우즈

    }

    else if(document.all && document.all(objectId))

    {

        return document.all(objectId); // IE4와 5.0

    }

    else if(document.layers && document.layers[objectId])

    {

        return document.layers[objectId]; // Netscape 4.x

    }

    else

    {

        return false;

    }

}

// 사용방법 getObject('content').style.visibility="hidden"; 와 같은 방법으로 표현.

// 그외 다양한 지원방식 http://www.cross-browser.com/toys/

DOM표현

Netcape4 : document.layers[], document.tags[], document.ids[], document.classes[], document.elementName

IE 4/5 : document.all

☞ DOM1 : document.getElementById()

IE 4/5 : element.visibility = value;
☞ DOM2 : element.style.visibility = value;

Netscape4 : handleEvent()
☞ DOM2 : dispatchEvent()

Netscape4 : elment.left, element.top

IE 4/5 : element.style.pixelLeft, element.style.pixelTop

☞ DOM2 : parseInt(element.style.left)

☞ DOM2 : parseInt(element.style.top)

Netscape4 : element.moveTo(x, y);

IE 4/5 : element.style.pixelLeft = x; element.style.pixlTop = y;

☞ DOM2 element.style.left = value + "px";

☞ DOM2 element.style.top = value + "px";