Document Object Model - DOM

 Amikor a böngészővel megnyitunk egy weboldalt, a böngésző a HTML fájl beolvasása során szépen sorról sorra halad a markupban, és az így beolvasott HTML tag-ekből objektumokat hoz létre, amelyeket element-nek, vagy elemnek vagy node-nak hívunk. 

Ezek az elemek a JavaScriptből is elérhetőek és manipulálhatóak. Ez úgy lehetséges, hogy az elemek objektumok különböző tulajdonságokkal rendelkeznek, amelyek alapján kiolvashatóak és módosíthatóak. Ilyenek pl: hogy hol helyezkednek el a képernyőn, vagy milyen stílusú adatok.

A létrejövő objektum halmaz hierarchikusan épül fel, mivel a html tagnek vannak child azaz gyermek elemei is rendszerint. 

A hierachia csúcsa a document a html markup első eleme. Ennek a gyermeke a html-nek megfelelő elem, ennek pedig a head és a body. stb. 

Ezt a hierarchikus szerkezetet nevezzük Document Object Model (DOM) fának.

Két legfontosabb tulajdonságuk a sok közül, amellyel minden elem rendelkezik:

1.) nodeName: egy sztring amely az adott elem típusát tárolja, ez legtöbbször a tag neve csak csupa nagybetűvel. Pl: BODY, P stb.

2.) childNodes: az a tömb, amely az adott elem gyermekeit tárolja, melynek az elemei szintén elemek.

Pl: 

javascript var document = { nodeName: '#document', childNodes: [{ nodeName: 'HTML', childNodes: [{ nodeName: 'HEAD', childNodes: [] }, { nodeName: 'BODY', childNodes: [{ id: 'negyzet', nodeName: 'DIV', childNodes: [] }] }] }] };

var negyzet_element = document.getElementById('negyzet'); / *A "négyzet" element lekérdezése id alapján

negyzet_element.style.backgroundColor = 'red';          // *Háttérszín beállítása

Mivel a DOM-ot kicsit nehézkes használni, jó lehetőség helyette a jquery használata.

Nincs más dolgunk mint jelölni a head részben, vagy csatolni a letöltött fájlt. 

De innen egyszerűbb behúzni:

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>