DOM. Document Object Model. ¿Qué es? ¿Para qué sirve?.

DOM O DOCUMENT
OBJECT MODEL
JAVASCRIPT. ¿QUÉ ES?
APRENDERAPROGRAMAR.COM ¿PARA QUÉ SIRVE? EL
W3C. ARBOL DE NODOS.
PARENT Y CHILD.
EJEMPLOS (CU01123E)
Sección: Cursos
Categoría: Tutorial básico del programador web: JavaScript desde cero

Fecha revisión: 2029

Resumen: Entrega nº23 del Tutorial básico “JavaScript desde cero”.

Autor: César Krall

© aprenderaprogramar.com, 2006-2029
DOM. Docu
ument Object Model.
M ¿Qué ess? ¿Para qué sirrve?.

DOM. DO
OCUMENT OB
BJECT MODEEL.

Una de laas mayores potencialidad

p des de JavaSScript es quee puede man nipular cualqquier elemen nto de una
página weeb y modificcar su conteenido, su tam
maño, su co olor, su posición... e incluso hacer aparecer
a y
desaparaccer elemento
os. Para haceer esto posib
ble necesitammos identificar con precissión cada ele
emento de
una págin
na web para poder indicaarle a JavaScrript sobre qu
ué elemento debe operar.

Para perm d programaación pudieran extraer información o manipularr cualquier

mitir que loss lenguajes de
elemento de una págiina web era necesario deefinir de alguuna manera quéq tipos de elementos conforman
c
na web, cóm
una págin mo nombrarlo os y cómo see relacionan entre sí. Iniicialmente esto resultabaa bastante
problemático, ya que no existía un
n estándar o especificació
e ón oficial sobrre cómo debía realizarse esto.

Para evitaar los probleemas de faltaa de estandaarización, unn organismo internacional (el W3C) definió un
estándar denominado DOM ó Document Object Mo odel (Modelo de objettos para re epresentar
documenttos) que defiine qué elem mentos se con nsidera que conforman
c u página w
una web, cómo see nombran,
cómo se relacionan
r enntre sí, cómo se puede accceder a elloss, etc.

D WIDE WEB
EL WORLD B CONSORTIUM O W3C
DOM es unu estándar cuya definicción ha sido creada por el World Wide W Web Coonsortium, cu
uyas siglas
son W3C. Se trata de d un conso orcio internaacional que produce esspecificaciones, recomen ndaciones,
manualess y herramieentas en relaación al desarrollo de in nternet. El W3C
W es un o organismo que cuenta
entre suss principaless promotorees al MIT (M Massachusse ets Institutee of Technology, USA), el ERCIM
(Europeann Research Consortium
C f Informattics and Matthematics, participado por numeroso
for os países),
la Keio Un
niversity (Jap
pón) y la Beih
hang Universsity (China).
Uno de lo os objetivoss principales del W3C ess generar esstándares: documentos
d donde se definen
d las
sintaxis de lenguajes y protocoloss que intervieenen en el desarrollo
d dee internet. El objetivo es promover
que las empresas,
e instituciones y personas queq participan o trabajaan en desarrollos web utilicen
u un
mismo lenguaje y se pongan de acuerdo a laa hora de ge enerar softwware y produ uctos relacionados con
internet. ¿Por qué decimos que q “la raízz” de una página weeb es docu ument y webPage ó
internetDDocument? Porque
P esta forma
f de no
ombrar y orgganizar las pááginas web h ha sido definnida por el
W3C de esta
e manera y todas (o caasi todas) lass empresas, institucioness y personas lo han acepttado.
No siemp pre lo que propone
p el W3C
W es aceeptado. El W3C W emite propuestas,
p no leyes dee obligado
cumplimieento porquee no tiene caapacidad leggal para ello
o. Hay otras instituciones o grandes empresas
que tamb bién hacen propuestas
p os, y en ocassiones esas propuestas o criterios
o tienen criterios propio
alternativvos hacen que
q haya distintos
d grupos de trrabajo y distintos estáándares o forma de
funcionam miento del so
oftware.

© aprenderraprogramar.co
om, 2006-2029
DOM. Document Object Model. ¿Qué es? ¿Para qué sirve?.

Por último, hay que tener en cuenta que el W3C está formado por un equipo de personas que también
cometen errores y que “lo que dice el W3C” no siempre tiene por qué ser lo mejor ni lo más usado. No
obstante, hoy día el W3C es la principal institución de referencia a la hora de crear y difundir estándares
relacionados con los desarrollos web, entre ellos el estándar CSS y el estándar DOM.

LAS VERSIONES DE DOM

El W3C trabaja continuamente para mejorar el DOM, corrigiendo errores e incorporando nuevas
funcionalidades. Antes de llegar a una especificación o recomendación oficial se trabajan numerosos
borradores que son sometidos a revisión y corrección. Cuando se alcanza un relativo grado de acuerdo
entre los miembros del W3C se libera lo que se denomina una recomendación oficial de DOM ó versión
a modo de propuesta para su uso y aplicación por todas las empresas, instituciones y personas.
Las versiones de DOM a lo largo de la historia han sido*:

• Dom Level 1: publicada en 1998.

• Dom Level 2: publicada en 2000.

• Dom Level 3: publicada en 2004.

• Dom Level 4: se esperaba como recomendación oficial en 2016.

*Las fechas indicadas son sólo orientativas, la realidad es que una version no aparece un día, sino que
tiene un largo proceso de desarrollo que a veces dura años.
Nosotros nos atendremos a la versión de DOM de más amplia difusión en cada momento. No nos
interesa tanto conocer la especificación oficial al completo, sino entender cómo está concebido y para
qué sirve el DOM.
Por otro lado, hay que tener en cuenta que “seguir con exactitud” una especificación oficial no significa
que nuestra web vaya a funcionar perfectamente, debido a que no todos los navegadores reconocen
todas las propiedades o sintaxis que se definen como recomendación oficial. También puede suceder
que un navegador sí reconozca la sintaxis pero no ofrezca el mismo resultado que otro, lo cual da lugar
a problemas en la visualización de páginas web.
Conseguir buenos resultados con JavaScript pasa por estar al día de la especificación del W3C pero
también por seguir las novedades de la web, de los navegadores y siendo prácticos, por hacer muchas
pruebas y comprobaciones con distintos navegadores o herramientas específicas para este fin.

REPRESENTACIÓN DOM DE UNA PÁGINA WEB

Decimos que una página web es un documento HTML. Este documento puede ser representado de
diferentes maneras:

© aprenderaprogramar.com, 2006-2029
DOM. Document Object Model. ¿Qué es? ¿Para qué sirve?.

a) Representación web: como una página web en un navegador donde vemos imágenes, texto, colores,
etc.

b) Representación texto: como un texto plano (código HTML) que podemos visualizar en cualquier
editor de textos como el bloc de notas de Windows ó Notepad++ ó cualquier otro.

c) Representación DOM: como un árbol donde los elementos de la página web están organizados
jerárquicamente, con nodos superiores (nodos padre o parent) y nodos que derivan de los nodos padre
(nodos hijo o child).

Veamos un ejemplo de representación DOM. Escribe el siguiente código y guárdalo en un archivo de

extensión html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title>Ejemplo DOM - aprenderaprogramar.com</title><meta charset="utf-8">
<style type="text/css">
body {background-color:yellow; font-family: sans-serif;}
label {color: maroon; display:block; padding:5px;}
</style>
</head>

<body>
<div id="cabecera">
<h1>Portal web aprenderaprogramar.com</h1>
<h2>Didáctica y divulgación de la programación</h2>
</div>

<!-- Formulario de contacto -->

<form name ="formularioContacto" class="formularioTipo1" method="get" action="accion.html">
<p>Si quieres contactar con nosotros envíanos este formulario relleno:</p>
<label for="nombre"><span>Nombre:</span> <input id="nombre" type="text" name="nombre" /></label>
<label for="apellidos"><span>Apellidos:</span> <input id="apellidos" type="text" name="apellidos" /></label>
<label for="email"><span>Correo electrónico:</span> <input id="email" type="text" name="email" /></label>
<label>
<input type="submit" value="Enviar">
<input type="reset" value="Cancelar">
</label>
</form>

</body>

</html>

La anterior representación se corresponde con la representación del documento como texto. Visualiza
el resultado. La imagen que vemos en el navegador se corresponde con la representación del
documento como página web en un navegador.

© aprenderaprogramar.com, 2006-2029
DOM. Document Object Model. ¿Qué es? ¿Para qué sirve?.

La representación del documento conforme al estándar del DOM sería (de forma aproximada) esta:

La representación anterior es solo aproximada: no nos va a interesar representar una página web
conforme al DOM, simplemente queremos conocer cómo se estructura una página web conforme al
DOM para saber cómo podemos acceder a sus elementos y manipularlos usando JavaScript (u otro
lenguaje).

El DOM no es parte de JavaScript, de hecho puede ser utilizado por otros lenguajes de programación.
No obstante, el DOM está íntimamente ligado a JavaScript ya que JavaScript lo utilizará con profusión
para acceder y modificar las páginas web dinámicamente.

© aprenderaprogramar.com, 2006-2029
DOM. Document Object Model. ¿Qué es? ¿Para qué sirve?.

Decimos que conforme al DOM la página web se representa como un árbol de nodos, interconectados y
relacionados de acuerdo con una jerarquía.

Como nodo principal, inicial o padre de todos los nodos en el árbol de nodos de una página web se
encuentra un nodo especial cuyo nombre es document.

El nodo raíz tiene como nodo hijo al nodo html, que representa a todo lo contenido dentro de las
etiquetas <html> … <html>.

El nodo html tiene dos hijos: head y body. Sucesivamente cada nodo tiene uno o varios hijos hasta que
se llega a un punto terminal donde no existen más hijos.

La construcción del árbol de nodos es realizada automáticamente por los navegadores de acuerdo con
las reglas internas que tienen definidas. Por ejemplo una regla interna dice que una etiqueta define un
nodo, por ejemplo una etiqueta <p> define un nodo, y a su vez el contenido de texto de esa etiqueta
define otro nodo.

Una página web avanzada supone la construcción de un árbol de nodos que puede constar de miles de
nodos y cambiar continuamente a medida que el usuario realiza la navegación a través de diferentes
páginas web. Todo este proceso es realizado “en segundo plano” por el navegador y dada la potencia
de los computadores actuales, es un proceso muy rápido.

No todos los navegadores construyen el árbol de nodos de igual manera, ni siquiera todos construyen el
mismo árbol de nodos (lo cual puede resultar problemático al dar lugar a distintos resultados cuando
ejecutemos JavaScript). La mayor parte de los navegadores siguen el estándar W3C para construir el
árbol de nodos, pero algunos navegadores no lo siguen con exactitud o introducen algunas extensiones
adicionales específicas de ese navegador.

Un nodo constituye un elemento complejo que suele llevar información asociada como veremos más
adelante.

A través de JavaScript podremos acceder a nodos con instrucciones del tipo

document.getElementById("menu"); (acceder a un elemento por su id), pero también podremos crear
nodos (por ejemplo document.createElement("h1"); ó document.body.appendChild(heading);). Todo
esto es posible gracias a la existencia del DOM.

EJERCICIO

Crea una página web html que conste de las etiquetas html, head, body. Dentro de body incorpora dos
div: uno que contenga una etiqueta h1 con el texto “Curso JavaScript aprenderaprogramar.com” y otro
que contenga tres párrafos que contengan: Párrafo 1, Párrafo 2 y Párrafo 3. Crea la representación del
árbol de nodos conforme al DOM para este documento. Para comprobar si tu respuesta es correcta
puedes consultar en los foros aprenderaprogramar.com.

Próxima entrega: CU01124E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

© aprenderaprogramar.com, 2006-2029