En aquest document es recullen fragments seleccionats d'uns quants articles trobats a Internet que parlen sobre DOM i el seu paper en l'HTML Dinàmic.

Articles:

http://www.hotwired.com/webmonkey/collections/dynamic_html.html?tw=dynamic_html

Construir amb el Model d'Objecte del Document
per Taylor


Com és que el Model d'Objecte del Document et permet descriure els elements de la teva pàgina web, i perquè això és una bona cosa
Com podries descriure la teva pàgina web sense mencionar el seu contingut? Una manera seria descriure l'estructura de la pàgina. Quines etiquetes (tags) hi ha a la pàgina? Quantes n'hi ha? En quin ordre estan? Quines són les propietats d'aquestes etiquetes? I finalment, quina és la naturalesa presentacional de cada element? Això és el que fa el Model d'Objecte del Document. Expressa l'estructura d'un document HTML d'una manera universal i independentment del contingut.

[...]

(...)Amb el Model d'Objecte del Document en el Netscape 3 es podia llegir i escriure els atributs d'imatge i les etiquetes d'ancles, i es podia demanar alguna informació sobre el mateix navegador - quins tipus de MIME s'acceptaven, quins plug-ins estaven instal·lats, la seva localització i poques coses més. Coses simples, bàsiques, sensates i de nivell inicial.

El Navigator 4.0 ha introduit uns quants nous elements que notifiquen què és el que hi ha en un document. Ara hi ha etiquetes layer que creen un arbre de jerarquies, noves i més poderoses maneres de demanar l'amplada i l'alçada de contenidors (això és, etiquetes layer i div) així com la mateixa finestra. Tot això s'afegeix a alguns atributs que permeten manipular la teva pàgina i fer-li fer el que tu vulguis -fins i tot mentre la pàgina es carrega o al cap d'un període de temps.

Fins fa poc, aquest model d'objecte estava contingut en JavaScript, i si es volia que altres elements (applets de Java, plug-ins) manipulessin qualsevol cosa d'aquest model, s'havien de negociar amb la màquina de programar en JavaScript, la qual cosa Netscape va anomenar LiveConnect.

Amb el Navigator, va ser més útil pensar en el model d'objecte com una funció de JavaScript. La sintaxi era JavaScript i les col·leccions d'objectes semblaven i actuaven com objectes d'un vector. Per a la majoria de gent, no hi havia realment una distinció entre un model d'objecte d'una pàgina i el JavaScript.

Aleshores Microsoft va publicar l'Internet Explorer 4.0. (...)

Internet Explorer 4.0 treu el model d'objecte fora del llenguatge i l'agrega en el navegador. Enlloc de tenir un llenguatge que tingui la concepció de varis objectes en una pàgina, es té un navegador que emmagatzema l'estructura i la presentació d'una pàgina, i s'obre aquesta informació a un llenguatge de script, o un component compil·lat, per a la seva lectura i manipulació.

No cal que es comprengui com s'emmagatzema, en JavaScript, la posició de l'etiqueta div només per a descobrir que s'emmatgatzema diferentment que en VBScript, perquè aquesta informació està tota en un format consistent.

Es pot manipular HTML utilitzant JavaScript tan fàcilment com es pot fer usant VBScript, tan fàcilment com usant un applet de Java, tan fàcilment com usant un control compil·lat ActiveX i tan fàcilment com amb Cobol.

I aquest model d'objecte no només tracta amb ancles, imatges i etiquetes inserides. Tracta amb l'estructura sencera. Per tant, si es vol obtenir un recompte de quants <div> hi ha en una pàgina, o canviar el cinquè paràgraf a blau, o modificar els valors CSS-P* de la llista d'elements per tal que apareguin per a fer una d'aquestes presentacions impactants, els objectes que es manipulen són els mateixos, i els llenguatges que s'utilitzen esdevenen els mitjans per a aquesta fi.

Però què es pot fer amb un DOM?

(...)

Si un full d'estil permet executar una presentació independent del contingut i l'estructura, aleshores el DOM permet crear una interacció independent del contingut i l'estructura. Funciona sobre el mateix principi, però sobre un eix diferent, un de codi enlloc de disseny. Això és bo perquè permet modificar les pàgines existents i afegir tots els títols volants que el "jefe" vol veure.

Les vísceres del DOM
El DOM funciona creant objectes. Aquests objectes tenen objectes fill i propietats, i els objectes fill tenen objectes fill i propietats, i així anar fent. Els objectes es referencien recorrent cap avall la jeraquia de l'objecte, o donant explícitament a un element HTML un atribut id (<img src="lolo.gif" id="marbreBlau">).

Aquest és un breu llistat dels objectes dels nivells més alts:


(A partir d'aquí l'autor es refereix al DOM del MSIE, N del T).

Encara que, la majoria de vegades, quan es duguin a terme operacions com fer desplaçar un titular, es referenciaria l'element d'una de les dues maneres: bé començant per l'objecte document i recorrent cap avall ordenadament, o bé usant l'id o name de l'element i referenciant-lo d'aquesta manera. Si es vol canviar el 23è element de la pàgina a un color blau, es podria fer així:
	document.all(23).style.color = 'blue'; 

O, si se sap que el nom de l'element en qüestió és "Freddie", es podria baixar per l'arbre i cridar-lo així:
	document.all('Freddie').style.color = 'blue'; 

O es podria saltar-se l'arbre sencer en aquest cas:
	Freddie.style.color = 'blue'; 

L'astut lector se n'haurà adonat que sigui quin sigui l'objecte HTML que es referencïi, aquest té un objecte fill "style". Aquest objecte es troba en qualsevol element que pugui ser estilitzat amb CSS, per tant, un <div> en tindria un, però un <title> no. Sota d'aquest objecte style, hi ha representacions de tots els atributs CSS, incloent-hi els elements CSS de posicionament. Per tant, molt del temps que he gastat fent que voli un titular ha estat gastat manipulant l'atribut style d'un objecte.

(*) CSS-Positioning: característiques del posicionament de CSS (N del T)



http://www.dhtmlzone.com/articles

Creacions Multimèdia amb HTML Dinàmic: Una visió general
per Nick Heinle


[...]

Més control: el model d'objecte del document
Els Models d'Objecte del Document han estat en els navegadors desde que el primer llenguatge d'script client-side va ser introduit a la Xarxa en el Netscape Navigator 2.0, però no tots els objectes del model estaven exposats a l'scripting. El model d'objecte del document ha evolucionat amb la introducció del DHMTL. El Navigator 4 exposa molts més objectes al JavaScript, i l'IE4 els hi exposa tots (i no només al JavaScript, sinó també al VBScript).
El model d'objecte i el model d'event del document es combinen per a exercir un gran poder sobre la pàgina. Per exemple, el text d'un link pot canviar de mida i color quan el ratolí es mou per sobre seu, els continguts d'un article poden expandir-se en tamany quan el lector els selecciona, i el número de telèfon que està sent teclejat dins d'un formulari pot ser validat a mida que es va prement cada tecla.

Precisió a nivell de píxel: posicionament absolut amb CSS
CSS és una gran part del DHTML, i el posicionament absolut del contingut és una gran part de CSS.
Posicionament absolut significa que el contingut --text, imatges i tot el que es pugui posar en una pàgina-- pot ser emplaçat en unes coordenades exactes. El text pot solapar-se, el fons es pot alinear amb el primer pla sense trucs de frames i taules, el contingut es pot organitzar dins de blocs independents enlloc de tant sols dins de les restrictives cel·les d'una taula.
Amb el posicionament absolut arriba l'animació del contingut. Com que el DHTML exposa totes les parts de la pàgina (o la majoria d'elles, en el cas del Navigator 4) als llenguatges d'script a través del model d'objecte del document, els blocs de contingut absolutament posicionat es poden amagar, mostrar i fer volar per la pàgina amb l'ajut de l'script. Per exemple, un script podria detectar que un usuari selecciona un tros de contingut d'un menú i aleshores il·luminar-lo. També podria moure el contingut a través de la pàgina cap a una posició més destacada.
El Navigator 4 també proporciona l'etiqueta (tag) <LAYER> per al posicionament absolut del contingut. No obstant, aquesta etiqueta no és suportada per l'IE4. Com que tant el Navigator 4 com l'IE4 suporten el posicionament absolut amb CSS, i com que el W3C va rebutjar l'etiqueta <LAYER> com a estàndard, el mètode preferit per al posicionament absolut en ambdós navegadors és CSS.

Contingut maleable: control dinàmic dels estils CSS
Amb els estils CSS, desde l'alçada de la línia i l'amplada dels marges, fins a la cara (face) de la font, tot pot ser especificat (i en el cas de la cara de la font, si no es troba, es degrada a la que més s'hi assimila). Les pàgines de la Xarxa ja no estaran mai més limitades a set tamanys de font; CSS permet valors exactes per a píxels i punts. IE suportava ja CSS en la seva versió 3.0; Navigator els suporta en la seva versió 4.0.
La implementació que fa l'IE4 del DHTML permet la modificació de tots els aspectes dels estils d'un document en qualsevol moment de l'existència del document. Un link hipertext pot expandir-se de tamany quan el ratolí es mou per sobre d'ell, els elements d'una taula de continguts podrien il·luminar-se quan se seleccionin, i les paraules clau d'un article de 50.000 paraules podrien tornar-se d'un color vermell brillant per a accedir-hi més fàcilment i per a navegar d'una manera més eficient. Actualment, el Navigator 4 no suporta* el control dels estils CSS amb JavaScript.

(*)Suporta el control d'alguns estils CSS amb JavaScript (N del T)

[...]



Una comparació del Netscape Navigator 4.0 i del Microsoft Internet Explorer 4.0
per Tim Webster


[...]

Model d'Objecte del Document (DOM)
Els dos DHTML (el de Netscape i el de MS) exposen els elements de les pàgines HTML com a objectes que poden ser manipulats pels scripts de la pàgina. Els scripts poden canviar moltes característiques d'una pàgina HTML:


Nota: El Communicator NO pot fer canvis en els marges de la pàgina o en la tipografia després que la pàgina s'hagi carregat.

En alguns casos, l'accés a els característiques de la pàgina és de només lectura, però en la majoria de casos els scripts poden llegir i escriure les propietats dels elements de la pàgina. Per exemple, donat l'element de pàgina:
	<h1 id=elMeuTitol>Hola a tothom!</h1>
un script escrit en JavaScript o en VBScript pot accedir a la propietat 'color':
	elMeuEstil.style.color = #FF0000

Similarment, Netscape permet als scripts accedir a les propietats de certs elements de la pàgina. Per ex., donat l'element:
	<div id=elMeuBlocDeText>Hola a tothom!</div>
un script pot accedir a la propietat "visibility" de l'objecte:
	document.elMeuBlocDeText.visibility = "hidden"

(...) Hi ha algunes diferències significatives entre Netscape i MS en la manera d'implementar aquesta idea bàsica.

[...]


http://msdn.microsoft.com/developer/sdk/inetsdk/help/dhtml/dhtml.htm#sec_objectmodel

Model d'Objecte de l'HTML Dinàmic

El model d'objecte és la base de l'HTML Dinàmic, i facilita la interfície que permet als scripts i als components accedir a les propietats de l'HTML Dinàmic. Usant el model d'objecte, es pot accedir i manipular virtualment qualsevol cosa que es trobi dins el document. Els elements HTML del document estan disponibles com a objectes individuals, el que significa que es pot examinar i modificar un element i els seus atributs llegint i inicialitzant les seves propietats i cridant els mètodes. El text està disponible a través de les propietats i els mètodes sobre els elements.
El model d'objecte també construeix accions d'usuari, tals com prémer una tecla i clicar el ratolí, disponibles com a events. Es pot interceptar i processar aquests i altres events mitjançant la creació de funcions i rutines de servei d'events. El procés de servei d'events rep el control cada cop que ocorre un event donat i realitza una acció apropiada, incloent-hi la utilització del model d'objecte per a canviar el document.

El següent simple document HTML mostra com es pot utilitzar el model d'objecte per a modificar un document. Aquest document canvia el color de la capçalera i afegeix una línia de text quan l'usuari clica el ratolí en el document:
   <HTML>
      <HEAD><TITLE>Benvinguts!</TITLE>
      <SCRIPT LANGUAGE="JScript">
         function canvia_m() {
            document.all.elMeuTitol.style.color = "green";
            document.all.elMeuText.innerText = "Es poden fer les coses més
                           fascinants amb la menor quantitat d'esforç.";
         }
      </SCRIPT>
      </HEAD>
   <BODY onclick="canvia_m()">
      <H3 ID=elMeuTitol>Benvinguts a l'HTML Dinàmic!</H3>
      <P ID=elMeuText>Clica en qualsevol lloc d'aquest document.</P>
   </BODY>
   </HTML>

(Aquest exemple només funciona en MSIE 4, N del T)

Aquest exemple conté una rutina de servei d'event, anomenada "canvia_m", que processa els clics del ratolí en el document. La rutina utilitza la col·lecció all (del MSIE, N del T) de l'objecte document per a seleccionar els elements H3 i P usant els seus valors ID. Canvia el color de la capçalera fixant la propietat 'color' de l'objecte style per a aquests elements. Reemplaça el text del paràgraf inicialitzant la propietat innerText. El model d'objecte és un superconjunt del model d'objecte de JavaScript que es troba en el Netscape Navigator. Això significa que porcions del model són compatibles amb altres navegadors, fins i tot si no suporten HTML Dinàmic. Seguint les directrius bàsiques, es poden escriure scripts que aprofiten àmpliament el model d'objecte quan s'executen en Internet Explorer i que proporcionen uns resultats raonables quan s'executen en navegadors que no suporten l'HTML Dinàmic.
Tancar
Pàgina Principal
Introducció al Manual d'HTML Dinàmic
Glossari
Referències























HTML 4.0
Introducció al manual d'HTML 4.0
Taules
Formularis
Objectes, imatges i applets
Scripts
Informació de l'idioma i sentit del text
Frames
Nous elements
Elements menyspreuats i obsolets
Fulls d'estil
Nous atributs de l'HTML 4.0
Índex d'atributs nous
Índex d'atributs menyspreuats
DTD
Annexe












Introducció als CSS
Introducció als CSS2 i al manual
Propietats CSS2
Fulls d'estil audibles
Model de caixa
Sintaxi i tipus bàsics de dades
Model de formatat visual
Detalls del model de formatat visual
Assignar valors de propietats, la cascada i l'herència
Interfície d'usuari
Efectes visuals
Text
Taules
Fonts
Contingut generat, numeració automàtica i llistes
Colors i fons
Selectors
Tipus de mitjans
Mitjans paginats
Suport de CSS2
Annexe




Introducció al DOM
DOM Nivell 1 - Nucli
DOM Nivell 1 - HTML
Articles sobre el DOM






















Programació en DHTML
Demos