Document Object Model

A Dokumentum Objektum Modell (Document Object Model / DOM) egy platform- és nyelvfüggetlen standard objektummodell, amely a HTML, XHTML, XML, valamint rokon formátumaiknak a szerkezetét és az objektumaikkal történő interakciókat modellezi.^[1] A DOM egymással gyerek-szülő kapcsolatban álló objektumok rendszere. A dokumentum tartalmát, illetve a dokumentum valamennyi összetevőjét magában foglalja. A beépített objektumok kezelése böngészőnként eltérő lehet, továbbá plusz tulajdonságok is lehetnek különböző böngészők esetén.

A Dokumentum Objektum Modell története szorosan összekapcsolódik a böngészőháborúkként elhíresült, az 1990-es évek végén a Netscape Navigator és a Microsoft Internet Explorer, illetve ezáltal a JavaScript és a JScript között zajló versengéssel. Ezek voltak az elsők a széleskörűen elterjedt, a webböngészők böngészőmotorjaiban implementált szkriptnyelvek közül.

A JavaScript 1996-ban jelent meg a Netscape Communications által bemutatott Netscape Navigator 2.0-s verziójában. A Netscape versenytársa, a Microsoft szintén ebben az évben mutatta be az Internet Explorer 3.0-s verzióját, amely a JavaScript egy portolását, a JScript-et használta. A JavaScript és a JScript segítségével a webfejlesztők olyan weboldalakat hozhattak létre, melyeken kliens-oldali interakciókra is lehetőség van. A felhasználó által generált események detektálásának és a HTML dokumentumok módosításának korlátozott lehetőségei végül "DOM Level 0" vagy "Legacy DOM" néven váltak ismertté, melyek ezen nyelvek első generációi voltak. Egyedi szabványt nem fejlesztettek ki a DOM Level 0 számára, de a HTML4 specifikációja már részben leírta ezt is.

Ez a korai DOM verzió korlátozva volt a HTML-elemek elérésében. A HTML-űrlap, hivatkozás és kép elemek voltak elérhetőek egy hierarchikus név által. Ez a név a dokumentum gyökér objektumával kezdődött, továbbá használható volt akár a neve akár a szekvenciális indexe a bejárni kívánt elemeknek. Példának okán egy űrlap elem elérhető volt akár a document.urlapNeve.beviteliMezoNeve formában, vagy akár a document.forms[0].elements[0] formában is.

A Legacy DOM lehetővé tette a kliens-oldalon történő űrlap validációt és a népszerű „rollover”(en) effekt használatát.

1997-ben a Netscape és a Microsoft bemutatta a Netscape Navigator, illetőleg az Internet Explorer 4.0-s verzióit, mely webböngészők már támogatták a Dynamic HTML-t (DHTML). Ezáltal lehetőség nyílt módosításokat eszközölni egy már betöltött HTML dokumentumon. A DHTML kiegészítéseket szükségeltetett a Legacy DOM implementációkban elérhető kezdetleges dokumentum objektum felépítésében. Noha, a Legacy DOM implementációk nagymértékben kompatibilisek voltak egymással - mivel a JScript a JavaScript-en alapult -, a DHTML DOM kiegészítéseket párhuzamosan fejlesztették és mindvégig inkompatibilisek maradtak. A DOM ezen verziói "Intermediate DOM" néven váltak ismertté.

Ezen verziók által már lehetőség nyílt a CSS tulajdonságok manipulálására is, így befolyásolhatóvá vált a dokumentumok megjelenése. Sőt mi több hozzáférést biztosítottak egy új funkcióhoz, az ún. "rétegek"-hez , a "document.layers" (Netscape Navigator) és a "document.all" (Internet Explorer) tulajdonságok által. Az alapvető inkompatibilitási problémák miatt a böngésző-független webfejlesztés különleges figyelmet igényelt minden támogatott böngésző esetén.

A Netscape Navigator későbbi verzióiban felhagytak az Intermediate DOM támogatásával, míg az Internet Explorer-ben ez továbbra is támogatott maradt a visszafelé kompatibilitás biztosítása érdekében.

Az 1994-ben alapított World Wide Web Consortium (W3C), amely nyílt szabványokat támogat a világháló számára, összehozta a Netscape Communications-t, a Microsoft-ot és más cégeket, hogy kifejlesszenek egy szabványt a webböngészőkben használatos szkript nyelvek számára, így alakult ki az „ECMAScript”. A szabvány első verziója 1997-ben látott napvilágot. Az ezt követő JavaScript és JScript kiadások, így a nagyobb böngésző függetlenség érdekében megvalósíthatták az ECMAScript szabványt.

Az ECMAScript megjelenése után a W3C elkezdett dolgozni a DOM szabványosításán. A kezdeti eredmények voltak az ún. „DOM Level 1”, amelyet 1998 végén terjesztett elő a W3C. Körülbelül ugyanekkor az Internet Explorer 5.0 szállított korlátozott támogatást a DOM Level 1-hez. Ez a verzió már teljes modellt biztosított a teljes HTML és XML dokumentum számára, beleértve a dokumentumok bármely részének megváltoztatásához szükséges eszközöket is. A nem komform böngészők, mint az Internet Explorer 4.x és a Netscape 4.x még ekkortájt, a 2000-es év végén is széles körben elterjedtek voltak.

2000 végén jelent meg a DOM Level 2. Bevezette a getElementById(en) funkciót, valamint az eseménymodellt és támogatta az XML névtereket és a CSS-t.

A DOM Level 3 (a DOM specifikáció jelenlegi kiadása) 2004 áprilisában jelent meg. Ez a verzió immár támogatja az XPath-t és a billentyűzet eseménykezelését, valamint egy interfészt a dokumentumok XML-lé szerializációjához.

2005-re a W3C-féle DOM nagy része jól támogatottá vált az átlagos ECMAScript támogatással rendelkező webböngészők, mint a Microsoft Internet Explorer 6, az Opera, a Safari, valamint a Gecko-alapú böngészők, mint a Mozilla Firefox, a SeaMonkey és a Camino körében.

Mivel a DOM mindkét irányú navigációt támogatja (szülő és az előző testvér felé is) és lehetővé teszi a változtatást tetszőleges helyen, az implementációban pufferelni kell a beolvasott dokumentumot (vagy annak értelmezett részét). Ebből következik, hogy a DOM leginkább olyan alkalmazások kezelésére alkalmas, ahol ismételt és nem szekvenciális sorrendű hozzáférés történik a dokumentumhoz. Amennyiben egy alkalmazás szigorúan szekvenciális és egyszer futó, a SAX modell valószínűleg gyorsabb és kevesebb memóriát használ.

A webböngészők rendszerint a DOM-hoz hasonló belső modellt használnak a dokumentumok (például egy HTML oldal) megjelenítéséhez. A DOM API-kat weboldalak, illetve egyes részeik JavaScript kódból történő vizsgálására, vagy módosítására is használják. Más szóval, a Dokumentum Objektum Modell az a mód, ahogyan a JavaScript látja a webböngésző állapotait és az általa megjelenített HTML oldalt.

Amikor egy böngésző megjelenít egy HTML oldalt, akkor legelőször betölti az oldalt a web-szerverről, majd értelmezi a jelöléseit (pl. HTML) és létrehozza a modellt a memóriában tárolt DOM formájában.

Minden dokumentum csomópontjai fa struktúrába vannak szervezve, ezt hívjuk DOM fának. A legfelső csomópont a DOM fában a Dokumentum (Document) objektum. Minden csomópont tetszőleges számú - nulla, vagy több - gyerekkel rendelkezhet.

Alább látható egy példa egy DOM fa felépítésére:

 |-> Dokumentum (Document)
   |-> Elem (Element) (pl. <html>)
     |-> Elem (Element) (pl. <body>)
       |-> Elem (Element) (pl. <div>)
         |-> szöveges tartalom
         |-> Horgony (Anchor)
           |-> szöveges tartalom
       |-> Űrlap (Form)
            |-> Szövegdoboz (Text-box)
            |-> Szövegmező (Text Area)
            |-> Rádió gomb (Radio Button)
            |-> Jelölőnégyzet (Check Box)
            |-> Select
            |-> Gomb

A webböngészők ún. böngészőmotorokra támaszkodnak a HTML dokumentumok Dokumentum Objektum Modellé alakítása során. Némely ilyen motor, mint a Trident/MSHTML és a Presto alapvetően egy adott böngészőhöz tartoznak, mint az Internet Explorer és az Opera. Mások, mint a WebKit és a Gecko számos böngészőben teljesítenek szolgálatot, mint a Google Chrome, a Firefox és a Safari. A különböző böngészőmotorok általában mind eltérő fokú figyelmet fordítanak a DOM szabványok pontos betartására.

Lásd még: en:Comparison of layout engines (Document Object Model)

DOM implementációk:

• libxml2
• MSXML
• Xerces – egy C++-os DOM megvalósítás, amely Java és Perl átiratokkal is bír.

DOM-t megvalósító API-k:

• JAX-P (Java API for XML Processing) egyike a Java XML programozási API-jának, amely biztosítja az XML dokumentumok validációjához és elemzéséhez szükséges képességeket.

Ez a szócikk részben vagy egészben a Document Object Model című angol Wikipédia-szócikk ezen változatának fordításán alapul. Az eredeti cikk szerkesztőit annak laptörténete sorolja fel. Ez a jelzés csupán a megfogalmazás eredetét és a szerzői jogokat jelzi, nem szolgál a cikkben szereplő információk forrásmegjelöléseként.

• Ajax – egy módszer, amely DOM manipulációt és olyan egyéb technikákat alkalmaz, amelyek lehetővé teszik az adatkommunikációt a weblapok újratöltése nélkül.
• Alkalmazás Objektum Modell
• DOM scripting
• JDOM – egy Java-alapú dokumentum objektum modell XML kezelésére, amely egyesíti a DOM és a SAX lehetőségeit, illetve értelmezőket használat a dokumentum létrehozására.
• jQuery
• JSON
• Prototype.js
• RapidXML – egy kísérlet a leggyorsabb XML értelmező létrehozására, felhasználva a modern C++ lehetőségeit.
• SAX – egy soros hozzáférés elemző API, a DOM egy alternatívája.
• SXML – egy modell, amely S-kifejezések (S-expressions) formájában reprezentálja az XML-t és a HTML-t.
• TinyXML – hatékony, platformfüggetlen C++ XML függvénykönyvtár.

• Flanagan, David. JavaScript: The Definitive Guide. O'Reilly & Associates, 312–313. o. (2006). ISBN 0596101996 
• Koch, Peter-Paul: The Document Object Model: an Introduction. Digital Web Magazine, 2001. május 14. (Hozzáférés: 2009. január 10.)
• Le Hégaret, Philippe: The W3C Document Object Model (DOM). World Wide Web Consortium, 2002. (Hozzáférés: 2009. január 10.)
• Guisset, Fabian: What does each DOM Level bring?. Mozilla Developer Center. Mozilla Project. (Hozzáférés: 2009. január 10.)

• Document Object Model by the World Wide Web Consortium
• Technology Reports
• What does your user agent claim to support?
• W3C DOM scripts and compatibility tables (Quirksmode)
• Gecko DOM Reference Archiválva 2012. március 24-i dátummal a Wayback Machine-ben (Mozilla Developer Center)
• IB DOM Utilities: Mapping JavaScript Objects to DOM Elements
• XJR with DOM, SAX2, and XPath interfaces
• Firefox plugin that lets you visualize a Web's page DOM in 3D