13 - DOM

The Document Object Model

Índice
 Document Object Model (DOM)
 Nodos y tipos
 Relaciones entre nodos
 Localizando nodos
 El nodo documento
 Los nodos element
 Truco
 Los nodos attribute (TODO)
 Modificando estilos Enlaces


 Ejemplos
 Ejercicios

ALBERT BASSONS 2
Document Object Model

• El DOM (Document Object Model o Modelo de Objetos del

Documento) de HTML define la manera estándar para acceder y
manipular los documentos HTML.

• El DOM presenta un documento HTML como una estructura de

nodos.

• Cuando el navegador carga la página, crea un DOM de esa

página.

ALBERT BASSONS 3
Document Object Model

ALBERT BASSONS 4
Document Object Model

• Gracias al DOM, JavaScript puede manipular una página de

forma dinámica:

a. Puede modificar todos los elementos HTML.

b. Puede cambiar los atributos HTML de los elementos.
c. Puede cambiar todos los estilos CSS.
d. Puede eliminar todos los elementos o atributos.
e. Puede añadir elementos o atributos.
f. Puede reaccionar a todos los eventos de la página.
g. Puede crear, modificar o eliminar eventos.

ALBERT BASSONS 5
Nodos y tipos

• De acuerdo con el W3C HTML DOM estándar, todo en un

documento HTML es un nodo:

• El documento entero es el nodo document.

• Cada elemento HTML es un element node.
• El texto dentro de un HTML es un text node.
• Los atributos HTML son attribute node.
• Los comentarios son comment nodes.

ALBERT BASSONS 6
Ejemplo

ALBERT BASSONS 7
Relaciones entre nodos
• Las relaciones entre nodos se definen como: padre (parent),
hijos (children) y hermanos (siblings).

ALBERT BASSONS 8
Ejemplo
• Prueba este ejemplo sobre el código HTML anterior (coloca el
script a continuación):

ALBERT BASSONS 9
Relaciones entre nodos

node.parentNode
node.firstChild
node.lastChild
node.nextSibling
node.previousSibling

ALBERT BASSONS 10
Relaciones entre nodos
• Para obtener un listado de nodos con los hijos de otro nodo,
usamos la propiedad node.childNodes.

• Para obtener el elemento padre de un nodo usamos la

propiedad node.parentNode.

• Para navegar por los hermanos usamos

node.nextSibling y node.previousSibling.

• Un problema con estas propiedades es que los saltos de

línea y los comentarios que existen en el código fuente
también son devueltos como nodos.

ALBERT BASSONS 11
Relaciones entre nodos

head

‘\n’ title ‘\n’

‘Probando’

ALBERT BASSONS 12
Ejemplo

ALBERT BASSONS 13
Relaciones entre nodos
• Para solventar el problema anterior, usaremos las siguientes
propiedades en lugar de nextSibling, previousSibling,
parentNode y childNodes:

• element.children: devuelve una colección de elementos

hijo (excluyendo nodos de texto y comentarios).

• element.nextElementSibling: retorna el siguiente nodo

elemento.

• element.previousElementSibling: retorna el nodo

elemento anterior.

• element.parentElement: retorna el elemento padre.

ALBERT BASSONS 14
Ejemplo

ALBERT BASSONS 15
Los nodos son objetos
• Como ya habéis podido intuir, los nodos son objetos, así que
disponen de propiedades y métodos (acabamos de ver unas
cuantas propiedades).

• Como existen diversos tipos de nodos, habrá propiedades y

métodos diferentes para cada uno de ellos.

• Más adelante en estas transparencias encontraréis un listado de

enlaces hacia la W3Schools y la MDN de Mozilla, con la
documentación detallada sobre propiedades y métodos de los
nodos, así como de todos sus tipos.

ALBERT BASSONS 16
Ejemplo: analizador DOM
• Para comprender la estructura de los
documentos haciendo pruebas, he creado una
función recursiva que es capaz de mostrarnos
como texto la estructura DOM a partir de un
elemento HTML.

• La tenéis en el Drive® aunque aquí muestro

su código y un ejemplo de utilización.

• Probad con alguno de vuestros ejercicios y

tratad de comprender si la estructura encaja o
no.

ALBERT BASSONS 17
Ejemplo: analizador DOM (1 de 2)

ALBERT BASSONS 18
Ejemplo: analizador DOM (2 de 2)

ALBERT BASSONS 19
Localizando nodos (1)
• Podemos navegar por el documento a partir de un nodo
cualquiera.

• Si disponemos de una referencia a un nodo, podemos usar

sus métodos y propiedades para ir saltando de nodo en nodo
por el esquema del documento.

• Esto es lo que hace el analizador del ejemplo anterior; le

pasamos la referencia a un nodo y va recorriendo los nodos
hijo de forma recursiva.

• La referencia más fácil de obtener es la del nodo

documento: document.

ALBERT BASSONS 20
Localizando nodos (2)
• Si queremos localizar un nodo concreto dentro de toda la
estructura del documento, disponemos del método:
document.getElementById(‘id’).

“referencia” apunta a
este nodo.

ALBERT BASSONS 21
Localizando nodos (3)
• Existen varias formas sencillas para localizar los nodos :

• Encontrar un elemento por id:

document.getElementById();

• Encontrar los elementos por la etiqueta:

element.getElementsByTagName();

• Encontrar los elementos por el nombre:

document.getElementsByName();

• Encontrar los elementos por clase:

element.getElementsByClassName();

ALBERT BASSONS 22
Ejemplo

ALBERT BASSONS 23
Localizando nodos (4 y 5)

• Hemos visto en algunos ejemplos que podemos pasar a una

función JavaScript el nodo sobre el que se produjo la acción
(this).

• A partir de ese nodo podemos navegar por el resto de nodos

de la estructura del DOM.

• Cuando veamos eventos, veremos que también podemos

localizar nodos a partir del evento.

• Probad los dos ejemplos que se muestran a continuación.

ALBERT BASSONS 24
Ejemplo

this  input
this.parentNode  form.

ALBERT BASSONS 25
Ejemplo
evento  event
evento.target  input
evento.target.parentNode  form.

ALBERT BASSONS 26
Localizando nodos (6)
• Además, el objeto document tiene una serie de propiedades
(las veremos en estas transparencias un poco más abajo)
que recuperan un listado de elementos de un tipo concreto
(formularios, enlaces, imágenes…) existentes en el
documento.

• Se puede acceder a dichos listados como si se tratara de un

array indexado o asociativo para localizar los nodos
deseados.

• Observa los dos ejemplos siguientes:

ALBERT BASSONS 27
Ejemplo

ALBERT BASSONS 28
Ejemplo

ALBERT BASSONS 29
Localizando nodos (7)
• Y por último, otra forma sencilla. Existen dos métodos de
document que permiten seleccionar elementos haciendo uso
de los selectores CSS.

• Los métodos son: document.querySelector(); que

devuelve el primer elemento que coincide con el selector y
document.querySelectorAll(); que retorna todos los
elementos coincidentes.

• Esta forma de seleccionar elementos se parece mucho a la

que usaremos en JQuery.

ALBERT BASSONS 30
Ejemplo

ALBERT BASSONS 31
Localizando nodos
• Es obvio que para acceder a nodos concretos se debe
conocer muy bien la estructura HTML de la web.

• Si esta es compleja o se hacen cambios dinámicamente,

puede resultar complicado navegar por los nodos.

ALBERT BASSONS 32
El nodo document
• Cuando un documento HTML es cargado mediante un
navegador, se convierte en el document object.

• El document es el nodo raíz del documento HTML que posee

todos los demás nodos.

• El document object es un objeto que dispone de

propiedades y métodos para poder trabajar desde JavaScript.

• NOTA: a continuación se listan propiedades y métodos. Sin embargo,

como el DOM se va actualizando, os recomiendo consultar el enlace
incluido arriba para obtener un listado más actual.

ALBERT BASSONS 33
Propiedades de document

Propiedad Descripción
document.anchors Devuelve una colección con las anclas del
documento
document.applets Devuelve una colección de los applets del
documento
document.baseURI Devuelve la URI base del documento
document.body Retorna el elemento body del documento
document.cookie Retorna todos los pares nombre/valor de las
cookies en el documento

ALBERT BASSONS 34
Propiedades de document

Propiedad Descripción
document.doctype Retorna el document type
document.documentElement Retorna el elemento html del
documento
document.documentURI Establece o cambia la URI del
documento
document.activeElement Retorna el elemento que tiene
actualmente el foco en el documento.

ALBERT BASSONS 35
Propiedades de document
Propiedad Descripción
document.domain Devuelve el nombre del dominio del servidor
que cargó el documento
document.embeds Retorna una colección con los elementos
integrados
document.forms Retorna una colección con los formularios
document.head Retorna el elemento head
document.images Retorna una colección con las imágenes
document.inputEncoding Retorna el conjunto de caracteres
document.lastModified Retorna la fecha y hora de la última
modificación
document.links Retorna una colección con los enlaces del
documento

ALBERT BASSONS 36
Propiedades de document

Propiedad Descripción
document.readyState Retorna el estado de carga del documento
document.referrer Retorna la URL del documento que cargó el
documento actual
document.scripts Retorna una colección con los scripts del
documento
document.strictErrorCh Establece o retorna la comprobación de
ecking errores
document.title Establece o retorna el título del documento
document.URL Retorna la URL completa del documento

ALBERT BASSONS 37
Métodos de document

Método Descripción
document.getElementById() Retorna el elemento con la ID
especificada
document.getElementsByName() Retorna una colección de elementos
con el nombre especificado
document.getElementsByTagName() Retorna una colección de elementos
con la etiqueta especificada

ALBERT BASSONS 38
Métodos de document

Método Descripción
document.createAttribute() Crea un nodo atributo
document.createComment() Crea un nodo comentario
document.createDocumentFra Crea un nodo virtual para construir
gment() estructuras de nodos que luego
insertaremos en nuestra página
document.createElement() Crea un nodo elemento
document.createTextNode() Crea un nodo de texto

ALBERT BASSONS 39
Métodos de document

Método Descripción
document.normalize() Borra los nodos de texto en blanco, uniendo
los nodos adyacentes
document.normalizeDocu Borra los nodos de texto en blanco, uniendo
ment() los nodos adyacentes
document.renameNode() Renombra un nodo específico
document.write() Escribe en el documento HTML desde
Javascript
document.writeln() Lo mismo que antes pero añade el carácter
‘\n’ al final para indicar salto de línea

ALBERT BASSONS 40
Métodos de document

Método Descripción
document.adoptNode() Clona un nodo de otro documento al
documento actual. Por ejemplo podemos
adoptar nodos desde un iframe.
document.importNode() Importa un nodo desde otro documento, por
ejemplo desde un iframe.
document.open() Abre un flujo de salida HTML que recolecta la
salida de document.write()
document.close() Cierra el flujo de salida anteriormente
abierto.

ALBERT BASSONS 41
Los nodos element
• Como ya sabemos, todos los elementos HTML del
documento son representados en el DOM mediante element
nodes.

• Los nodos elemento pueden tener nodos hijo (childNodes),

que pueden ser otros nodos de tipo elemento, nodos de
texto o nodos comentario.

• Los elementos HTML pueden tener atributos, que a su vez

serán nodos atributo.

ALBERT BASSONS 42
Propiedades de element
Propiedad Descripción
element.accessKey Establece o retorna la tecla de acceso al
elemento
element.attributes Retorna un listado de nodos atributos del
elemento
element.childNodes Retorna un listado de hijos del elemento
element.className Establece o retorna la clase del elemento
element.clientHeight Retorna el alto visible de un elemento
element.clientWidth Retorna el ancho visible de un elemento
element.dir Establece o retorna la dirección del texto
element.firstChild Retorna el primer hijo de un elemento

ALBERT BASSONS 43
Propiedades de element
Propiedad Descripción
element.id Establece o retorna la id de un elemento
element.innerHTML Establece o retorna el contenido de un
elemento
element.lang Establece o retorna el código de lenguaje
element.lastChild Retorna el último hijo de un elemento
element.namespaceURI Retorna el espacio de nombres URI de un
elemento
element.nextSibling Retorna el siguiente hermano del elemento
element.nodeName Retorna el nombre del elemento
element.nodeType Retorna el tipo de nodo del elemento
element.nodeValue Establece o retorna el valor del elemento

ALBERT BASSONS 44
Propiedades de element
Propiedad Descripción
element.offsetHeight Retorna el alto de un elemento
element.offsetWidth Retorna el ancho de un elemento
element.offsetLeft Retorna el desplazamiento desde la izquierda
element.offsetParent Retorna el offset del padre del elemento
element.offsetTop Retorna el desplazamiento desde arriba
element.ownerDocument Retorna el document object del elemento
element.parentNode Retorna el padre del elemento
element.previousSibling Retorna el hermano anterior del elemento

ALBERT BASSONS 45
Propiedades de element

Propiedad Descripción
element.scrollHeight Retorna el alto total del elemento
element.scrollLeft Retorna la distancia entre el borde izquierdo de
un elemento y la vista
element.scrollTop Retorna la distancia entre el borde superior de
un elemento y la vista
element.scrollWidth Retorna el ancho total de un elemento
element.style Establece o retorna el atributo estilo de un
elemento

ALBERT BASSONS 46
Propiedades de element

Propiedad Descripción
element.tabIndex Establece o retorna el orden de tabulación de un
elemento
element.tagName Retorna la etiqueta de un elemento
element.textContent Establece o retorna el contenido textual de un
nodo y sus descendientes
element.title Establece o retorna el título de un elemento
nodelist.length Retorna el número de elementos en una lista de
nodos

ALBERT BASSONS 47
Propiedades de element

Propiedad Descripción
element.parentEleme Retorna el elemento padre del elemento actual.
nt
element.children Retorna una colección con los elementos hijo,
excluyendo nodos de texto y comentarios.
element.previousEle Retorna el elemento anterior al mismo nivel.
mentSibling
element.nextElement Retorna el elemento siguiente al mismo nivel.
Sibling

ALBERT BASSONS 48
Métodos de element
Método Descripción
element.appendChild() Añade un nuevo hijo al elemento, como
nuevo hijo
element.cloneNode() Clona un elemento
element.compareDocumentPo Compara la posición entre dos elementos
sition()
element.normalize() Une nodos adyacentes de texto en uno solo
element.removeAttribute() Elimina un determinado atributo
element.removeAttributeNode Elimina un atributo nodo de un elemento y lo
() retorna
element.removeChild() Quita un nodo hijo del elemento
element.replaceChild() Reemplaza un nodo hijo del elemento

ALBERT BASSONS 49
Métodos de element

ALBERT BASSONS 50
Métodos de element

Método Descripción
element.getAttribute() Retorna el valor del atributo especificado
element.getAttributeNod Retorna el nodo atributo especificado
e()
element.getElementsByT Retorna un conjunto de nodos elemento del
agName() tipo especificado
element.toString() Convierte el elemento a cadena de texto
nodelist.item() Retorna el nodo en la posición indicada,
dentro de una lista de nodos.

ALBERT BASSONS 51
Métodos de element

Método Descripción
element.hasAttribute() Retorna si un elemento tiene o no el
atributo especificado.
element.hasAttributes() Retorna cierto si el elemento tiene algún
atributo
element.hasChildNodes() Retorna cierto si el elemento tiene hijos

ALBERT BASSONS 52
Métodos de element
Método Descripción
element.insertBefore() Inserta un nuevo hijo, antes del elemento
especificado
element.isDefaultNamespa Retorna true si el namespace indicado es el
ce() que hay por defecto
element.isEqualNode() Comprueba si dos elementos son iguales
element.isSameNode() Comprueba si dos elementos son el mismo
elemento
element.isSupported() Retorna cierto si la característica indicada es
soportada
element.setAttribute() Establece o cambia el atributo indicado al
valor deseado
element.setAttributeNode() Establece o cambia el nodo atributo
especificado

ALBERT BASSONS 53
Métodos de element

ALBERT BASSONS 54
Los nodos element
• Las propiedades y métodos descritos anteriormente, son
comunes para todos los tipos de elementos.

• Algunos tipos de elemento tienen métodos o

propiedades específicas.

• Por ejemplo los formularios tienen el método submit(),

mientras que los select tienen una propiedad
selectedIndex que indica el número de la opción
seleccionada.

ALBERT BASSONS 55
Los nodos element

• Aquí podéis encontrar un listado de propiedades y métodos

según el tipo de elemento que deberíais consultar o tener a
mano como referencia:

https://developer.mozilla.org/en-US/docs/DOM/DOM_Reference

ALBERT BASSONS 56
Los nodos element

ALBERT BASSONS 57
Truco

• Si queréis conocer los métodos y propiedades de un tipo de

objeto concreto sin tener que buscar en la documentación,
podéis usar un bucle for in como el del ejemplo de la
siguiente transparencia para recorrerlo.

• De esa forma, podréis ver el listado completo de métodos y

propiedades, aunque para saber exactamente cómo funcionan
no os queda otro remedio que consultar la documentación.

ALBERT BASSONS 58
Ejemplo (1 de 2)

ALBERT BASSONS 59
Ejemplo (2 de 2)

ALBERT BASSONS 60
Modificando estilos

• Como ya sabemos, los elementos HTML tienen un atributo

style que nos permite definir los estilos en línea.

• Al trabajar con nodos elemento, ese atributo se representa

como una propiedad style, que es un objeto que contiene a
su vez (como propiedades) todas las propiedades válidas en
CSS.

• Modificándolas, alteraremos su estilo.

ALBERT BASSONS 61
Ejemplo

ALBERT BASSONS 62
Enlaces de la W3Schools
• Estos son los enlaces de la W3Schools con los listados
actualizados de propiedades y métodos para los objetos de tipo
document, element y attribute node:

• Nodo document
http://www.w3schools.com/jsref/dom_obj_document.asp

• Nodo element
http://www.w3schools.com/jsref/dom_obj_all.asp

• Nodo atrribute
http://www.w3schools.com/jsref/dom_obj_attributes.asp

ALBERT BASSONS 63
Enlaces de la MDN
• Estos son los enlaces de la Mozilla Development Network:

• Node:
https://developer.mozilla.org/en-US/docs/Web/API/Node

• Nodo document:
https://developer.mozilla.org/en-US/docs/Web/API/document

• Nodo element:
https://developer.mozilla.org/en-US/docs/Web/API/Element

ALBERT BASSONS 64
Enlaces

• Información sobre el objeto style:

• http://www.w3schools.com/jsref/dom_obj_style.asp

• https://developer.mozilla.org/es/docs/Web/API/HTMLElement/style

ALBERT BASSONS 65
Métodos importantes

ALBERT BASSONS 66
Métodos importantes

ALBERT BASSONS 67
 Ejemplos
Experimentando con el DOM
Ejemplo 1
• Esta función borra de la página el elemento que le pasemos
como parámetro. Es compatible con Explorer.

ALBERT BASSONS 69
Ejemplo 2

ALBERT BASSONS 70
Ejemplo 3

ALBERT BASSONS 71
Ejemplo 4

ALBERT BASSONS 72
Ejemplo 5

ALBERT BASSONS 73
Ejercicios
DOM
Ejercicios

HACIENDO PRUEBAS:

Realiza pruebas con las propiedades y métodos de los objetos

nodo: document, element, attribute y comment.

Además de utilizar estas transparencias, utiliza la información

que encontrarás en la W3Schools y en la MDN.

ALBERT BASSONS 75
Ejercicios
1. Al pasar el ratón sobre un div con un
texto, aparece un nuevo div debajo que
nos dice que estás pasando el ratón.

Implementa tres versiones:

a. Cada vez que pasas el ratón aparece un

div nuevo.
b. El div aparece solamente una vez y se
mantiene.
c. El div aparece cuando pasas el ratón y
desaparece cuando lo quitas.

ALBERT BASSONS 76
Ejercicios

2. Al hacer clic en un botón, se generan

dinámicamente divs con el texto “Div
creado: 1", “Div creado: 2"... cada
uno con un atributo ID diferente.

Los divs creados se ubican

directamente en el body del
documento.

ALBERT BASSONS 77
Ejercicios
3. Al hacer clic sobre un párrafo, dentro de un div con cinco
párrafos más, éste párrafo se borra pero los otros se mantienen.

En la imagen que se muestra ya se ha hecho clic en el párrafo 2

y en el 5.

ALBERT BASSONS 78
Ejercicios
4 – Crea la siguiente estructura HTML:
<div>
<h1>La cancion del pirata</h1>
<p>Con diez cañones por banda</p>
<p>viento en popa a toda vela</p>
<p>no corta el mar, sino vuela</p>
<p>un velero Bergantín</p>
</div>

Haz que al pasar el ratón sobre el div, los párrafos se pongan en

cursiva y que, al pasar el ratón sobre un párrafo concreto, este
además se muestre en negrita. Al quitar el ratón las cosas
vuelven a la normalidad.

ALBERT BASSONS 79
Ejercicios
5 - Al hacer clic sobre una imagen pequeña, se abre una
figura por encima (position: fixed) con la misma imagen
pero más grande.

Al hacer clic sobre la imagen grande la figura

desaparece.

ALBERT BASSONS 80
Ejercicios

ALBERT BASSONS 81
 Ejercicios
6 – Crea una página con un botón y la imagen de un dado.

Al presionar el botón se realiza una tirada de dado y en la

imagen se muestra la cara que ha salido (deberás tener las seis
imágenes).

OPCIONALMENTE, puedes hacer que el dado no sea una

imagen sino un cubo en 3D y, en función del número que salga,
aplícale las transformaciones adecuadas para que se muestre la
cara que ha salido.

ALBERT BASSONS 82
Ejercicios

ALBERT BASSONS 83
 Ejercicios
7 – Implementa un juego de dos dados para un solo jugador con las
siguientes normas:

• Inicialmente el jugador dispone de 10 monedas.

• El jugador apostará entre 1 y 5 monedas en cada tirada, y debe

decir si la suma de los valores de los dos dados será mayor o
menor que siete.

• Al pulsar el botón ‘tirar’ se realiza la tirada de los dados,

mostrando las caras en dos imágenes y la suma de ambos
valores.

ALBERT BASSONS 84
Ejercicios
• Si el jugador ha acertado, ganará
tantas monedas como haya
apostado, si falla las perderá, si
sale exactamente siete también
pierde.

• El juego acaba cuando el jugador

se queda con 0 o menos monedas.

• Opcionalmente, puedes mostrar el

número de partidas jugadas,
ganadas, perdidas y el récord de
monedas actual.

ALBERT BASSONS 85
Ejercicios

ALBERT BASSONS 86
Ejercicios
8 – Crea una página con un listado de productos y una imagen de
un carrito de la compra en la parte superior.

Para agregar productos al carrito, haremos clic en el botón

correspondiente del producto.

Para listar todos los productos que tenemos en el carrito,

haremos clic sobre la imagen del carrito.

Trabaja de manera orientada a objeto.

ALBERT BASSONS 87
Ejercicios

ALBERT BASSONS 88