Documentos de Académico
Documentos de Profesional
Documentos de Cultura
DHTML Ya
DHTML Ya
inicio=0
1 - Introducción.
Para poder aplicar los conceptos de DHTML debemos conocer a la perfección el DOM (Document Object
Model - Modelo Objeto Documento)
El DOM es otra forma para representar una página web. Para entender que es el DOM veamos tres tipos de
personas frente a una página web:
1 - Un usuario de internet que conoce muy poco sobre el mundo de la computación, ve una página web como
una ventana que contiene texto con distintos tamaños y colores, imágenes, enlaces etc. esto es lo que ve un
usuario común de internet.
2 - Ahora veamos como ve una página web una persona que se ha iniciado hace muy poco en el mundo del
diseño de páginas web, este usuario ve un poco más allá de lo que ve un usuario común, puede identificar que
texto dispuso en la marca title del documento, si utilizó tablas para formatear datos de la página o empleó CSS
o ambas. Si incorporó algun aplique Flash etc. Este segundo tipo de personas puede imaginar el contenido
HTML y CSS de la página.
3 - Ahora por último, para un programador de sitios web tiene una visión mucho más profunda, puede decir si
la página según su interactividad tiene apliques de programación.
Este último tipo de persona puede identificar más allá del código HTML y CSS de la página, intuye
perfectamente si hay programación por detrás del esqueleto HTML y la definición de las hojas de estilo.
Para disponer un ejemplo muy sencillo dispondremos una marca <h1> en la página y luego por medio de dos
botones cambiaremos su color, y su tamaño de fuente.
<html>
<head>
<title>Problema</title>
<script language="javascript" src="funciones.js" type="text/javascript"></script>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<h1 id="titulo">Este es un título dinámico</h1>
Es importante notar que a los eventos para los dos botones los definimos en un archivo separado llamado
funciones.js que lo incluimos con el siguiente código:
A la hoja de estilo también la definimos en un archivo separado que la incluimos con el siguiente código:
Para capturar los eventos de los dos botones inicializamos la propiedad onclick de cada botón:
#titulo {
text-align:center;
}
#boton1,#boton2 {
text-align:center;
width:200px;
}
y el archivo funciones.js:
function cambiarColor()
{
var tit=document.getElementById('titulo');
tit.style.color='#ff0000';
}
function cambiarTamanoFuente()
{
var tit=document.getElementById('titulo');
tit.style.fontSize=60;
}
Notemos que para recuperar una referencia a la marca h1 debemos indicar el siguiente código:
var tit=document.getElementById('titulo');
tit.style.color='#ff0000';
Es similar para cambiar la fuente del título (accedemos a la propiedad fontSize):
var tit=document.getElementById('titulo');
tit.style.fontSize=60;
Ejercicio:
Permitir cambiar el tamaño de la fuente de un párrafo. Para esto crear tres botones (fuente pequeña (10), fuente
mediana(13) y fuente grande(20))
4 - Accediendo a los nodos hijos de una marca
HTML(childNodes)(solo Internet Explorer)
Veremos más adelante que hay diferencias de implementación en varias partes del DOM entre diferentes
navegadores y es muy bueno conocerlas para cuando implementamos nuestros programas. Cada vez que
aparezca una de estas diferencias las haremos notar dando un concepto para cada navegador.
Cada nodo tiene un solo nodo padre, pero puede tener muchos hijos.
En este ejemplo el nodo body tiene 4 hijos, la marca h1 tiene 1 hijo, lo mismo cada marca li tienen un hijo. Los
nodos que no tienen descendientes son los nodos hoja.
El DOM provee a cada nodo de un vector que almacena la referencia a cada nodo hijo, la propiedad se llama:
childNodes
Este vector almacena una referencia a cada nodo hijo.
El siguiente ejemplo muestra como acceder a cada hijo de una marca div que contiene tres párrafos. Al
presionar un botón cambiaremos el color de cada párrafo accediendo a los mismos desde el nodo div a través de
la propiedad childNodes. Mostramos finalmente la cantidad de hijos que tiene la marca div.
Problema: Definir dentro de una marca div tres párrafos. Al presionar un botón cambiar el color de cada
párrafo accediendo a los mismos desde el nodo div a través de la propiedad childNodes. Mostrar la cantidad de
hijos que tiene la marca div.
pagina1.html
<html>
<head>
<title>Problema</title>
<script language="javascript" src="funciones.js"
type="text/javascript"></script>
</head>
<body>
<div id="bloque">
<p>Este es el primer párrafo</p>
<p>Este es el segundo párrafo</p>
<p>Este es el tercer párrafo</p>
</div>
<input type="button" value="Cambiar colores" onClick="cambiarColores()">
</body>
</html>
funciones.js
function cambiarColores()
{
var lista=document.getElementById('bloque');
lista.childNodes[1].style.color='#ff0000';
lista.childNodes[3].style.color='#00ff00';
lista.childNodes[5].style.color='#0000ff';
alert('La cantidad de hijos del nodo div es:'+lista.childNodes.length);
}
Es importante notar que sólo definimos la propiedad id para la marca div, ya que teniendo la referencia de éste
podemos acceder a los tres hijos (los tres párrafos).
Para obtener la referencia a la marca div hacemos como lo vimos en el concepto anterior:
var lista=document.getElementById('bloque');
Luego para acceder al primer párrafo:
lista.childNodes[0].style.color='#ff0000';
Es decir, indicamos la propiedad childNodes y entre corchetes qué elemento del vector accedemos. Se numeran
las componentes a partir de cero. Si queremos saber cuántos elementos tiene el vector lo hacemos mediante la
propiedad length de la propiedad childNodes:
alert('La cantidad de hijos del nodo div es:'+lista.childNodes.length);
Si en FireFox si disponemos:
<div id="bloque">
<p>Este es el primer párrafo</p>
<p>Este es el segundo párrafo</p>
<p>Este es el tercer párrafo</p>
</div>
Y luego le preguntamos al div cuantos hijos tiene, este nos responderá 7 (siete), recordemos que con el Internet
Explorer el resultado es 3 (tres).
pagina1.html
<html>
<head>
<title>Problema</title>
<script language="javascript" src="funciones.js" type="text/javascript"></script>
</head>
<body>
<div id="bloque1">
<p>Este es el primer párrafo</p>
<p>Este es el segundo párrafo</p>
<p>Este es el tercer párrafo</p>
</div>
<hr>
<div id="bloque2"><p>Este es el primer párrafo</p><p>Este
es el segundo párrafo</p><p>Este es el tercer párrafo</p></div>
<input type="button" value="Cambiar colores" onClick="cambiarColores()">
</body>
</html>
funciones.js
function cambiarColores()
{
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);
}
Ejercicio:
Definir 5 párrafos en un bloque div. Luego modificar la propiedad fontSize de cada párrafo. Acceder a cada
párrafo a partir del div.