Clase 8 Manipulación del DOM

Electiva II
Clase 8
Document Object Model
DOM
Ing. José Ricardo Tillero UPTAEB

Document Object Model - DOM
El entorno del navegador
 JavaScript puede ser utilizado en diferentes entornos, pero su entorno más habitual es el navegador.
 El código JavaScript de una pagina tiene acceso a unos cuantos objetos. Estos objetos los podemos
agrupar en:
 Objetos que tienen relación con la pagina cargada (el document). Estos objetos conforman el
Document Object Model (DOM).
 Objetos que tienen que ver con cosas que están fuera de la pagina (la ventana del navegador y la
pantalla). Estos objetos conforman el Browser Object Model (BOM)
 El DOM es un standard y tiene varias versiones (llamadas levels). La mayoría de los navegadores
implementan casi por completo el DOM Level 1.
 El BOM no es un standard, así que algunos objetos están soportados por la mayoría de navegadores y
otros solo por algunos.

Deteccion de funcionalidades del navegador
 Debido a estas diferencia entre navegadores surge la necesidad de averiguar (desde código JS) que
características soporta nuestro navegador (DOM y BOM).
 Una solución seria la llamada Browser Sniffing que consiste en detectar el navegador que estamos
utilizando
 Esta técnica no se recomienda por:
 Hay demasiados navegadores para controlar.
 Difícil de mantener (surgen nuevas versiones y nuevos navegadores).
 El parseo de cadenas puede ser complicado y no es fiable del todo.
> if (navigator.userAgent.indexOf('MSIE') !== -1) {
// this is IE
} else {
// not IE
}

Deteccion de funcionalidades del navegador
 La mejor solución para detectar funcionalidades de nuestro navegador es hacer Feature Sniffing, es
decir chequear la existencia del objeto (método, array o propiedad) que queremos utilizar.
> if (typeof window.addEventListener === 'function') {
// feature is subported, let's use it
} else {
// hmm, this feature is not subported, will have to
// think of another way
}

Jerarquia de objetos del navegador

BOM
 El BOM (Browser Object Model) lo conforman todos los objetos que están fuera
del documento cargado (document) y forman parte del objeto window.
 El objeto window además de servir de contenedor de las variables globales y de
ofrecer los métodos nativos de JS (window.parseInt), contiene información
sobre el entorno del navegador (frame, iframe, popup, ventana o pestaña).

Objetos del objeto window
 Algunos de los objetos que tenemos disponibles en window son:
 window.navigator
 Es un objeto que contiene información sobre el navegador.
> window.navigator.userAgent
< "Mozilla/5.0 (Windows; U; Windows NT 5.1; es-ES; rv:1.9.2.12)
Gecko/20101026 Firefox/3.6.12 ( .NET CLR 3.5.30729)”
 window.location
 Es un objeto que contiene info (y metodos) sobre la URL actual.
> window.location.href = 'http://www.packtpub.com'
> location.href = 'http://www.packtpub.com'
> location = 'http://www.packtpub.com'
> location.assign('http://www.packtpub.com')
> location.reload()
> window.location.href = window.location.href
> location = location

 window.history
 Es un objeto que contiene el historial de paginas visitadas y tiene métodos
para movernos en él (sin poder ver las URL’s).
> window.history.length
< 5
> history.forward()
> history.back()
> history.go(-2);

 window.frames
 Es una colección de todos los frames que tenemos en la página.
 Cada frame tendrá su propio objeto window.
 Podemos utilizar parent para acceder desde el frame hijo al padre.
 Con la propiedad top accedemos a la pagina que está por encima de todos los frames.
 Podemos acceder a un frame concreto por su nombre.
> <iframe name="myframe" src="about:blank" />
> window.frames[0]
> frames[0].window.location.reload()
> frames[0].parent === window
< true
> window.frames[0].window.top === window
< true
> self === window
< true
> window.frames['myframe'] === window.frames[0]
< true

 window.screen
 Ofrece información sobre la pantalla (general, fuera del browser).
> window.screen.colorDepth
< 32
> screen.width
< 1440
> screen.availWidth
< 1440
> screen.height
< 900
> screen.availHeight
< 847

 Algunos de los métodos que tenemos disponibles en window son:
 window.open(), window.close()
 Nos permiten abrir (y cerrar) nuevas ventanas (popups).
 window.open() devuelve una referencia a la ventana creada (si
devuelve false es que no la ha podido crear popups blocked).
 No se recomienda su uso.
> var win = window.open('http://www.packtpub.com', 'packt',
'width=300,height=300,resizable=yes');
> win.close()

 window.moveTo(), window.moveBy(), window.resizeTo(), window.resizeBy()
 Nos permiten mover y redimensionar las ventanas.
 No se recomienda su uso.
> window.moveTo(100, 100)
> window.moveBy(10, -10)
> window.resizeTo(300, 300)
> window.resizeBy(20, 10)
 window.alert(), window.promt(), window.confirm()
 Nos permiten interactuar con el usuario a través de mensajes del sistema.
> if (confirm('Are you sure you want to delete this item?')) {
// delete
} else {
// abort
}
> var answer = prompt('And your name was?');
> console.log(answer);

Métodos del objeto window
 window.setTimeout(), window.setInterval()
 Nos permiten ejecutar código después de un intervalo de tiempo (y en
su caso, repetirlo).
> function boo(){alert('Boo!');}
> setTimeout(boo, 2000);
> var id = setTimeout(boo, 2000);
> clearTimeout(id);
> function boo() { console.log('boo') };
> var id = setInterval( boo, 2000 );
< boo
< boo
< boo
> clearInterval(id)
> var id = setInterval( "alert('boo, boo')", 2000 );
> var id = setInterval( function(){ alert('boo, boo')}, 2000 );

Objeto document
 window.document es un objeto del BOM con información
sobre el documento actual.
 Todos los métodos y propiedades que están dentro de
window.document pertenecen a la categoría de objetos DOM.

DOM
 El DOM (Document Object Model) es una forma de representar un documento HTML (o XML) como un
árbol de nodos.
 Utilizando los métodos y propiedades del DOM podremos acceder a los elementos de la página,
modificarlo, eliminarlos o añadir nuevos.
 El DOM está dividido en 3 partes/niveles distintos:
1. Core DOM: Modelo estándar para cualquier documento estructurado.
2. XML DOM: Modelo estándar para documentos XML.
3. HTML DOM: Modelo estándar para documentos HTML.
 El DOM es un standard y tiene varias versiones (llamadas levels). La mayoria de los navegadores
implementan casi por completo el DOM Level 1.
 En el DOM Level 1 se diferencia entre:
 El Core DOM es la especificación común que se aplica a todos los documentos (XML, HTML,…).
 El Core HTML es la especificación que se aplica sólo a documentos HTML.

Document Object Model – DOM
Nodos del DOM
 Cada elemento del DOM se denomina nodo En realidad un nodo no es una etiqueta, sino que cada
etiqueta tiene dos nodos, el primero el de la etiqueta en sí, (nombre de la etiqueta), y como nodo hijo de
éste, está el texto o contenido de la etiqueta.
 En el siguiente esquema vemos la estructura del DOM de una página:

Nodos del DOM
 En el esquema anterior cada recuadro es un nodo, y las flechas indican la
relación entre ellos, el nodo superior es el nodo padre y el nodo inferior, del que
depende es el nodo hijo.
 Hay en este ejemplo dos tipos de nodos, los nodos elementos (los que llevan
etiquetas) y los nodos texto (los que llevan el texto o contenido de la página).
Esto es importante, ya que JavaScript diferencia entre estos dos tipos de nodos.
 La transformación de la página en una estructura de este tipo se realiza de forma
automática, de forma que lo único que nos interesa aquí es saber que esto es
así, para poder luego aplicarlo al acceso a los elementos mediante JavaScript.

Nodos del DOM
 Tipos de nodos: Aunque existen 12 tipos de nodos en realidad para manipular las
páginas Web sólo necesitamos los 5 siguientes:
 Document: nodo raíz del que derivan todos los demás.
 Element: Cada una de las etiquetas HTML. Es único nodo que puede contener
atributos y del que pueden derivar otros nodos.
 Attr; Cada atributo de una etiqueta genera un nodo Attr, el cual contiene también
su valor (como una propiedad). El nodo Attr es hijo del nodo element que
contiene su etiqueta.
 Text: Contiene el texto encerrado por una etiqueta HTML. Los nodos de texto son
hijos de los nodos Element que los contienen.
 Comment: Los comentarios incluidos en la página HTML también generan sus
nodos.

Nodos del DOM
 Ejemplo:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml">
4 <head>
5 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
6 <title>Página sencilla</title>
7 </head>
8 <body>
9 Esta página es muy sencilla
10 </body>
11 </html>
DOM del HTML

Propiedades tipo array para la manipulación del DOM
 El documento en HTML tiene una serie de propiedades de tipo array, que nos devuelven un
array con todos los elementos que tienen unas ciertas características. Estos son:
Propiedad Explicación
document.links Devuelve un array con todos los enlaces que hay en el documento
document.forms Devuelve un array con todos los formularios del documento
document.images Devuelve un array con todas las imágenes del documento
document.anchors
Devuelve un array con todos los enlaces tipo referencia (<a name="..">...</a>) del
documento

Métodos de manipulación del DOM
Método Explicación
getElementsByTagName()
Crea un array con todos los elementos cuya etiqueta sea igual a la que se le pasa en el parámetro. Se aplica normalmente
a document. Ej.:parrafos=document.getElementsByName("p").
getElementsByName()
Crea un array con todos los elementos cuya atributo name sea igual al que se le pasa en el parámetro. Se aplica normalmente
a document.
getElementById()
Devuelve el elemento cuyo atributo id sea igual al que se le pasa en el parámetro. Se aplica normalmente a document. Como
el valor de id debe ser único en cada elemento, sólo puede devolver uno.
createElement()
Crea un nodo de tipo Element (etiqueta). Se aplica normalmente a document; document.createElement(). Como parámetro se
pasa el nombre de la etiqueta.
createTextNode()
Crea un nodo de tipo Text (texto). Se aplica normalmente a document; document.createTextNode(). Como parámetro se pasa
el texto.
appendChild()
Inserta un nodo dentro de otro, de manera que se aplica al nodo padre, y como parámetro pasamos el nodo
hijo: nodoPadre.appendChild(nodoHijo). Si el nodo padre tiene otros nodos hijos, el nuevo se coloca el último de todos.
insertBefore()
Inserta un nodo delante de otro de referencia, Lo insertamos en el nodo padre del de referencia, y pasamos como primer
parámetro el nodo nuevo, y como segundo el de referencia: nodoPadre.insertBefore(nodoNuevo,nodoRef);
replaceChild()
Remplaza un nodo (nodoNuevo) por otro (nodoRef). Lo insertamos en el nodo padre del nodoRef, y pasamos como primer
parámetro el nodo nuevo, y como segundo el de referencia: nodoPadre.replaceChild(nodoNuevo,nodoRef);
removeChild() Elimina un nodo. Lo aplicamos en el nodo padre del nodo a eliminar: nodoPadre.removeChild(nodo);
hasChildNodes() Aplicado a un nodo, comprueba si éste tiene nodos hijos. (devuelve true o false).
getAtribute() Lee el valor de un atributo. Se aplica al nodo que contiene el atributo. Ej.:valor=enlace.getAttribute("href").
setAtribute()
Crea y define el valor de un nuevo atributo. Se aplica al nodo que contendrá el atributo. Pasamos dos parámetros, el primero el
nombre del atributo, y el segundo su valor: Ej.:valor=enlace.getAttribute("target","_blank").
removeAtribute()
Elimina un atributo. Se aplica al nodo que contiene el atributo. Pasamos dos parámetros, el primero el nombre del atributo, y el
segundo su valor: Ej.:enlace.removeAttribute("class").

Propiedades de manipulación del DOM
innerHTML
Devuelve o cambia el contenido en lenguaje HTML que contiene el nodo o etiqueta, pudiendo así crear nuevos
nodos dentro de uno ya existente. ej.; elemento.innerHTML="<h3>hola mundo</h3>"
parentNode Devuelve el elemento padre del nodo al que se le aplica. (sólo lectura).
firstChild Devuelve el primer elemento hijo del nodo al que se le aplica. (sólo lectura).
lastChild Devuelve el último elemento hijo del nodo al que se le aplica. (sólo lectura).
nodeName Devuelve el nombre (nombre de etiqueta o atributo) del nodo al que se le aplica (en mayúsculas).
nodeType Devuelve el tipo de nodo al que se le aplica.
nodeValue Devuelve el valor del nodo al que se le aplica. (valor del atributo "value", o el texto en nodos de texto).
attributes Devuelve un array con todos los atributos del nodo al que se le aplica (sólo lectura).
childNodes Devuelve un array con todos los nodos hijo del nodo al que se le aplica (sólo lectura).
tagName Devuelve el nombre en mayúsculas de la etiqueta del nodo al que se le aplica (sólo lectura).
previousSibling Devuelve el elemento inmediatamente anterior al que se le aplica.
NexSibling Devuelve el elemento inmediatamente posterior al que se le aplica.
style
Mediante la propiedad style podemos acceder al código CSS y ver, modificar o crear nuevo código para el nodo
o etiqueta al que se le aplica.
this Devuelve el mismo elemento al que se le aplica o en el que está (por ejemplo en eventos)

Accediendo a los nodos del DOM
 Documento html para explicar esta sección.
1 <html>
2 <body>
3 Esta página es muy sencilla
4 first paragraph
5 second paragraph
6 final
7 
8 </body>
9 </html>

 El nodo document nos da acceso al documento (es el punto de partida).
 Todos los nodos tienen las propiedades:
 nodeType: Hay 12 tipos de nodos representados por números (1=element, 2=attribute,
3=text, …).
 nodeName: Para etiquetas HTML es el nombre de la etiqueta y para nodos texto es #text.
 nodeValue: Para nodos de texto el valor será el texto.
 El nodo documentElement es el nodo raíz. Para documentos HTML es la etiqueta <html>.
> document.documentElement
< <html>
> document.documentElement.nodeType
< 1
> document.documentElement.nodeName
< "HTML"
> document.documentElement.tagName
< "HTML“

 Cada nodo puede tener nodos-hijo:
 hasChildNodes(): Este método devolverá true si el nodo tiene nodos-hijo.
 childNodes: Devuelve en un array los nodos-hijo de un elemento. Al ser un array podemos saber el
numero de nodos-hijo con childNodes.length.
 parentNode: Nos da el nodo-padre de un nodo-hijo.
> document.documentElement.hasChildNodes()
< True
> document.documentElement.childNodes.length
< 2
> document.documentElement.childNodes[0]
< <head>
> document.documentElement.childNodes[1]
< <body>
> document.documentElement.childNodes[1].parentNode
< <html>
> var bd = document.documentElement.childNodes[1];
> bd.childNodes.length
< 9

 Podemos chequear la existencia de attributes y acceder a sus atributos:
 hasAttributes(): Devuelve true si el elemento tiene atributos.
 getAttribute(): Devuelve el contenido de un atributo.
> bd.childNodes[1]
< 
> bd.childNodes[1].hasAttributes()
< True
> bd.childNodes[1].attributes.length
< 1
> bd.childNodes[1].attributes[0].nodeName
< "class"
> bd.childNodes[1].attributes[0].nodeValue
< "opener"
> bd.childNodes[1].attributes['class'].nodeValue
< "opener"
> bd.childNodes[1].getAttribute('class')
< "opener

 Podemos acceder al contenido de una etiqueta:
 textContent: Esta propiedad nos da el texto plano dentro de una etiqueta. En Internet
Explorer no existe esta propiedad (hay que usar innerText).
 innerHTML: Esta propiedad nos da el contenido (en HTML) de una etiqueta.
> bd.childNodes[1].nodeName
< "P"
> bg.childNodes[1].textContent
< "first paragraph"
> bd.childNodes[1].innerHTML
< "first paragraph"
> bd.childNodes[3].innerHTML
< "second paragraph"
> bd.childNodes[3].textContent
< "second paragraph"
> bd.childNodes[1].childNodes.length
< 1
> bd.childNodes[1].childNodes[0].nodeName
< "#text"
> bd.childNodes[1].childNodes[0].nodeValue
< "first paragraph"

 Podemos acceder directamente a algunos elementos sin necesidad de recorrer todo el árbol:
 getElementsByTagName(): Nos devuelve un array con todos los elementos del nombre de la etiqueta que
se le pasa por parámetro.
 getElementsByName(): Nos devuelve un array con todos los elementos del nombre que se le pasa por
parámetro.
 getElementById(): Nos devuelve el elemento con el id que se le pasa por parámetro.
> document.getElementsByTagName('p').length
< 3
> document.getElementsByTagName('p')[0]
< 
> document.getElementsByTagName('p')[0].innerHTML
< "first paragraph"
> document.getElementsByTagName('p')[2]
< 
> document.getElementsByTagName('p')[2].id
< "closer"
> document.getElementsByTagName('p')[0].className
< "opener"
> document.getElementById('closer')
<

 Desde un nodo también podemos acceder a sus hermanos y al primero y último de sus hijos:
 nextSibling: Nos devuelve el siguiente hermano.
 previousSibling: Nos devuelve el anterior hermano.
 firstChild: Nos devuelve el primer hijo.
 lastChild: Nos devuelve el último hijo.
> var para = document.getElementById('closer')
> para.nextSibling
< "n "
> para.previousSibling
< "n "
> para.previousSibling.previousSibling
< 
> para.previousSibling.previousSibling.previousSibling
< "n "
> para.previousSibling.previousSibling.nextSibling.nextSibling
< 
> document.body.previousSibling
< <head>
> document.body.firstChild
< "n "
> document.body.lastChild
< "n "
> document.body.lastChild.previousSibling
< Comment length=21 nodeName=#comment
> document.body.lastChild.previousSibling.nodeValue
< " and that's about it "
Parent & Childs

Modificando los nodos del DOM
 Para cambiar el contenido de una etiqueta cambiamos el contenido de innerHTML.
> var my = document.getElementById('closer');
> my.innerHTML = 'my final';
> my.firstChild
< 
> my.firstChild.firstChild
< "my"
> my.firstChild.firstChild.nodeValue = 'your';
< "your
 Los elementos tienen la propiedad style que podemos utilizar para modificar sus estilos.
> my.style.border = "1px solid red";
< "1px solid red"
 Además podemos modificar los atributos existan ya o no. Ejemplo:
> my.align = "right";
< "right"
> my.name
> my.name = 'myname';
< "myname"
> my.id
< "closer"
> my.id = 'further'
< "further"

Creando y eliminando nodos del DOM
 Para crear nuevos elementos podemos utilizar los métodos createElement y createTextNode.
 Una vez creados los podemos añadir al DOM con appendChild.
> var myp = document.createElement('p');
> myp.innerHTML = 'yet another';
< "yet another"
> myp.style
< CSSStyleDeclaration length=0
> myp.style.border = '2px dotted blue'
< "2px dotted blue"
> document.body.appendChild(myp)
< 
 También podemos copiar elementos existentes con cloneNode().
 cloneNode acepta un parámetro booleano (true copiará el nodo con todos sus hijos y false solo el nodo).
> var el = document.getElementsByTagName('p')[1];
< second paragraph
> document.body.appendChild(el.cloneNode(false))
> document.body.appendChild(document.createElement('p'));
> document.body.appendChild(el.cloneNode(true))

Creando y eliminando nodos del DOM
 Con insertBefore() podemos especificar el elemento delante del cual queremos insertar el nuestro.
> document.body.insertBefore(
document.createTextNode('boo!'),
document.body.firstChild
);
 Para eliminar nodos del DOM podemos utilizar removeChild() o replaceChild().
 removeChild() elimina el elemento y replaceChild() lo sustituye por otro que se le pasa como
parámetro. Tanto replaceChild() como removeChild() devuelven el nodo eliminado.
> var myp = document.getElementsByTagName('p')[1];
> var removed = document.body.removeChild(myp);
> removed
< 
> removed.firstChild
< 
> var p = document.getElementsByTagName('p')[1];
> p
< 
> var replaced = document.body.replaceChild(removed, p);
> replaced
<

Objetos DOM sólo de HTML
 También tenemos disponible el método document.write(). No se recomienda su
uso.
 Algunas propiedades del objeto document son:
 document.cookies: Contiene una cadena de texto con las cookies asociadas al
documento.
 document.title: Permite cambiar el titulo de la pagina que aparece en el
navegador. Esto no cambia el contenido de la etiqueta <title>.
 document.referrer: Contiene la URL desde donde hemos llegado a la página.
 document.domain: Contiene el dominio de la pagina.

Otras propiedades del objeto document
cookie
Devuelve todas las parejas nombre/valor de las cookies guardadas, como una cadena de
texto. ej.;misCookies=document.cookie.
domain Devuelve el dominio del servidor que ha cargado el documento.
lastModified Devuelve la fecha de la última modificación del documento.
readyState Devuelve el estado de carga del documento.
referrer Devuelve la URL del enlace que ha cargado el documento actual.
title Permite cambiar o devuelve el título de la página actual (etiqueta title del head).
URL Devuelve la URL completa de la página actual.
clientHeight Devuelve la altura de la parte visible del documento (en píxeles).
clientWidth Devuelve la anchura de la parte visible del documento (en píxeles).
scrollHeight
Devuelve la altura total del documento (en pixels), incluyendo las zonas ocultas por barras de
desplazamiento.
scrollWidth
Devuelve la anchura total del documento (en pixels), incluyendo las zonas ocultas por barras de
desplazamiento.
scrollTop
Devuelve la distancia entre el borde superior del documento en sí y el borde superior de la parte que vemos
del documento.

Selección Avanzada de Elementos
 document.images
> document.getElementsByTagName(‘img’)
 rows y cells
 Dado un elemento table podemos acceder a sus filas y dado un row podemos
acceder a sus celdas con estos selectores.
> oTable = document.getElementsByTagName(‘table’)[0];
> aRows = oTable.rows;n
> oFirstRow = aRows[0];
> oLastRow = aRows[oRows.length-1];
> aCells = oFirstRow.cells;
> oFirstCell = aCells[0];
> oLastCell = aCells[aCells.length-1];

Selección Avanzada de Elementos
 Options:
 Dado un elemento select podemos acceder al array de sus options.
> document.getElementsByTagName('select')[0].options;
< [option.windows, option.movil, option.aplicaciones-web, option.mac, option.linux,
option.palm, option.pocketpc, option.blog]
 querySelector y querySelectorAll:
 Devuelve elementos del DOM a partir de una selección CSS:
 querySelector() devuelve el primer elemento encontrado.
 querySelectorAll() devuelve un array de elementos.
 Funciones nativas disponibles a partir de IE8 y FF3.5:
> oMyElem = document.querySelector("#myid");
> aMyHiddenElems = document.body.querySelectorAll(".hidden");

Más métodos del documento
 Otros métodos que dependen del objeto window o del nodo document. Aparte de
los vistos anteriormente están estos otros métodos; éstos pueden aplicarse a
cualquier elemento:
Método Explicación
toString()
Convierte cualquier elemento en una cadena de texto.
ej.; cadena=elemento.toString()
focus() Pone el foco del documento en el elemento al que se le aplica
blur() Quita el foco del documento del elemento al que se le aplica
click()
Tiene el mismo efecto que si se efectuara un click de ratón en el elemento al que
se le aplica.

Clase 8 Manipulación del DOM

Recomendados

Recomendados

Más contenido relacionado

Similar a Clase 8 Manipulación del DOM

Similar a Clase 8 Manipulación del DOM (20)

Más de José Ricardo Tillero Giménez

Más de José Ricardo Tillero Giménez (20)

Último

Último (20)

Clase 8 Manipulación del DOM