Introducció al DOM

Figura 3. Model d'objectes HTML dinàmic de Netscape 4

Ampliació

• ids: que permet l'assignació de fulls d'estil a elements HTML amb l'atribut “id” establert.

• classes: que permet l'assignació de fulls d'estil a elements HTML amb l'atribut “class” establert.

• tags: que permet l'assignació de fulls d'estil a elements HTML lliures.

• layers[]: array de capes del document.

• Van aparèixer nous controladors d'esdeveniments de ratolí i de teclat com onmouseup/down i onkeyup/down.

• Va aparèixer un nou model de gestió d'esdeveniments que fa que els esdeveniments facin un recorregut des dels objectes de la part superior de la jerarquia i descendeixin fins a arribar a l'objecte en el qual s'ha creat l'esdeveniment.

Figura 4. Model d'objectes HTML dinàmic d'Internet Explorer 4

Ampliació

• all[]: array que conté totes les etiquetes HTML del document.

• applets[]: array que conté totes les miniaplicacions del document.

• children[]: array de tots els elements fill de l'objecte.

• embeds[]: array format pels objectes incrustats del document.

• images[]: array d'imatges del document.

• scripts[]: array de scripts del document.

• styleSheets[]: array d'objectes Style del document.

var element = document.all[2];   //element referencia el tercer objete del 
                        //document HTML
var element2 = document.all["Enviar"];   //element2 referencia l'objeto del 
                           //document HTML con amb "Enviar" 

var element= document.getElementById("p1").firstChild;
element.data ="L'estructura";

var element= document.getElementById("camp1");
element.setAttribute("value","Introdueix text...");

• Creació del nou node que es vol inserir.

• Localització de la ubicació en la jerarquia en què s’inserirà.

• Inserció del nou node en la ubicació adequada.

nouParagraf = document.createElement("P");

nouText = document.createTextNode("Node nou de text");

function clonaIcopia(idNodeC,idNodeI){
   var nodeAClonar = document.getElementById(idNodeC);
   var nodeClonat = nodeAClonar.cloneNode(true);
   var puntInsercio = document.getElementById(idNodeI);
   puntInsercio.appendChild(nodeClonat);
}

• Rep dos paràmetres, el primer és l’“id” del node que es clonarà, i el segon paràmetre és l’“id” del node al qual s’inserirà el clon com a fill.

• La variable nodeAClonar és la referència al node que es vol clonar, localitzat amb la funció getElementById

• La variable nodeClonat és la referència al nou node que s'ha clonat. En passar-lo a la funció cloneNode, el paràmetre “true” clonarà no solament l'element en si, sinó també tots els seus fills.

• La variable puntInsercio és la referència del node pare al qual s’inserirà en la línia de codi següent el node clonat.

• L'última línia de codi mostra un nou mètode que serà presentat a continuació, però és intuïtiu pensar que el mètode està inserint el node clonat com a fill del node puntInsercio.

var nouNode = document.getElementById("form1").cloneNode(true);
var pare = document.getElementById("cap");
padre.appendChild(nouNode);

• Es crea un clon d'un formulari identificat amb l'id “form1”, ja que no solament es clona l'etiqueta del formulari sinó totes les seves filles en passar com a paràmetre del mètode cloneNode el valor true.

• Es localitza el node pare sobre el qual s'inserirà el formulari; aquest està identificat amb l'id “cab”.

• El codi finalitza amb l'addició del formulari com el més petit dels fills del node “cab”, per a la qual cosa s'empra el mètode "appendChild".

nodeActual.removeChild(nodeActual.lastChild);

open(url, nom, característiques, reemplaçar)

• url és l'adreça que indica el document que es carregarà en la finestra.

• nom és el nom de la finestra (que s'utilitzarà per a referenciar-la posteriorment).

• característiques és una cadena delimitada per comes que indica un conjunt de propietats de la finestra que es crearà.

• reemplaçar és un valor lògic i opcional que indica si l'URL especificat ha de reemplaçar el contingut de la finestra actual.

finestraUoc = open("https://www.uoc.edu", "UOC", "height=300, width=200");

finestraUoc.close();

• alwaysLowered: valor booleà que indica que la nova finestra quedarà per sota de la resta de finestres.

• alwaysRaised: valor booleà que indica que la nova finestra quedarà per sobre de la resta de finestres.

• dependent: valor booleà que indica que la finestra creada és depenent de la finestra pare. Això implica que en tancar una finestra es tanquen totes les dependents d'aquesta.

• directories: valor booleà que indica que la nova finestra contindrà els botons de directori estàndard.

• height: valor en píxels que especifica l'altura de la finestra.

• hotkeys: valor booleà que indica si les tecles ràpides del navegador estan habilitades en la nova finestra.

• innerHeight: valor en píxels que especifica l'alt del contingut de la finestra.

• innerWidth: valor en píxels que especifica l'amplada del contingut de la finestra.

• left: valor en píxels que especifica la coordenada x en la qual apareixerà la nova finestra.

• location: valor booleà que indica si la barra d'adreces ha de mostrar-se en la finestra.

• menubar: valor booleà que indica si la nova finestra contindrà la barra de menú.

• outerHeight: valor en píxels que especifica la dimensió vertical de les vores de la nova finestra.

• resizable: valor booleà que indica si l'usuari podrà canviar la grandària de la nova finestra.

• scrollbars: valor booleà que indica si la nova finestra contindrà les barres de desplaçament (o scroll) quan el document excedeixi els límits de la finestra.

• status: valor booleà que indica si la nova finestra contindrà la barra d'estat.

• titlebar: valor booleà que indica si la nova finestra contindrà la barra de títol.

• toolbar: valor booleà que indica si la nova finestra contindrà la barra d'eines estàndard.

• top: valor en píxels que especifica la coordenada y en la qual apareixerà la nova finestra.

• width: valor en píxels que especifica l'amplada de la finestra.

• z-lock: valor booleà que especifica si no es podrà canviar l'ordre de pila relatiu a altres finestres, fins i tot si aquesta obté el focus.

function obrir(){
   url= "https://www.uoc.edu";
   caract = "left=50, top=50, status=yes, menubar=yes, toolbar=no,
   width=590, height=250, directory=no, resize=no, scrollbars=yes";
   return window.open(url,"Exemple obertura",caract);
}

• alert(). Crea una finestra amb un missatge i el botó Acceptar que tanca la finestra.

• confirm(). Crea una finestra que mostra un missatge i espera que l'usuari respongui prement el botó Acceptar o Cancel·lar. Aquest retorna el valor true si s'ha premut el botó Acceptar i false si s'ha premut Cancel·lar

• prompt(). Crea una finestra que mostra un missatge i sol·licita dades a l'usuari a partir d'un camp de text. Igual que confirm() disposa dels botons Acceptar i Cancel·lar. En cas de pressionar Cancel·lar, el mètode retornarà el valor null, en cas contrari, retornarà el contingut del camp de text introduït per l'usuari.

var entrada = prompt("Entra una dada: ", 0);
alert("La dada introduïda és: " + entrada);
var resposta = confirm("Vols tancar la finestra?");
if (resposta==true)window.close();

var timerID = null;
var timerRunning = false;
function stopRellotge(){
   if(timerRunning)
      clearTimeout(timerID);
   timerRunning = false;
}
function startRellotge(){
   stopRellotge();//S'ha d'assegurar que el rellotge és parat
   ver();
}
function ver(){
   var now = new Date();
   var hours = now.getHours();
   var minutes = now.getMinutes();
   var seconds = now.getSeconds();
   var timeValue = "" + ((hours > 12) ? hours - 12 : hours);
   timeValue += ((minutes < 10) ? ":0" : ":") + minutes;
   timeValue += ((seconds < 10) ? ":0" : ":") + seconds;
   timeValue += (hours >= 12) ? " P.M." : " A.M.";
   document.reloj.face.value = timeValue;
   timerID = setTimeout("ver()",1000);
   timerRunning = true;
}

• Fer una crida a la funció “startRellotge()”.

• Disposar d'un formulari i un camp de text que es diguin rellotge i face respectivament.

var v1;
function obrir(){
   var caract = "left=200, top=10, width=400, height=210, statusbar=no, menubar=no, directory=no,
   resize=no, scrollbars=no";
   v1=window.open("Moviment.html","Finestra mòbil",caract);
   ini_moure()
}

function ini_moure(){
   setInterval('moure()',500);
}

function moure(){
   v1.moveBy(5,10);
}

• L'objecte Hidden és un camp més del formulari, però no és visible quan es visualitza la pàgina en el navegador. Al no ser visible, l'usuari no pot modificar el seu valor, només es pot modificar des de la programació, canviant el valor de la propietat value. S'utilitza per enviar parells de dades (nomeni/valor) quan es fa un submit del formulari.

• L'objecte Text és un camp del formulari en el qual l'usuari pot introduir text.

• Els objectes URL, Search i Email, són objectes similars a l'objecte Text, el fet de diferenciar-los de Text ens pot ajudar a l'hora de realitzar validacions, o fins i tot pot fer que el navegador treballi amb aquests camps de manera diferent de com ho faria amb un objecte Text, per exemple, en el navegador d'un dispositiu mòbil a fi del tipus URL adaptarà el seu teclat per posar més accessibles les tecles amb el contingut típoco d'una URL com podrien ser “/” o “.com”.

• L'objecte Password és un camp del formulari en el qual l'usuari pot introduir text. Cada caràcter introduït es visualitza en la pantalla mitjançant un asterisc.

• L'objecte Textarea és un camp del formulari en el qual l'usuari pot introduir text en diverses línies. Per indicar en el text introduït un salt de línia, ha d'especificar-se el caràcter concret per a això. Aquest caràcter varia segons la plataforma: en Unix és \n; en Windows és \r; i en Macintosh és \n. JavaScript comprova aquests possibles carácteres i els trasllada a la plataforma de l'usuari. L'objecte Textarea es construeix mitjançant l'etiqueta <textarea> d'HTML.

<input type="number" max="100" step="10">

<input type="range" id="myRange" value="75"> 

<input type="file" size=50 name="fileu">

• L'objecte Button representa un botó del formulari que no té cap acció predefinida.

• L'objecte Reset representa un botó del formulari, que té la particularitat de restablir els valors que per defecte tenen els elements del formulari.

• L'objecte Submit representa un botó del formulari, que té la particularitat d'enviar les dades del formulari.

A quin grup d'edat pertanys?<br><br>
<input type="radio" name="edat" value="1"> < 18
<input type="radio" name="edat" value="2"> 18 - 25
<input type="radio" name="edat" value="3" checked> 26 - 35
<input type="radio" name="edat" value="4"> > 35

Quins esports prefereix practicar?<br><br>
<input type="checkbox" name="esports" value="1" checked> Halterofília
<input type="checkbox" name="esports" value="2" checked> Esgrima
<input type="checkbox" name="esports" value="3"> Natació
<input type="checkbox" name="esports" value="4"> Tenis
<input type="checkbox" name="esports" value="5"> Cap

• Si en un objecte Select, no hi ha cap element seleccionat, el valor de la propietat selectedIndex és –1.

• En el cas de poder seleccionar diversos elements de la llista, la propietat selectedIndex conté la posició del primer element de la llista que està seleccionat.

• En el paràmetre type, s'especifica si en la llista es podran seleccionar diversos elements o solament un. Els valors per indicar-ho són: "select-multiple" i "select-one".

• Igual que els objectes anteriors, la propietat value no es visualitza en el document, és el valor que s'envia amb la resta de dades del formulari.

<select name="elements">
   <option value="O">Oxigen
   <option value="N">Nitrogen
   <option value="Na">Sodi
   <option value="Ag">Plata
   <option value="H">Hidrogen
   <option value="K">Potassi
</select>

• Mitjançant la etiqueta <option> d'HTML

• Mitjançant el constructor: new option (text, value, defaultSelected, selected), els paràmetres del qual són opcionals i tenen el següent significat:

  • text: especifica el text que es veurà en la llista.

  • value: especifica el valor que s'enviarà amb les dades del formulari si l'opció està seleccionada.

  • defaultSelected: Especifica el valor inicial de l'opció, true si és seleccionat i false en cas contrari.

  • selected: especifica l'estat actual de l'opció, és a dir, si està seleccionada o no.

<etiqueta controlador_d_esdeveniment="Codi JavaScript">

<a href="https://www.uoc.es" onmouseover="lamevaFuncio()">

<html>
<head>
<script type="text/javascript">
   function lamevaFuncio() {
      alert("Enllaç a la pàgina inicial de la UOC");
   }
</script>
</head>
<body>
<a href="https://www.uoc.es" onmouseover="lamevaFuncio()">Poseu el punter sobre aquest enllaç.</a>
</body>
</html>

objecte.controlador_d_esdeveniment = funció_controladora;

<html>
<head>
<script type="text/javascript">
   function direccio() {
      alert("La URL d'aquesta pàgina és: " + document.URL );
   }
</script>
</head>
<body onload="direccio()">
</body>
</html>

<html>
<head>
<script type="text/javascript">
   function direccio() {
      alert("La URL d'aquesta pàgina és: " + document.URL);
   }
   window.onload = direccion; //nom del controlador en minúscules
</script>
</head>
<body>
</body>
</html>

• Un formulari en el qual s'ha definit un controlador per a l'esdeveniment submit, de manera que aquest controlador valida els valors introduïts en el camp i retorna true o false, depenent de si aquests són correctes. En cas que es retorni true, l'enviament del formulari es fa, i si es retorna false, es cancel·la.

• Un altre exemple seria l'esdeveniment clic sobre un enllaç, de manera que si es retorna false, la càrrega de la pàgina es cancel·la.

<a href="https://www.uoc.edu" onclick="return confirm('Vols anar al Campus? ') ">Campus UOC</a>

<a href="https://www.uoc.edu">Campus UOC</a>
<script type="text/javascript">
   function controla(e){
      alert("Has fet clic a: X="+ e.screenX +" Y="+ e.screenY);
   }
document.links[0].onclick=controla;
</script>

<a href="https://www.uoc.edu">Campus UOC</a>
<script type="text/javascript">
   function controla(){
      alert("Has fet clic a: X="+ event.screenX +" Y="+ event.screenY);
   }
   document.links[0].onclick= controla;
</script>

<a href="https://www.uoc.edu">Campus UOC</a>
<script type="text/javascript">
   function controla(e){
      e=(e) ? e : event; 
      alert("Has fet clic a: X="+ e.screenX +" Y="+ e.screenY);
   }
   document.links[0].onclick=controla;
</script>

<a href="https://www.uoc.edu" id="uoc">Campus UOC</a>
<script type="text/javascript">
   function controla;(e){
      alert("Has fet clic a: X="+ e.screenX +" Y="+ e.screenY);
   }
   document.getElementById("uoc").onclick=controla;;
</script>

• La funció controladora rep en el seu paràmetre a l'objecte Event, que podrà consultar-se a l'interior de la funció.

• L'assignació de l'esdeveniment a l'objecte enllaç es fa utilitzant les propietats estàndard del DOM.

• Permet especificar si l'esdeveniment es manejarà durant la fase de captura o durant la fase d'ascens, mentre que en el mètode presentat anteriorment, l'esdeveniment es captura quan l'objecte és la destinació i durant la fase d'ascens, en cas que n’hi hagi per a l'esdeveniment.

• Permet vincular diversos controladors per a un mateix esdeveniment i un mateix objecte.

• Permet vincular un controlador a un node del tipus text.

node.addEventListener(tipus,controlador,sentit);

• Tipus: és una cadena que indica l'esdeveniment que s’escoltarà.

• Controlador: és la funció que manejarà l'esdeveniment.

• Sentit: és un valor booleà que indica si es captura en la fase de captura o en la fase d'ascens.

• preventDefault(): que cancel·la el comportament estàndard d'un esdeveniment.

• stopPropagation(): que atura el flux de l'esdeveniment per mitjà de la jerarquia.

<a href="https://www.uoc.edu" id="uoc">Campus UOC</a>
<script type="text/javascript">
   function NoAltClick(e){
      if (e.altKey){
         e.preventDefault();
         e.stopPropagation();
      }
   }
   function MostraClick(){
      alert("S'ha fet click");
   }
   document.addEventListener("click",NoAltClick,true);
   document.getElementById("uoc").addEventListener("click",MostraClick,true);
</script>