DOM

INTRODUCCIN
DOM (Modelo de objetos del documento) es una especificacin del consorcio W3C que provee
una interface (API) para acceder y manipular dinmicamente el contenido, la estructura y el
estilo del contenido de una pgina WEB.
Cuando un navegador carga una pgina WEB, DOM representa a todos los elementos
(etiquetas y atributos) y todo el contenido de una manera estructurada, proporcionando,
adems, una serie de operaciones o funciones para agregar, eliminar, recuperar y modificar
tales elementos y contenido HTML, de forma dinmica.
Para administrar los diferentes elementos de una pgina HTML, DOM se apoya en JavaScript,
aunque es una especificacin independiente de cualquier lenguaje.
DOM fue desarrollado para documentos XML y posteriormente fue adaptado para documentos
HTML. En 1998, el W3C public la primera versin, denominndose DOM nivel 1.
El mayor problema del uso de DOM, es que los diferentes navegadores an presentan
diferencias en el modelo de objetos del documento y algunas diferentes en la manera de
acceder a los elementos y al contenido de los documentos, provocando problemas de
compatibilidad. Para mejorar la compatibilidad, el W3C defini nuevas especificaciones
denominadas DOM nivel 2 y nivel 3.

DOM NIVEL 1
Especifica dos secciones: el ncleo, nivel 1, de DOM (API de bajo nivel que representa
cualquier documento de forma estructurada) y la seccin de HTML, nivel 1, que proporciona
una interface de alto nivel que permite interactuar con los elementos bsicos de una pgina
HTML y XML.

DOM NIVEL 2
DOM de nivel 2 proporciona, varias mejoras en relacin a DOM nivel 1, y el aadido del soporte
de vistas, eventos, estilos, navegacin y una propuesta de recomendacin de HTML. DOM 2
es la especificacin ms empleada por los navegadores actualmente, aunque algunos la
combinan con DOM 1 y aaden extensiones propietarias para mantener la compatibilidad con
los navegadores de versiones anteriores; sin embargo, la tendencia es a uniformizar el uso del
estndar.
Se debe tener en cuenta que DOM es sensiblemente dependiente de las especificaciones de
HTML, CSS y JavaScript empleados, toda vez que DOM acta directamente sobre las
etiquetas, atributos y funciones definidos por estos.

DOM NIVEL 3
Esta especificacin se lanz por el ao 2004 y an es un borrador que no ha sido completado
ni adoptado completamente por los desarrolladores de navegadores.
ESTRUCTURA DE OBJETOS DEL NAVEGADOR
Cada vez que un navegador carga una pgina, se crea automticamente una serie de objetos
que pueden ser usados desde JavaScript; los cuales son: window, document, frames, screen,
location, history y navigator.
El siguiente cuadro muestra la jerarqua de objetos creados por el navegador al cargar una
pgina Web:

Window es el objeto de mayor jerarqua en la estructura del contenido del navegador, del cual
derivan todos los dems elementos como si fueran propiedades suyas. Por cada ventana se
crea un objeto window.
De Window se derivan los objetos:
Document, es el objeto contenedor de todos los elementos de la pgina html: enlaces,
formularios, imgenes, marcos, etc.
Frames, contiene un arreglo o vector de los objetos frame; cada frame contiene, a su vez, otra
ventana.
Screen, contiene informacin de la ventana correspondiente a window, entre ellos: availHeight,
availWidth (alto y ancho de la pantalla en pixeles disponible para el navegador), height y width
que indican el alto y ancho de la pantalla en pixeles.
Location, contiene informacin de la URL que se est visualizando
History, contiene informacin de los URL visitados.
Navigator, contiene informacin acerca del navegador, como: nombre, versin, tipos MIME
soportados, plug in instalados y otros.
El acceso a los diferentes elementos de la pgina WEB se especifica mediante la notacin
clsica de objetos, a partir de window hasta el elemento en cuestin, separados por puntos;
por ejemplo, en la figura anterior, el acceso al componente option ser:
window.document.form.select.option;
aunque es comn omitir el nombre window cuando se trata del acceso a objetos de la misma
pgina.

ESTRUCTURA INTERNA DE LOS DOCUMENTOS CON DOM

DOM representa a todo documento WEB como un conjunto de nodos interconectados en una
estructura de tipo rbol, que comprende las diferentes etiquetas, contenido y elementos de
presentacin de la misma. Cada nodo tiene el siguiente conjunto de propiedades generales:
nodeName; devuelve una cadena con el nombre del nodo.
nodeValue; devuelve una cadena con el contenido del nodo.
nodeType; devuelve un nmero que identifica al tipo de nodo.
firstChild; devuelve el nodo correspondiente al primer hijo.
lastChild; devuelve el nodo correspondiente al ltimo hijo.
nextSibling; devuelve el nodo hermano siguiente.
previousSibling; devuelve el nodo hermano anterior.
parentNode; devuelve el nodo correspondiente al padre.
childNodes; devuelve un arreglo de nodos con todos los hijos.
hasChildNodes; devuelve true si el nodo tiene hijos.
Attributes; devuelve un arreglo de los atributos que contiene el nodo.
ownerDocument; devuelve el documento al que pertenece el nodo.
Por ejemplo, si se considera el siguiente diagrama, se tendr:
NodoA.firstChild; referencia a NodoA1
NodoA.lastChild; referencia a NodoA3
NodoA2.nextSibling; referencia a NodoA3
NodoA2.previousSibling; referencia a NodoA1
NodoA.childNodes[1].firstChild; referencia a NodoA21
NodoA3.parentNode; referencia a NodoA
NodoA22.parentNode.parentNode; referencia a NodeA
Sin embargo, las diferencias de la representacin de la estructura de nodos de una pgina
HTML, existente entre los navegadores provoca diferencias en el acceso a los mismos con
algunas de las operaciones anteriores.

TIPOS DE NODOS
La especificacin de DOM define los siguientes 12 tipos de nodos y el valor devuelto por los
atributos nodeName, nodeValue y nodeType:

TIPO DE NODO nodeName nodeValue nodeType

Element Nombre del elemento en Null 1
maysculas
Attr Nombre del atributo en Cadena 2
minsculas
Text #text Cadena 3
CDataSection #cdata-section Cadena 4
EntityReference Nombre de la entidad Null 5
referenciada
Entity Nombre de la entidad Null 6
ProcessingInstruction Nombre del destino Cadena 7
Comment #comment Cadena 8
Document #document Null 9
DocumentType Nombre del tipo de documento Null 10
DocumentFragment #document-fragment Null 11
Notation Nombre de la notacin Null 12
De los cuales los siguientes 5 tipos son los ms empleados:
Document, representa el nodo raz, del que derivan todos los dems nodos del rbol.
Element, representa a cada etiqueta de la pgina.
Attr, representa cada uno de los atributos de la pgina, compuesto por el nombre del atributo
y su valor.
Text, representa el contenido de las etiquetas.
Comment, representa los comentarios incluidos en la pgina.

REPRESENTACIN ARBREA DE UNA PGINA HTML

De acuerdo a la estructura interna de tipo rbol generado por DOM, cada nodo tiene
correspondencia con una etiqueta, un atributo, un contenido u otro objeto de la pgina, como
se muestra a continuacin con el siguiente cdigo:
<!doctype html>
<html lang="es">
<head>
<title> Ejemplo </title>
</head>
<body>
<h1> Cabecera </h1>
<p> Un prrafo </p>
</body>
</html>
Cuya representacin en DOM es:
El objeto document hace referencia a todo el documento html y proporciona una va para
acceder y operar con los diferentes elementos del documento.
A partir del nodo raz, cada etiqueta se transforma en un nodo de tipo Element; en
consecuencia, de la raz se derivan los nodos Head y Body.
De la etiqueta Head, a su vez, se crea un nodo de tipo Element correspondiente a la etiqueta
Title y de sta un nodo de tipo Text, correspondiente al contenido Ejemplo. Lo mismo sucede
en la otra rama del rbol.
NOTA: La especificacin formal de DOM, define la representacin con nodos de los espacios,
avances de lnea y tabulaciones, aunque algunos navegadores, principalmente en sus
versiones antiguas, los omiten.
El siguiente ejemplo ilustra el acceso a los elementos de la pgina anterior mediante las
operaciones de acceso:
<!doctype html>
<html lang="es">
<head>
<title> Ejemplo </title>
</head>
<body>
<h1>Cabecera </h1>
<p>Un p&aacute;rrafo</p>
<script>
alert(document.nodeName);
alert(document.nodeValue);
alert(document.nodeType);
alert(document.firstChild.nodeName);
alert(document.firstChild.nodeValue);
alert(document.firstChild.nodeType);
alert(document.firstChild.nextSibling.nodeName);
alert(document.firstChild.nextSibling.nodeValue);
alert(document.firstChild.nextSibling.nodeType);
alert(document.lastChild.firstChild.firstChild.nodeName);
alert(document.lastChild.nodeName);
 alert(document.lastChild.lastChild.nodeName);
alert(document.lastChild.lastChild.firstChild.nextSibling.firstChild.nodeValue);
</script>
</body>
</html>
La propiedad documentElement permite acceder al nodo correspondiente al elemento <html>
que es la raz de todo el contenido de la pgina.
<!doctype html>
<html lang="es">
<head>
<title>Ttulo de la pgina WEB</title>
</head>
<body><p>Esto es un simple prrafo</p>
<script>
alert(document.documentElement.nodeName);
alert(document.documentElement.firstChild.nodeName);
</script>
</body>
</html>
Una manera ms conveniente de acceder a los nodos consiste en emplear variables referencia
que apunten a los diferentes nodos como muestra el siguiente ejemplo:
<!doctype html>
<html lang="es">
<head>
<title>Ttulo de la pgina WEB</title>
</head>
<body><p>Esto es un simple prrafo</p>
<script>
var a=document;
b=a.documentElement;
c=b.firstChild;
d=c.firstChild;
alert(b.nodeName+" "+c.nodeName+" "+d.nodeName);
</script>
</body>
</html>
Tambien es factible acceder a los diferentes elementos de la pgina, a partir del nodo raz,
empleando el nombre de las etiquetas <body> y <head>, por ejemplo:
<!doctype html>
<html lang="es">
<head>
<title>Ttulo de la pgina WEB</title>
</head>
<body><p>Esto es un simple prrafo</p>
<script>
alert(document.head.nodeName);
alert(document.body.nodeName);
alert(document.body.firstChild.tagName);
</script>
</body>
</html>

MTODOS DE ACCESO A LOS NODOS

Para evitar el acceso a los nodos del documento a partir del nodo raz (y tambin dada la
diferencia existente entre navegadores), se han incorporado diferentes mtodos que permiten
el acceso directo a los nodos haciendo uso de las etiquetas <name> e <id>; stos son:
getElementsByTagName(etiq); devuelve un arreglo con todos los nodos con etiqueta igual a
etiq.
getElementsByName(nom); devuelve un arreglo con todos los nodos que tienen el atributo
name igual a nom.
getElementById(id); devuelve el nodo con el identificador igual a id.
El siguiente ejemplo ilustra el uso del mtodo getElementsByTagName():
El mtodo innerHTML devuelve todo el contenido en un nodo, por ejemplo:
<!doctype html>
<html lang=" es">
<head>
<title>Ttulo de la pgina WEB</title>
</head>
<body>
<p>Primer prrafo del documento</p>
<div>un texto dentro de div</div>
<p>Segundo prrafo del documento</p>
<p>Tercer prrafo del documento</p>
<script language="javascript">
var elem = document.getElementsByTagName("p");
for (i=0; i<elem.length; i++)
alert(elem[i].innerHTML);
alert(document.lastChild.lastChild.innerHTML);
</script>
</body>
</html>
El siguiente ejemplo ilustra el uso del mtodo getElementsByName():
<!doctype html>
<html lang=" es">
<head>
<title>Ttulo de la pgina WEB</title>
</head>
<body>
<p name="uno">Primer prrafo del documento</p>
<div name="uno">un texto dentro de div</div>
<p name="dos">Segundo prrafo del documento</p>
<p name="dos">Tercer prrafo del documento</p>
<script language="javascript">
var elem = document.getElementsByName("dos");
for (i=0; i<elem.length; i++)
alert(elem[i].firstChild.nodeValue);
</script>
</body>
</html>
Para lograr el acceso a un elemento especfico, se utiliza el mtodo getElementById, para ello,
cada elemento debe ser identificado con el atributo Id
<!doctype html>
<html lang=" es">
<head>
<title>Ttulo de la pgina WEB</title>
</head>
<body>
<p>Primer prrafo del documento</p>
<div id="d">un texto dentro de div</div>
<p>Segundo prrafo del documento</p>
<p>Tercer prrafo del documento</p>
<script language="javascript">
var elem = document.getElementById("d");
alert(elem.innerHTML);
</script>
</body>
</html>

CREACIN Y ELIMINACIN DE NODOS

Las operaciones que permiten insertar, modificar y eliminar elementos de las pginas web
dinmicas son:
createElement()
createAttribute()
createTextNode()
insertBefore()
replaceChild()
removeChild()
appendChild()
cloneNode()
La creacin de un elemento depende del tipo de etiqueta, debido a que cada una tiene sus
atributos y contenido particular.
La creacin de un prrafo, requiere crear un nodo tipo element y otro tipo text, aadir el nodo
texto como hijo del nodo element y aadir el nodo elemento al documento; por ejemplo:
<!doctype html>
<html lang="es">
<head>
<title>Ttulo de la pgina WEB</title>
</head>
<body>
<p id="uno">Primer prrafo del documento</p>
<p id="dos">Segundo prrafo del documento</p>
<p id="tres">Tercer prrafo del documento</p>
<script language="javascript">
var parrafo = document.createElement("p");
var contenido = document.createTextNode("Departamento de Informtica");
parrafo.appendChild(contenido);
document.getElementById("dos").appendChild(parrafo);
</script>
</body>
</html>
Para eliminar un nodo, se utiliza el mtodo removeChild().
<!doctype html>
<html lang="es">
<head>
<title>Ttulo de la pgina WEB</title>
</head>
<body>
<p id="uno">Primer prrafo del documento</p>
<p id="dos">Segundo prrafo del documento</p>
<p id="tres">Tercer prrafo del documento</p>
<script language="javascript">
var elem = document.getElementById("tres");
elem.parentNode.removeChild(elem);
</script>
</body>
</html>
Se observa que el nodo a eliminar debe encontrarse referenciado desde el nodo padre.

MANIPULACIN DE ATRIBUTOS
DOM tambin permite la modificacin de los atributos de las etiquetas, las cuales se
transforman en propiedades de los nodos u objetos del modelo, luego el acceso a los mismos
se realiza mediante el nombre del elemento seguido del nombre de la propiedad, como
muestra el siguiente ejemplo:
<!doctype html>
<html lang="es">
<head>
<title>Ttulo de la pgina WEB</title>
</head>
<body>
<p id="uno">Primer prrafo del documento</p>
<p id="dos">Segundo prrafo del documento</p>
<p id="tres">Tercer prrafo del documento</p>
<script language="javascript">
var elem = document.getElementById("dos");
elem.setAttribute("align", "right");
elem.setAttribute("style", "background:#294");
</script>
</body>
</html>
Los atributos tambin pueden ser removidos de un nodo elemento, utilizando el mtodo
removeAttribute(), por ejemplo:
<!doctype html>
<html lang="es">
<head>
<title>Ttulo de la pgina WEB</title>
</head>
<body>
<p id="uno">Primer prrafo del documento</p>
<p id="dos">Segundo prrafo del documento</p>
<p id="tres">Tercer prrafo del documento</p>
<script language="javascript">
var elem = document.getElementById("dos");
elem.setAttribute("align", "right");
elem.setAttribute("style", "background:#294");
elem.removeAttribute("style");
</script>
</body>
</html>
Los nodos pueden ser movidos de su lugar original, por ejemplo:
<!doctype html>
<html lang="es">
<head>
<script languaje="javascript">
function mover (nodo){
document.body.appendChild(nodo);
}
</script>
<style type="text/css">
p {border: 2px solid black}
p.bolivar {background-color: #0CF}
p.strongest {background-color: yellow}
</style>
</head>
<body>
<p class="strongest" onclick="mover(this)">Haga clic sobre el The Strongest</p>
<p class="bolivar" onClick="mover(this)">Haga clic sobre el Bolivar</p>
</body>
</html>

VALORES DE FORMULARIOS
Los valores de los diferentes controles de los formularios son accesibles a travs de su
propiedad value. Para un acceso ms directo, cada control del formulario puede ser accedido
mediante el nombre del mismo.
El siguiente ejemplo ilustra cmo se puede emplear los valores introducidos en campos de
texto:
<!doctype html>
<html lang="es">
<head>
<script type="application/javascript">
function area(x,y){
return (parseFloat(x)*parseFloat(y)/2);
}
</script>
</head>
<body>
<form><br>
Base: <input type="text" size="5" name="bas"><br>
Altura: <input type="text" size="5" name="alt"
onblur="document.forms[0].result.value=area(document.forms[0].bas.value,this.value);">
<br><br>
rea: <input type="text" size="10" name="result">
</form>
</body>
</html>
O bien puede presentarse de una forma ms elegante, como se observa en el siguiente
ejemplo:
<!doctype html>
<html lang="es">
<head>
<script type="application/javascript">
function a(x,y){
return (parseFloat(x)*parseFloat(y)/2);
}
</script>
</head>
<body bgcolor="#0000ff">
<font color="#ff0000">
<h1><p align="center">calculo del rea de un tringulo</h1>
<hr>
</font>
<font color="#ffffff"><p>
<br>
<hr>
<font color="yellow">
<form>
<p align="center">
Base del tringulo: <input type="text" size="5" name="base">
<br>
Altura del tringulo: <input type="text" size="5" name="alto"
onblur="document.forms[0].result.value=a(document.forms[0].base.value,this.value);">
<br>
<br><hr><p align="center"><b>
rea del tringulo: <input type="text" size="10" name="result">
<hr>
</form>
</font></b>
</body>
</html>