El Model d'Objectes del Document és l'estructura formada per tots els elements manipulables de la pàgina. Juntament amb els events proporciona la interfície que permet als scripts comunicar-se amb el navegador.

L'objecte més alt de la jerarquia és window. És tot el que hi ha a la finestra. Quan ens referim a la pantalla, navegador, marcs, adreça o historial, ho fem a partir de l'objecte window.

L'altre objecte important és document, l'amo de tots els elements de la pàgina: cos, paràgrafs, enllaços, formularis, imatges, estils, scripts, ...

Un objecte és una estructura que conté dades assignades a variables, que anomenem propietats, i unes funcions que manipulen aquestes variables, i que s'anomenen mètodes.

A partir d'aquesta estructura es crea la programació orientada a objectes, basada en l'herència de propietats i mètodes, i en el polimorfisme, que fa que les variables i funcions semblants d'objectes diferents puguin tenir el mateix nom. Java i C++ són llenguatges orientats a objectes, el JavaScript també ho és, tot i que més simplificat i flexible.

No cal que ens preocupem, de moment, pels conceptes d'herència i polimorfisme. En JavaScript, l'única herència és "formar part de", és a dir, el document forma part de la finestra, un formulari forma part del document i un camp de text forma part del formulari. Ens podem referir a qualsevol propietat d'un objecte utilitzant la sintaxi del punt, que ja hem vist:

        f i n e s t r a . d o c u m e n t . f o r m u l a r i . c a m p . v a l u e

Pel que fa al polimorfisme, usar els mateixos noms per a propietats i mètodes similars en objectes diferents, només ens farà la programació més fàcil.

Window, document i tots els seus derivats no són els únics objectes que maneja JavaScript. N'hem vist d'altres, com ara Array, Math o String. De fet, tota l'estructura en basa en object, la "primitiva" que permet derivar els altres. Aleshores, quina és la diferència?

Podríem dir que hi ha dos grups o classes d'objectes: d'una banda, aquells que fan funcions internes del llenguatge, no tenen una representació a la pàgina i s'han de crear amb la declaració new(). D'altra banda, els objectes del DOM, que es corresponen amb elements de la pàgina i s'han de crear... amb HTML. També és cert que podem crear objectes DOM des de JavaScript, per exemple, ja hem utilitzat window.open(). En la majoria dels casos, però, ja són a la pàgina i JavaScript només els maneja.

  Conceptes JavaScript en aquest capítol
La llista d'objectes, propietats i mètodes del DOM depèn del navegador. Tot i així, hi ha uns estàndards més o menys acceptats que funcionen en la majoria dels casos.

Aquest capítol és més teòric que no pas pràctic, de manera que hi ha molts conceptes. No hi són tots, i l'explicació de cadascun és molt breu. Presentar el DOM com cal requeriria tot un manual, així que, li farem una ullada i l'anirem coneixent millor la resta del curs.

Obrir l'inspector d'objectesEn aquesta pràctica només hem d'observar les peces del DOM i, per això, utilitzarem l'inspector d'objectes, que ja hem vist en altres pràctiques.

En primer lloc, obrim una pàgina. Per defecte, al marc de l'inspector apareix l'objecte document. Els seus objectes apareixen com a enllaç.

Si volem veure un altre objecte, l'escrivim al quadre Obj i fem clic en el botó Mostrar. També ho hem de fer si la pàgina del marc de la dreta canvia, per exemple, perquè hem fet clic en un enllaç.

Segons el navegador i la versió, ens podem trobar amb una llista curta o llarguíssima. A més, cada cop que surt una nova versió, s'afegeixen objectes, propietats i/o mètodes "segons la visió del fabricant", que poden no tenir equivalents als altres navegadors. La llista següent és, doncs, limitada i obsoleta, però només podia ser així.
 
1.- Window
Cada finestra del navegador, o cada "frame" en una estructura de marcs, és una instància de l'objecte window. Si, des de JavaScript, ens volem referir a la pròpia finestra o marc, podem utilitzar els noms window o self. Tot i que no és necessari, el codi queda més clar.

En canvi, si que és obligatori utilitzar un nom quan, des d'una finestra o marc, ens volem referir a una altra o als elements que conté. Si no ho féssim, s'entendria que volem actuar sobre la pròpia finestra o marc i, és clar, no funcionaria.

Ja hem vist algunes propietats, mètodes i objectes de window. Aquí en tenim un resum.
  Objectes:
  document: la pàgina continguda en la finestra o marc.
event: els events que es produeixen en l'àmbit de la finestra o marc.
frames: cadascun dels marcs, si n'hi ha.
history: llista d'adreces visitades i mètodes de desplaçament.
location: informació sobre l'adreça de la pàgina que mostra la finestra.
navigator: el navegador que maneja la finestra.
screen: propietats i mètodes de la pantalla.
  Propietats:
  closed: especifica que la finestra és tancada..
defaultStatus: missatge per defecte a la barra d'estat.
innerHeight, innerWidth: dimensions (vertical i horitzontal) de l'àrea de contingut.
length: número total de marcs (frames) que conté la finestra.
locationbar, menubar: barres d'adreces i menús.
name: el nom de la finestra, que ha de ser únic.
opener: si s'ha obert amb el mètode open, el nom de la finestra que ha obert l'actual.
outerHeight, outerWidth: dimensions, vertical i horitzontal, de la finestra.
parent: la finestra que conté a la finestra o marc actual.
scrollbars, statusbar: barres de desplaçament i d'estat.
status: missatge a la barra d'estat.
top: l'objecte window més alt en una estructura de marcs.
  Mètodes:
  alert: mostra un missatge d'alerta.
blur: treu el focus de la finestra o de l'objecte especificat.
captureEvents: prepara la finestra o el document per capturar un tipus d'event.
close: tanca la finestra especificada.
confirm: mostra un quadre de diàleg amb les opcions Acceptar i Cancel·lar.
find: cerca una cadena especificada en una finestra o marc.
focus: enfoca l'objecte especificat.
handleEvent: invoca la funció que controla un determinat event.
moveBy: mou la finestra una quantitat especificada en píxels.
moveTo: mou la finestra a unes coordenades de la pantalla (superior, esquerra).
open: obre una finestra nova.
print: imprimeix el contingut de la finestra o del marc.
prompt: mostra un quadre de diàleg amb un missatge i un camp d'entrada de dades.
releaseEvents: allibera els events capturats del tipus especificat.
resizeBy: redimensiona la finestra movent la cantonada inferior dreta una quantitat.
resizeTo: redimensiona la finestra a la mida especificada.
scroll: desplaça ta finestra a una coordenada especificada.
scrollBy: desplaça l'àrea de contingut una quantitat especificada.
scrollTo: desplaça el contingut d'una coordenada a la cantonada superior esquerra.
setHotKeys: activa o desactiva les tecles ràpides d'una finestra.
setInterval, setTimeout, clearInterval i clearTimeout: controlen els temporitzadors, i els veurem detalladament en una altra pràctica.
 
2.- Document
L'objecte document és la pàgina, el seu contingut, les seves propietats i els mètodes per poder-hi enviar i controlar codi HTML. El navegador crea una instància de l'objecte document per cada etiqueta <body>. Cada finestra o marc té el seu objecte document.

Hem vist alguns dels seus objectes, propietats i mètodes. Ara en fem un resum.
  Objectes:
  all: tots els elements de l'objecte document. Només Internet Explorer.
anchors: col·lecció dels punts de fixació amb nom o identificador.
applets: els applets de Java del document.
body: el cos, entre les etiquetes <body> i </body>.
embeds: objectes "clavats" al document.
forms: Array que conté una entrada per a cada formulari de la pàgina.
frames: tots els objectes window presents al document.
images: un Array amb totes les imatges del document i les seves propietats.
layers: Array que conté una entrada per a cada capa de la pàgina. Només Netscape.
links: els enllaços de la pàgina.
plugins: un Array amb tots els plug-ins del document.
styleSheets: tots els fulls d'estils del document. També els enllaçats.
  Propietats:
  alinkColor: codi de color dels enllaços actius.
bgColor: codi de color del fons de la pàgina.
cookie: especifica una cookie, informació que es guarda a l'ordinador del client.
domain: nom del domini que ha servit la pàgina.
fgColor: codi de color del text.
fileSize: mida (pes) del document, en bytes. Només Internet Explorer.
formName: cada nom de formulari especificat al document.
height: altura del document, en píxels.
lastModified: cadena que especifica la data de l'última modificació de la pàgina.
linkColor: color dels enllaços.
title: títol de la pàgina.
URL: adreça completa del document.
vlinkColor: codi de color dels enllaços visitats.
width: amplada del document, en píxels.
  Mètodes:
  captureEvents: prepara la finestra o el document per capturar un tipus d'event.
close: tanca el document i l'obliga a mostrar-se.
getElementById: retorna l'objecte que té l'identificador especificat. Només versions 6
getElementsByName: retorna una col·lecció d'objectes amb el mateix nom. Versions 6
getSelection: retorna una cadena que conté el text actualment seleccionat a la pàgina.
handleEvent: invoca la funció que controla un determinat event.
open: obre un espai per recollir la sortida dels mètodes write o writeln.
releaseEvents: allibera els events capturats del tipus especificat.
write: escriu expressions HTML al document de la finestra especificada.
writeln: escriu al document i força un salt de línia en acabar.

Com a complement d'una llista que sembla que no s'hagi d'acabar mai, una funció que ensenya com podem modificar la propietat document.bgColor (atenció a la C majúscula) a partir d'uns botons que pot prémer l'usuari.

El formulari mostra molts més matisos (4096) que no pas els anomenats "colors segurs" (216), que utilitza el Dreamweaver. La funció resulta senzilla d'entendre i, en tot cas, ens pot resultar útil per provar noves combinacions.

Mireu el codi i proveu de contestar aquesta pregunta: com ho hem fet per aconseguir que els camps de text no siguin editables? (és a dir, que no s'hi pugui escriure). Una pista: l'operador especial this, situat en una etiqueta, especifica el propi objecte.