Utilización del Modelo de
6 Objetos del Documento
(Dom-Document Object Model)
Objetivos del capítulo
44 Reconocer el modelo de objetos
del documento de una páginas
Web, identificando sus objetos,
propiedades y métodos.
44 Generar y verificar código
que acceda a la estructura
del documento y crear nuevos
elementos de la estructura.
44 Asociar acciones a los eventos del
modelo.
44 Identificar diferencias del
modelo en distintos navegadores.
Programar aplicaciones para
que funcionen en los distintos
navegadores.
44 Separar las facetas, contenido,
aspecto y comportamiento en
aplicaciones Web.
DESARROLLO WEB EN ENTORNO CLIENTE © RA-MA
Presentación del capítulo
En este capítulo se introduce el estándar de W3C que define cómo acceder a los documentos, documentos
como, por ejemplo, HTML y XML. A este estándar se le llama Document Object Model o DOM, que traducido
significa ‘modelo de objetos del documento’. El DOM es una interfaz de programación de aplicaciones (API) de
la plataforma W3C y cuenta con un lenguaje neutro que permite a los programas y scripts acceder al documento
y actualizar dinámicamente su contenido, estructura y estilo. El DOM crea una estructura en árbol formada
por nodos que permite organizar de una forma ordenada la complejidad de una página HTML. El acceso a la
estructura se puede realizar recorriendo el árbol o recuperando nodos de forma independiente a partir de su
identificador.
Contenidos
6.1 El modelo de objetos del documento (dom)
6.1.1 Tipos de modelos DOM
6.1.2 Estructura del árbol DOM
6.2 Objetos del modelo. propiedades y metodos de los objetos
6.2.1 Objetos del modelo
6.2.2 La interfaz Node
6.3 acceso al documento desde código
6.3.1 Acceso a los tipos de nodo
6.3.2 Acceso directo a los nodos
6.3.3 Acceso a los atributos de un nodo tipo element
6.3.4 Creación y eliminación de nodos
6.4 programación de eventos
6.4.1 Carga de la página HTML
6.4.2 Comprobar si el árbol DOM está cargado
6.4.3 Actuar sobre el DOM al desencadenarse eventos
6.5 diferencias en las implementaciones del modelo
6.5.1 Adaptaciones de código para diferentes navegadores
6.6 uso de librerÍas de terceros
RESUMEN DEL CAPÍTULO
ejercicios propuesTOS
TEST DE CONOCIMIENTOS
96
© RA-MA 6 n UTILIZACIÓN DEL MODELO DE OBJETOS DEL DOCUMENTO
Tiempo estimado de duración
El tiempo estimado de duración para el desarrollo de este capítulo se muestra en la tabla 6.1. Su desarrollo
depende del calendario lectivo y de las características del alumnado.
Tabla 6.1 Tiempo estimado de duración del capítulo 6
Desarrollo Contenidos Tiempo estimado
8% Apartado 6.1 1 hora
17 % Apartado 6.2 2 horas
42 % Apartado 6.3 5 horas
17 % Apartado 6.4 2 horas
8% Apartado 6.5 1 hora
8% Apartado 6.6 1 hora
100 % Total 12 horas
Actividades de enseñanza y aprendizaje
En el desarrollo de este capítulo se podrán realizar las siguientes actividades:
nn Introducción de los contenidos del capítulo.
nn Realización de un listado con los tipos de nodos que existen en el DOM HTML y su respectiva descripción.
nn Realización de los ejemplos presentes en los distintos apartados, modificándolos para aumentar su
complejidad.
nn Elaboración de ejemplos para acceder a los nodos de una página web, incluyendo sus atributos.
nn Verificación del funcionamiento de las librerías de terceros para resolver el problema del desarrollo de
aplicaciones web en diferentes navegadores.
nn Realización de actividades y ejercicios propuestos.
nn Realización del test de conocimientos y repaso de los conceptos más importantes.
97
DESARROLLO WEB EN ENTORNO CLIENTE © RA-MA
Metodología
Para el desarrollo de este capítulo es necesario que los alumnos hayan adquirido correctamente los
conocimientos sobre el lenguaje JavaScript. En especial, deben haber comprendido los conceptos de objeto,
función, formulario y evento del lenguaje.
El trabajo en el aula consistirá en la exposición de los contenidos del capítulo, siguiendo estos procedimientos:
nn Introducción del modelo de objetos del documento (DOM).
nn Definición de los tres niveles que componen DOM: núcleo, XML y HTML.
nn Definición de la estructura en forma de árbol de DOM.
nn Introducción de los diferentes tipos de nodos que pueden existir en un árbol DOM con sus respectivos
métodos y propiedades.
nn Explicación de la forma en la que se accede a los nodos desde el código, con la posibilidad de creación y
eliminación de estos últimos.
nn Introducción de las diferencias en las implementaciones del modelo respecto a los navegadores y
presentación del uso de librerías externas para resolver este problema.
Posteriormente, los alumnos deben desarrollar los ejercicios y test de conocimientos propuestos, para lo
que dispondrán de toda la documentación que se considere oportuna, además de la asistencia permanente del
profesor.
Actividades e instrumentos de evaluación
La evaluación de los alumnos se podrá realizar a través de la asistencia y del trabajo diario realizado en el
aula, de los ejercicios y prácticas propuestas fuera del horario lectivo y de las pruebas de contenido teórico y
práctico. En este último caso, deberá establecerse un calendario de realización de estas pruebas junto con las
actividades de recuperación para aquellos alumnos que no las superen.
La evaluación de los alumnos se puede realizar siguiendo estos criterios, que pueden incluirse en la
programación didáctica de este módulo:
nn Conocer la estructura del árbol DOM.
nn Conocer los diferentes tipos de nodos que existen en el DOM HTML.
nn Conocer las propiedades y los métodos del objeto Node.
98
© RA-MA 6 n UTILIZACIÓN DEL MODELO DE OBJETOS DEL DOCUMENTO
nn Describir la forma de acceder desde el código a los elementos de una página HTML a través del árbol
DOM.
nn Saber programar eventos para relacionar la interacción del usuario con las acciones de DOM.
nn Saber adaptar el código para los diferentes navegadores.
Solucionario de actividades
6.1a
Realice un script que recorra y muestre con un alert de JavaScript cada tipo de nodo del árbol de una
página HTML que previamente haya creado.
Solución
Inicialmente se puede crear un simple formulario web como el que se presenta a continuación:
<html>
<head>
<title>Formulario para validar</title>
<script type=”text/javascript”
src=”actividad_1.js” >Texto script</script>
</head>
<body>
<p>
Primer texto que se visualiza en la Página
</p>
<div>Esto es un div</div>
<div>Otro div que me encuentro</div>
<p>Hay muchos párrafos</p>
<button type=”button”
onclick=”muestraArbol()”>Muestra Árbol
DOM</button>
</body>
</html>
99
DESARROLLO WEB EN ENTORNO CLIENTE © RA-MA
El fichero denominado en este caso actividad_1.js contiene una función llamada muestraArbol(), la
cual recorre y muestra todos los tipos de nodos presentes en el formulario que se ha creado con anterioridad.
function muestraArbol()
{
// Nodo document, NIVEL 1
alert( “NODO: “ + document.nodeName + “\nTIPO: “
+ document.nodeType + “\nVALOR: “ +
document.nodeValue);
// Nodo html
var nodoHtml = document.documentElement;
// Recorre hijos de html, NIVEL 2
for(var i=0; i < nodoHtml.childNodes.length; i++)
{
alert( ”HIJOS HTML: ” + nodoHtml.childNodes[i]
+ ”\nTIPO: ” + nodoHtml.childNodes[i].nodeType
+ ”\nVALOR: ” +
nodoHtml.childNodes[i].nodeValue);
}
// Nodo head
var nodoHead = nodoHtml.childNodes[0];
// Recorre hijos de head, NIVEL 3
for(var i=0; i < nodoHead.childNodes.length; i++)
{
alert( “HIJOS HEAD: “ + nodoHead.childNodes[i]
+ “\nTIPO: “ + nodoHead.childNodes[i].nodeType
+ “\nVALOR: “ +
nodoHead.childNodes[i].nodeValue);
// Recorre nietos de head, NIVEL 4
for(var j=0; j < nodoHead.childNodes[i].
childNodes.length;j++)
{
alert( “NIETOS HEAD: “ +
nodoHead.childNodes[i].childNodes[j] +
“\nTIPO: “ +
100
© RA-MA 6 n UTILIZACIÓN DEL MODELO DE OBJETOS DEL DOCUMENTO
nodoHead.childNodes[i].childNodes[j].nodeType
+ “\nVALOR: “ + nodoHead.childNodes[i].
childNodes[j].nodeValue);
}
// Recorre nodo body
var nodoBody = nodoHtml.childNodes[2];
// Recorre hijos de body, NIVEL 3
for(var i=0; i < nodoBody.childNodes.length; i++)
{
alert( “HIJOS BODY: “ + nodoBody.childNodes[i]
+ “\nTIPO: “ + nodoBody.childNodes[i].nodeType
+ “\nVALOR: “ +
nodoBody.childNodes[i].nodeValue);
// Recorre nietos de body, NIVEL 4
for(var j=0; j < nodoBody.childNodes[i].
childNodes.length; j++){
alert( “NIETOS BODY: “ +
nodoBody.childNodes[i].childNodes[j]+
“\nTIPO: “ +
nodoBody.childNodes[i].childNodes[j].nodeType
+ “\nVALOR: “ + nodoBody.childNodes[i].
childNodes[j].nodeValue);
}
}
}
6.1b
Realice dos tablas, una con las constantes de la interfaz node y otra con los métodos, indicando los valores
que reciben y los que devuelven.
101
DESARROLLO WEB EN ENTORNO CLIENTE © RA-MA
Solución
La tabla correspondiente a las constantes de la interfaz node es la siguiente:
Nombre de la constante Valor
Node.ELEMENT_NODE 1
Node.ATTRIBUTE_NODE 2
Node.TEXT_NODE 3
Node.CDATA_SECTION_NODE 4
Node.ENTITY_REFERENCE_NODE 5
Node.ENTITY_NODE 6
Node.PROCESSING_INSTRUCTION_NODE 7
Node.COMMENT_NODE 8
Node.DOCUMENT_NODE 9
Node.DOCUMENT_TYPE_NODE 10
Node.DOCUMENT_FRAGMENT_NODE 11
Node.NOTATION_NODE 12
La otra tabla que se muestra se corresponde a la tabla que recoge la información de los métodos de la interfaz
node:
Propiedad/ Método Valor devuelto Descripción
nodeName String Nombre del nodo (no está definido para algunos tipos de
nodo).
nodeValue String Valor del nodo (no está definido para algunos tipos de
nodo).
nodeType Number Una de las 12 constantes definidas anteriormente.
ownerDocument Document Referencia del documento al nodo al que pertenece.
firstChild Node Referencia al primer nodo de la lista childNodes.
lastChild Node Referencia al último nodo de la lista childNodes.
childNodes NodeList Lista de todos los nodos hijo del nodo actual.
parentNode Node Referencia al padre del nodo hijo.
previousSibling Node Referencia al nodo hermano anterior o null si este nodo
es el primer hermano.
102
© RA-MA 6 n UTILIZACIÓN DEL MODELO DE OBJETOS DEL DOCUMENTO
nextSibling Node Referencia al nodo hermano siguiente o null si este nodo
es el último hermano.
hasChildNodes() Bolean Devuelve true si el nodo actual tiene uno o más nodos
hijo.
attributes NamedNodeMap Se emplea con nodos de tipo Element. Contiene
objetos de tipo Attr que definen todos los atributos del
elemento.
appendChild(nodo) Node Añade un nuevo nodo al final de la lista childNodes.
removeChild(nodo) Node Elimina un nodo de la lista childNodes.
replaceChild(nuevoNodo, Node Reemplaza el nodo anteriorNodo por el nodo
anteriorNodo) nuevoNodo.
insertBefore(nuevoNodo, Node Inserta el nodo nuevoNodo antes que la posición del
anteriorNodo) nodo anteriorNodo dentro de la lista childNodes.
6.1c
Haga un pequeño esquema de cuáles son las distintas formas de acceder a un nodo en la estructura de árbol.
Solución
A continuación se muestran las distintas formas que existen de acceder a un elemento de la estructura del
árbol DOM.
nn Con la ruta completa:
var obj_html = document.documentElement;
nn A partir de un nodo, al primer hijo y al último hijo:
var obj_head = obj_html.firstChild;
var obj_body = obj_html.lastChild;
nn Como si fuera un vector, a través de corchetes:
var obj_head = obj_html.childNodes[0];
var obj_body = obj_html.childNodes[1];
nn A través del nombre de su etiqueta y accediendo a la posición que ocupa en el vector:
var divs =
document.getElementsByTagName(“div”);
var primerDiv = divs[0];
var segundDiv = divs[1];
103
DESARROLLO WEB EN ENTORNO CLIENTE © RA-MA
nn A través del nombre del elemento:
<div name=”primero”>…</div>
var divPrimero = document.getElementsByName(“primero”);
nn A través del id del elemento:
<div id=”pie”>
var pie = document.getElementById(“pie”);
6.1d
Describa en forma de puntos cuáles son los pasos para crear y eliminar un nodo tipo element que tiene a
su vez un valor de texto.
Solución
Los pasos para crear un nodo de tipo element son los siguientes:
nn Crear un nodo de tipo element:
var parrafo = document.createElement(“p”);
nn Crear un nodo de tipo texto:
var textoParrafo =
document.createTextNode(“Prueba de texto”);
nn Añadir al nodo de tipo element el nodo de tipo texto:
div.appendChild(textoParrafo);
Los pasos para eliminar un nodo de tipo element son los siguientes:
nn Se busca el nodo que se quiere eliminar (primer párrafo del árbol):
var parr =
document.getElementsByTagName(“p”)[0];
nn Por último, se elimina el nodo a través de la referencia a su padre.
div.parentNode.removeChild(parr);
104
© RA-MA 6 n UTILIZACIÓN DEL MODELO DE OBJETOS DEL DOCUMENTO
6.1e
Enumere los pasos para realizar la inserción de un nuevo nodo en el árbol. Para ello hay que tener en cuenta
que la página debe estar cargada completamente.
Solución
Los pasos para crear un nodo de tipo element son los siguientes:
nn Para realizar la inserción de un nuevo elemento en el árbol es de vital importancia que la página esté
cargada completamente. En el caso de que esto no sea así, el árbol DOM no se habrá construido y, por
tanto, se podrán producir errores.
nn Para comprobar que la página se ha cargado correctamente se puede utilizar el evento onload sobre el
objeto Window. De esta forma se puede asegurar que las acciones a tomar no se realizan hasta que el
árbol no esté construido completamente.
nn Se añade el nodo correspondiente (que previamente tiene que haber sido creado en la actividad anterior)
al árbol, asociándolo a un nodo.
document.body.appendChild(parrafo);
Solucionario de ejercicios propuestos
Se propone realizar una calculadora. El funcionamiento de la misma será el siguiente. Dispondrá de
números del 0 al 9 y de los signos +, −, *, /, =. Para contener cada uno de estos números y signos se usará una
etiqueta div (un div para cada uno). Existirá otra etiqueta div para mostrar el resultado. El funcionamiento
de la calculadora será el mismo que el de la calculadora de Windows. Al pulsar en la etiqueta div que contenga
cada número, el div de resultado añadirá el valor a la izquierda del que existía antes, y así sucesivamente
hasta pulsar un signo. Cuando se pulse el signo se mostrará en la pantalla de resultado. En el siguiente paso
se volverá a introducir otro número como antes, hasta que se pulse la tecla igual. Al haber pulsado el igual se
mostrará el resultado en el div de resultado. Se deberá incluir un div que permita inicializar la calculadora.
105
DESARROLLO WEB EN ENTORNO CLIENTE © RA-MA
Solución
El primer paso es crear una página web que contenga una tabla con todos los números del 0 al 9 además de
las operaciones pedidas en la calculadora. Para ello se debe crear un fichero con el siguiente código:
<html>
<head>
<title>Calculadora en JavaScript</title>
<script type=”text/javascript”
src=”ejercicio_propuesto_6.js” ></script>
<link rel=”StyleSheet”
href=”ejercicio_propuesto_6.css” media=”all”
type=”text/css”>
</head>
<body>
<p>Calculadora en JavaScipt</p>
<form name”formulario” action=”validado.html”
onsubmit=”return valorTodo();”>
<div>
<table border=”1” >
<tr>
<td colspan=”5”> <div class=”pantalla”
id=”pantalla”>0</div> </td>
</tr>
<tr>
<td id=”siet”> <div id=”siete”
class=”caracter” onclick=”return
valor(‘7’,’siet’);”> 7 </div> </td>
<td id=”ocho”> <div id=”ocho”
class=”caracter” onclick=”return
valor(‘8’,’ocho’);”> 8 </div> </td>
<td id=”nuev”> <div id=”nueve”
class=”caracter” onclick=”return
valor(‘9’,’nuev’);”> 9 </div> </td>
<td id=”divi”> <div id=”dividir”
class=”caracter” onclick=”return
valor(‘/’,’divi’);”> / </div> </td>
<td id=”borr”> <div id=”borrar”
class=”caracter” onclick=”return
reiniciar(‘C’,’borr’);”> C </div> </td>
</tr>
<tr>
<td id=”cuat”> <div id=”cuatro”
class=”caracter” onclick=”return
valor(‘4’,’cuat’);”> 4 </div> </td>
106
© RA-MA 6 n UTILIZACIÓN DEL MODELO DE OBJETOS DEL DOCUMENTO
<td id=”cinc”> <div id=”cinco”
class=”caracter” onclick=”return
valor(‘5’,’cinc’);”> 5 </div> </td>
<td id=”seis”> <div id=”seis”
class=”caracter” onclick=”return
valor(‘6’,’seis’);”> 6 </div> </td>
<td id=”mult”> <div id=”multiplicar”
class=”caracter” onclick=”return
valor(‘*’,’mult’);”> * </div> </td>
<td id=”igua” rowspan=”3”> <div
class=”caracter” onclick=”return
valor(‘=’,’igua’);”> = </div> </td>
</tr>
<tr>
<td id=”uno”> <div id=”uno”
class=”caracter” onclick=”return
valor(‘1’,’uno’);”> 1 </div> </td>
<td id=”dos”> <div id=”dos”
class=”caracter” onclick=”return
valor(‘2’,’dos’);”> 2 </div> </td>
<td id=”tres”> <div id=”tres”
class=”caracter” onclick=”return
valor(‘3’,’tres’);”> 3 </div> </td>
<td id=”meno”> <div id=”menos”
class=”caracter” onclick=”return valor(‘-
‘,’meno’);”> - </div> </td>
</tr>
<tr>
<td id=”cero” colspan=”3”> <div
class=”caracter” onclick=”return
valor(‘0’,’cero’);”> 0 </div> </td>
<td id=”mas”> <div id=”sumar”
class=”caracter” onclick=”return
valor(‘+’,’mas’);”> + </div> </td>
</tr>
</table>
<br/>
<div id=”primero”>0</div>
<div id=”operacion”>0</div>
<div id=”segundo”>0</div>
</div>
</form>
</body>
</html>
107
DESARROLLO WEB EN ENTORNO CLIENTE © RA-MA
Al seleccionar cada uno de los números y cada una de las operaciones, se invoca a una serie de funciones
que se definen en el fichero denominado ejercicio_propuesto_6.js, el cual contiene todas las operaciones
que se realizan en la calculadora:
function valor(num,celda)
{
//alert(“VALOR: “ + num);
color(celda);
var primero = document.getElementById(‘primero’).
firstChild.nodeValue;
var segundo = document.getElementById(‘segundo’).
firstChild.nodeValue;
var operador = document.getElementById(
‘operacion’).firstChild.nodeValue;
var resultado=””;
var valor = document.getElementById(‘pantalla’).
firstChild.nodeValue;
if((num==’+’) || (num==’-’) || (num==’*’) || (
num==’/’) ){
document.getElementById(‘operacion’).
firstChild.nodeValue = num;
operador = num;
document.getElementById(‘pantalla’).
firstChild.nodeValue = ‘0’;
}
else{
if((operador!=’0’) && (document.getElementById(
‘primero’).firstChild.nodeValue!=’0’)){
rellenarPantalla(num);
document.getElementById(‘segundo’).
firstChild.nodeValue=document.getElementById(
‘pantalla’).firstChild.nodeValue;
segundo =document.getElementById(‘pantalla’).
firstChild.nodeValue;
}
}
if ((segundo==’0’) && (operador==’0’) ){
rellenarPantalla(num);
document.getElementById(‘primero’).
firstChild.nodeValue = document.getElementById(
‘pantalla’).firstChild.nodeValue;
primero = document.getElementById(‘pantalla’)
.firstChild.nodeValue;
}
108
© RA-MA 6 n UTILIZACIÓN DEL MODELO DE OBJETOS DEL DOCUMENTO
if((primero != ‘0’) && (operador != ‘0’) &&
(segundo != ‘0’) && (num == ‘=’) ){
if (operador==’+’){
resultado = parseInt(primero) +
parseInt(segundo);
}
if (operador==’-’){
resultado = parseInt(primero) –
parseInt(segundo);
}
if (operador==’*’){
resultado = parseInt(primero) *
parseInt(segundo);
}
if (operador==’/’){
resultado = parseInt(primero) /
parseInt(segundo);
}
document.getElementById(‘pantalla’).
firstChild.nodeValue = resultado;
}
return true;
}
function rellenarPantalla(num)
{
if(document.getElementById(‘pantalla’).
firstChild.nodeValue==’0’){
//alert(“DOS”);
document.getElementById(‘pantalla’).firstChild.
nodeValue = num;
}else{
//alert(“TRES”);
document.getElementById(‘pantalla’).firstChild.
nodeValue = document.getElementById(
‘pantalla’).firstChild.nodeValue + num;
}
}
function reiniciar()
{
document.getElementById(‘borr’).
style.backgroundColor = ‘#FFA500’;
setTimeout(“blanquea()”,300);
109
DESARROLLO WEB EN ENTORNO CLIENTE © RA-MA
document.getElementById(‘primero’).firstChild.
nodeValue=’0’;
document.getElementById(‘segundo’).firstChild.
nodeValue=’0’;
document.getElementById(‘operacion’).firstChild.
nodeValue=’0’;
document.getElementById(‘pantalla’).firstChild.
nodeValue=’0’;
}
function color(celda) {
document.getElementById(celda).style.
backgroundColor = ‘#FFA500’;
setTimeout(“blanquea()”,300);
}
function blanquea(){
document.getElementById(‘siet’).style.
backgroundColor = ‘#FFFFFF’;
document.getElementById(‘ocho’).style.
backgroundColor = ‘#FFFFFF’;
document.getElementById(‘nuev’).style.
backgroundColor = ‘#FFFFFF’;
document.getElementById(‘divi’).style.
backgroundColor = ‘#FFFFFF’;
document.getElementById(‘borr’).style.
backgroundColor = ‘#FFFFFF’;
document.getElementById(‘cuat’).style.
backgroundColor = ‘#FFFFFF’;
document.getElementById(‘cinc’).style.
backgroundColor = ‘#FFFFFF’;
document.getElementById(‘seis’).style.
backgroundColor = ‘#FFFFFF’;
document.getElementById(‘mult’).style.
backgroundColor = ‘#FFFFFF’;
document.getElementById(‘igua’).style.
backgroundColor = ‘#FFFFFF’;
document.getElementById(‘uno’).style.
backgroundColor = ‘#FFFFFF’;
document.getElementById(‘dos’).style.
backgroundColor = ‘#FFFFFF’;
document.getElementById(‘tres’).style.
backgroundColor = ‘#FFFFFF’;
document.getElementById(‘meno’).style.
backgroundColor = ‘#FFFFFF’;
document.getElementById(‘cero’).style.
110
© RA-MA 6 n UTILIZACIÓN DEL MODELO DE OBJETOS DEL DOCUMENTO
backgroundColor = ‘#FFFFFF’;
document.getElementById(‘mas’).style.
backgroundColor = ‘#FFFFFF’;
}
El fichero que contiene la hoja de estilos se presenta a continuación:
.calculadora{
text-align:center;
}
.pantalla{
text-align:right;
font-family:”Times New Roman”;
font-size:40px;
margin:0.25cm 0.25cm 0.25cm 0.25cm;
}
.caracter {
text-align:center;
font-family:”Times New Roman”;
font-size:40px;
margin:0.25cm 0.75cm 0.25cm 0.75cm;
}
Solución al test de conocimientos
Tabla 6.2 Soluciones al test de
conocimientos del capítulo 6
1: d 6: d
2: b 7: d
3: d 8: d
4: c 9: b
5: b 10: d
111
