DOM Ejemplos

Document Object Model
DOM
(Document Object Model)
El Document Object Model o DOM ('Modelo de Objetos del Documento o Modelo en Objetos
para la Representacin de Documentos') es esencialmente una interfaz de programacin de
aplicaciones (API) que proporciona un conjunto estndar de objetos para representar
documentos HTML y XML, un modelo estndar sobre cmo pueden combinarse dichos objetos,
y una interfaz estndar para acceder a ellos y manipularlos. A travs del DOM, los programas
pueden acceder y modificar el contenido, estructura y estilo de los documentos HTML y XML,
que es para lo que se dise principalmente.
El responsable del DOM es el World Wide Web Consortium (W3C).
Con el DOM, todos los elementos HTML se insertan en un rbol cuyos nodos son las etiquetas
HTML y las hojas, los valores propiamente dichos de las etiquetas. Por medio de JavaScript
podemos acceder y modificar este rbol de etiquetas y hacer que la pgina vare luego que ya
se haya mostrado en el navegador.
Mediante el DOM podemos acceder al contenido y estilo de cada etiqueta del documento y
modificarlo de acuerdo a algn evento.
Mediante el DOM podemos insertar, borrar, modificar etiquetas HTML. Podemos acceder a la
hoja de estilo definida a la pgina y dinmicamente agregar, modificar o borrar propiedades.
Todos esto sin tener que recargar la pgina del servidor, es decir todo se hace en el cliente
(navegador) mediante JavaScript.
Acceder a una etiqueta HTML a travs del DOM (getElementById)
La primera funcin que nos provee el DOM a travs del objeto document es:
document.getElementById("nombre del Id de la etiqueta HTML")
Nos retorna una referencia a la etiqueta en s misma. Con esta referencia podemos acceder a
sus propiedades como puede ser su contenido, color, fuente, etc.
Ejemplo : Dispondremos una etiqueta <h1> en la pgina y luego por medio de dos botones
cambiaremos su color, y su tamao de fuente.
El archivo html es el siguiente (dom1.html)
<html>
<head>
<title>Problema</title>
<script language="javascript" type="text/javascript">
function cambiarColor()
{
var tit=document.getElementById('titulo');
tit.style.color='#ff0000';
}
function cambiarTamanoFuente()
{
tit.style.fontSize=60;
}
</script>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<h1 id="titulo">Este es un ttulo dinmico</h1>
<input type="button" value="Cambiar Color" onClick="cambiarColor()">
<input type="button" value="Cambiar Tamao de Fuente"
onClick="cambiarTamanoFuente()">
</body>
</html>
Acceder a los nodos hijos de una etiqueta HTML
Crearemos una pgina con dos div que contengan tres prrafos cada uno, en uno insertaremos
saltos de lnea entre prrafos y en otro los dispondremos todos en la misma lnea y veremos la
cantidad de hijos que tiene cada div:
dom2.html
<html>
<head>

function cuentaHijosDiv()
{
var lista1=document.getElementById('bloque1');
alert('La cantidad de hijos del primer div es:'+lista1.childNodes.length);
var lista2=document.getElementById('bloque2');
alert('La cantidad de hijos del segundo div es:'+lista2.childNodes.length)
;
}
</script>
</head>
<body>
<div id="bloque1">
<p>Este es el primer prrafo</p>
<p>Este es el segundo prrafo</p>
<p>Este es el tercer prrafo</p>
</div>
<hr>
<div id="bloque2"><p>Este es el primer prrafo</p><p>Este es el
prrafo</p><p>Este es el tercer prrafo</p></div>
<input type="button" value="Contar Hijos" onClick="cuentaHijosDiv()">
</body>
</html>
segundo
Observar el comportamiento en IE, en Firefox y Chrome
En IE nos cuenta 3 divs pero en Firefox y Chrome al preguntar al div cuantos hijos tiene,
responder 7 .
Esto es porque FireFox crea el rbol de nodos de la siguiente manera:
<div id="bloque">
Entre la etiqueta <div id="bloque"> y la etiqueta <p> hay un salto de lnea (crea un nodo de
texto, este es el primer nodo).
Luego el primer prrafo es el segundo nodo.
Entre el primer prrafo y el segundo hay otro salto de lnea (este es el tercer nodo) y as
sucesivamente. Si contamos los prrafos y saltos de lnea podremos contabilizar los 7 hijos.
Si no dejamos el salto de lnea entre una prrafo y otro y tampoco dejamos espacios despus
del div y antes del cerrado del div, los hijos sern 3.
Acceder a un nodo de texto de una etiqueta HTML (childNodes - nodeValue)
Es importante notar que el texto contenido en una etiqueta no pertenece al nodo, sino que se
encuentra en otro nodo especial que lo llamaremos nodo texto.
En este rbol de nodos podemos identificar que todos los rectngulos que no tienen bordes
redondeados son nodos texto.
Ahora para acceder a dichos nodos podemos hacerlo a partir del nodo padre con la propiedad
childNodes.
Dom3.html
Cambiar el texto que contiene una etiqueta h1 Acceder al nodo de texto mediante la referencia de la
etiqueta h1.
<html>
<head>
function cambiarTexto()
{
tit.childNodes[0].nodeValue='Ahora vemos el nuevo ttulo';
// tit.innerHTML='Ahora vemos el nuevo ttulo';
}
</script>
</head>
<body>
<h1 id="titulo">Este es el ttulo original</h1>
<input type="button" value="Cambiar Texto" onClick="cambiarTexto()">
</body>
</html>
La propiedad InnerHTML fue definida inicialmente para el IE y luego se volvi un estndar de hecho,
permite ahorrar lneas de cdigo, como veremos ms adelante.
Ejercicio dom4.html
Definir una etiqueta h1 con el texto "1". Luego, rescatar el valor que tiene el nodo de texto,
convertirlo a entero con la funcin parseInt de JavaScript, sumarle uno y finalmente asignrselo
a la propiedad nodeValue del nodo de texto (es decir mostramos un contador). Observar que
ocurre si no se usa la funcin parseInt
Acceder a un nodo padre (parentNode)
Si tenemos la referencia a un nodo podemos obtener fcilmente la referencia del nodo padre
mediante la propiedad parentNode.
Veamos un ejemplo sencillo donde obtenemos la referencia de un prrafo contenido en un div.
Luego por medio de esta referencia obtenemos la referencia al div y cambiamos el color de
fondo del div.
Dom5.html
<html>
<head>
function cambiarColor()
{
var puntero=document.getElementById('parrafo1');
var padre=puntero.parentNode;
padre.style.backgroundColor='#ff0000';
}
</script>
</head>
<body>
<div>
<p id="parrafo1">Este es el primer prrafo</p><p>Este
prrafo</p><p>Este es el tercer prrafo</p>
</div>
<input type="button" value="Cambiar color de fondo del div"
onClick="cambiarColor()">
</body>
</html>
es
el
segundo
Obtenemos la referencia del prrafo:

var puntero=document.getElementById('parrafo1');
Ahora accedemos a la propiedad parentNode de la variable inicializada previamente:

var padre=puntero.parentNode;
Finalmente modificamos el color del div:

padre.style.backgroundColor='#ff0000
Acceder a un nodo hermano (nextSibling y previousSibling)

Si tenemos la referencia de un nodo podemos fcilmente acceder a los otros nodos que se
encuentran en la misma altura dentro del rbol que genera el DOM.
Veamos con un ejemplo como obtenemos la referencia de los nodos hermanos,

implementaremos una pgina que contenga tres prrafos y slo disponemos el id del primero
de ellos.
dom6.html
<html>
<head>
function proximoParrafo()
{
var puntero1=document.getElementById('parrafo1');
alert(puntero1.childNodes[0].nodeValue);
var puntero2=puntero1.nextSibling;
var puntero3=puntero2.nextSibling;
}
</script>
</head>
<body>
<div>
<p id="parrafo1">Este es el primer prrafo</p><p>Este es
prrafo</p><p>Este es el tercer prrafo</p>
</div>
<input
type="button"
value="Acceder
a
los
tres
onClick="proximoParrafo()">
</body>
</html>
el
segundo
prrafos"
El mtodo nextSibling retorna la referencia del nodo hermano que se encuentra

inmediatamente ms abajo en el archivo HTML, pero a la misma altura si lo pensamos al
archivo HTML como un rbol. Tambin existe un mtodo llamado previusSibling que retorna la
referencia del nodo hermano que se encuentra inmediatamente ms arriba en el archivo HTML.
nextSibling y previusSibling retornan null en caso de no existir ms nodos en dicho nivel.
Recordar: Algo muy importante que hay que tener en cuenta es que Firefox, a diferencia de
Internet Explorer, a un espacio entre dos prrafos lo interpreta y crea un nodo de texto,
inclusive un enter tambin crear un nodo. Para facilitar las cosas, por el momento, cuando
quiera acceder a un conjunto de nodos con los mtodos nextSibling y previousSibling escriba
todo el texto corrido sin saltos de lnea. Por ejemplo:
<p id="parrafo1">1er prrafo</p><p>2do prrafo</p><p>3er prrafo</p>
Habamos visto anteriormente que podemos acceder a todos los hijos de un nodo por medio
del vector childNodes. Otra forma de acceder al primer y ltimo nodo hijo es por medio de las
propiedades firstChild (retorna la referencia del primer hijo, es lo mismo que poner
obj.childNodes[0]) y obj.lastChild (retorna la referencia del ltimo hijo, es sinnimo de poner
obj.childNodes[obj.childNodes.length-1])
Veamos con un ejemplo como utilizar estas dos propiedades, dispondremos tres prrafos
dentro de un div y luego cambiaremos el color del primer y ltimo prrafo (Para hacerlo
compatible entre IExplorer y FireFox dispondremos todos los prrafos en la misma lnea, lo
mismo que el comienzo y fin del div)
(dom7.html)
<html>
<head>
function accederParrafos()
{
var puntero=document.getElementById('parrafos');
puntero.firstChild.style.color='#ff0000';
puntero.lastChild.style.color='#ff0000';
}
</script>
</head>
<body>
<div id="parrafos"><p>Este es el primer prrafo</p><p>Este
prrafo</p><p>
Este es el tercer prrafo</p></div>
<input type="button" value="Modificar color del primer y ltimo
prrafo" onClick="accederParrafos()">
</body>
</html>
es
el
segundo
Acceder a un conjunto de etiquetas HTML similares (getElementsByTagName)

Disponemos en el objeto documento de un mtodo llamado:
getElementsByTagName("Nombre de la Etiqueta")
Retorna un vector con la referencia a todas las etiquetas de dicho tipo.
A diferencia del mtodo getElementById que retorna la referencia de una sola etiqueta, el
mtodo getElementsByTag retorna un conjunto de referencias, las mismas se almacenan en un
vector.
Confeccionemos una pgina que permita agregar un punto al final de cada prrafo.
La pgina html es: dom8.html
<html>
<head>
<script languaje="javascript" type="text/javascript">
function cambiarParrafos()
{
var lista=document.getElementsByTagName('p');
for(f=0;f<lista.length;f++)
{
lista[f].childNodes[0].nodeValue=lista[f].childNodes[0].nodeValue + '.';
}
}</script>
</head>
<body>

<input type="button" value="Agregar un punto al final de cada
prrafo" onClick="cambiarParrafos()">
</body>
</html>
Hay que tener en cuenta que en el vector lista se almacena la referencia a todas las etiquetas
de tipo prrafo (p) de la pgina. Luego para acceder al contenido de cada prrafo debemos
hacerlo mediante el vector childNodes y mediante la propiedad nodeValue acceder al texto
contenido en dicho prrafo. Disponemos el subndice cero en la propiedad childNodes ya que
los prrafos definidos en el ejemplo tienen como hijo slo un texto. Para agregar un punto al
final de cada prrafo slo debemos almacenar el contenido actual ms el string '.':
for(f=0;f<lista.length;f++)
{
lista[f].childNodes[0].nodeValue=lista[f].childNodes[0].nodeValue + '.';
}
Ejercicio
Disponemos de la pagina web como la siguiente
<body>
<div id="bloque1">
<h1>Primer Bloque de prrafos.</h1>
</div>
<div id="bloque2">
<h1>Segundo Bloque de prrafos.</h1>
</div>
<input type="button" value="Agregar
onClick="cambiarParrafos()">
</body>
</html>
un
punto
al
final
de
cada
prrafo"
Modificar el ejercicio anterior para que slo ponga puntos a los prrafos del segundo
bloque.
Agregar un nodo de texto (appendChild - createTextNode)
Para la creacin de un nodo de texto disponemos del siguiente mtodo de la clase document:
var nt=document.createTextNode('Texto del nodo');
Para aadirlo luego a un prrafo por ejemplo debemos llamar al mtodo appendChild:
var nparrafo=document.getElementById('parrafo');
nparrafo.appendChild(nt);
Veamos un ejemplo en el que cada vez que se presione un botn se aada un nodo de texto a
un prrafo mostrando cuntos nodos de texto se han aadido: (dom9.html)
<html>
<head>
var contador=1;
function agregar()
{
var nt=document.createTextNode('Nuevo texto '+contador+'-');
var nparrafo=document.getElementById('parrafo');
nparrafo.appendChild(nt);
contador++;
}
</script>
</head>
<body>
<p id="parrafo">Texto inicial:</p>
<input type="button" value="Agregar nodo de texto" onClick="agregar()">
</body>
</html>
Ejercicio
Hacerlo con la propiedad innerHTML
Ejercicio
Ampliar el ejercicio anterior para que permita eliminar nodos. Para ello disponemos
de la funcin removeChild
(dom10.html)
Ejercicio (dom11.html)
Con la siguiente pgina web y usando las funciones del DOM sacar por pantalla
1.
2.
3.
4.
Nmero de enlaces de la pgina

Direccin a la que enlaza el penltimo enlace
Numero de enlaces que enlazan a http://prueba
Nmero de enlaces del tercer prrafo
Cuerpo de la pgina web

<body>
<div id="informacion" style="border:thin solid silver; padding:.5em"></div>
<p>Lorem ipsum dolor sit amet, <a href="http://prueba">consectetuer
adipiscing elit</a>. Sed mattis enim vitae orci. Phasellus libero. Maecenas
nisl arcu, consequat congue, commodo nec, commodo ultricies, turpis. Quisque
sapien nunc, posuere vitae, rutrum et, luctus at, pede. Pellentesque massa
ante, ornare id, aliquam vitae, ultrices porttitor, pede. Nullam sit amet
nisl elementum elit convallis malesuada. Phasellus magna sem, semper quis,
faucibus ut, rhoncus non, mi. <a href="http://prueba2">Fusce porta</a>. Duis

pellentesque, felis eu adipiscing ullamcorper, odio urna consequat arcu, at
posuere ante quam non dolor. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Duis scelerisque. Donec lacus neque, vehicula in, eleifend
vitae, venenatis ac, felis. Donec arcu. Nam sed tortor nec ipsum aliquam
ullamcorper. Duis accumsan metus eu urna. Aenean vitae enim. Integer lacus.
Vestibulum venenatis erat eu odio. Praesent id metus.</p>
<p>Aenean at nisl. Maecenas egestas dapibus odio. Vestibulum ante ipsum
primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin
consequat auctor diam. <a href="http://prueba">Ut bibendum blandit est</a>.
Curabitur vestibulum. Nunc malesuada porttitor sapien. Aenean a lacus et
metus venenatis porta. Suspendisse cursus, sem non dapibus tincidunt, lorem
magna porttitor felis, id sodales dolor dolor sed urna. Sed rutrum nulla
vitae tellus. Sed quis eros nec lectus tempor lacinia. Aliquam nec lectus nec
neque aliquet dictum. Etiam <a href="http://prueba3">consequat sem quis
massa</a>. Donec aliquam euismod diam. In magna massa, mattis id,
pellentesque sit amet, porta sit amet, lectus. Curabitur posuere. Aliquam in
elit. Fusce condimentum, arcu in scelerisque lobortis, ante arcu scelerisque
mi, at cursus mi risus sed tellus.</p>
<p>Donec sagittis, nibh nec ullamcorper tristique, pede velit feugiat massa,
at sollicitudin justo tellus vitae justo. Vestibulum aliquet, nulla sit amet
imperdiet suscipit, nunc erat laoreet est, a <a href="http://prueba">aliquam
leo odio sed sem</a>. Quisque eget eros vehicula diam euismod tristique. Ut
dui. Donec in metus sed risus laoreet sollicitudin. Proin et nisi non arcu
sodales hendrerit. In sem. Cras id augue eu lorem dictum interdum. Donec
pretium. Proin <a href="http://prueba4">egestas</a> adipiscing ligula. Duis
iaculis laoreet turpis. Mauris mollis est sit amet diam. Curabitur hendrerit,
eros quis malesuada tristique, ipsum odio euismod tortor, a vestibulum nisl
mi at odio. <a href="http://prueba5">Sed non lectus non est pellentesque</a>
auctor.</p>
</body>
</html>
Dado una web con un texto insertar dos botones para aumentar o disminuir la letra de la web.
Partiendo del cdigo dado crear las funciones sube() y baja(), para subir o bajar un elemento del
formulario.
10

<form name="el_form">
<hr>
<table>
<tr><td>
<select size=8 name="el_select">
<option value='RubyonRails' selected>Ruby on Rails</option>
<option value='CodeIgniter'>CodeIgniter</option>
<option value='Django'>Django</option>
<option value='CakePHP'>CakePHP</option>
<option value='Zend'>Zend</option>
<option value='Yii'>Yii</option>
<option value='Symphony'>Symphony</option>
<option value='Pylons'>Pylons</option>
</Select>
</td>
<td align='middle'><Input type='button' Value="Subir" onclick='sube()'><br>
<Input type='button' Value="Bajar" onclick='baja()'>
</td>
</tr></table>
</form>
Usando una imagen de un mapa(plano.gif) como base de 600x600 px y la propiedad clip , usar los
botones para visualizar las partes de la imagen . Crear las funciones necesarias para mover el clip de 10
en 10 px.
<div id='capa' style="position:absolute;left:100px;top:40px; bottom:340px;

clip:rect(100px 250px 250px 100px)">
<img src ='plano.gif'>
</div>
<div id='controles' style='position:absolute;left:20px;top:10px'>
<form>
<input type='button' value='Arriba' onclick='MueveArriba()'>
<input type='button' value='Abajo' onclick='MueveAbajo()'>
<input type='button' value='Izquierda' onclick='MueveIzda()'>
<input type='button' value='Derecha' onclick='MueveDerecha()'>
</form>
</div>
</body></html>
11

DOM Ejemplos

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

DOM Ejemplos

Încărcat de

Drepturi de autor:

Formate disponibile

Document Object Model

(Document Object Model)

Document Object Model

Acceder a una etiqueta HTML a travs del DOM (getElementById)

Acceder a los nodos hijos de una etiqueta HTML

Document Object Model

Observar el comportamiento en IE, en Firefox y Chrome

Acceder a un nodo de texto de una etiqueta HTML (childNodes - nodeValue)

Document Object Model

Document Object Model

Acceder a un nodo padre (parentNode)

Obtenemos la referencia del prrafo:

Ahora accedemos a la propiedad parentNode de la variable inicializada previamente:

Finalmente modificamos el color del div:

Acceder a un nodo hermano (nextSibling y previousSibling)

Document Object Model

Veamos con un ejemplo como obtenemos la referencia de los nodos hermanos,

El mtodo nextSibling retorna la referencia del nodo hermano que se encuentra

Document Object Model

Acceder a un conjunto de etiquetas HTML similares (getElementsByTagName)

Document Object Model

Agregar un nodo de texto (appendChild - createTextNode)

Document Object Model

Nmero de enlaces de la pgina

Cuerpo de la pgina web

Document Object Model

Document Object Model

<div id='capa' style="position:absolute;left:100px;top:40px; bottom:340px;

S-ar putea să vă placă și