Tema 4

Tema 4
DOM de HTML y JavaScript

DOM de HTML define una forma estndar para acceder y manipular documentos
HTML. DOM permite a los programas y lenguajes de guiones acceder y actualizar
dinmicamente el contenidamente, la estructura y el estilo de un documento
HTML. DOM de HTML define los objetos y propiedades de todos los elementos de
un documento y los mtodos para accederlos.
DOM de HTML est dividido en dos diferentes niveles:
Ncleo de DOM - standard model for any structured document

DOM de HTML - standard model for HTML documents
Nodos de DOM de HTML

Todo en un documento de HTML es un nodo.
El documento entero es un nodo de documento.

Cada elemento de HTML es un nodo de elemento.
El texto en los elementos de HTML son nodos de texto.
Cada atributo de HTML es un node de atributo
Los comenarios son nodos de comentarios
Ejemplo de DOM
Considere el siguiente documento HTML:
<html>
<head>
<title>My title</title>
</head>
<body>
<a href="">My link</a>
<h1>My header</h1>
</body>
</html>
El nodo raz de un documento HTML anterior es <html>. Todos los dems nodos
en el documento estn contenidos dentro <html>. El nodo <html> tiene dos
nodos hijos: <head> y <body>. El nodo <head> tiene un nodo <title>.El nodo
<body> tiene los nodos <a> y <h1>.
ITSON
Manuel Domitsu Kono
118
El texto de un nodo de elemento siempre se almacena en un nodo de texto. En el

ejemplo anterior el nodo del elemento <title>, tiene un nodo de texto con el
valor "My title". "My title" no es el valor del elemento <title>. El valor del
nodo de texto puede accederse mediante la propiedad innerHTML.
Nodo de rbol del DOM de HTML

DOM de HTML visualiza a un documento HTML como una estructura de rbol,
llamada rbol de Nodos. Todos los nodos del rbol estan relacionados entre s.
Todos los nodos pueden accederse mediante el rbol. Su contenido puede
modificarse, borrarsey pueden crearse nuevos elementos.
El rbol de la figura 1 corresponde al documento HTML del ejemplo anterior.
Figura 1. Estructura de rbol de un Documento HTML.
Nodos Padres, Hijos y Hermanos

Los nodos de un rbol de nodos tienen estn relacionados jerarquicamente entre
s.
ITSON
En un rbol de nodos, el nodo superior es el nodo raz.

Cada nodo, excepto excepto el nodo raz tiene exactamente un nodo padre.
Un nodo puede tener cualquier nmero de hijos.
Una hoja es un nodo sin hijos.
Los nodos son los nodos con el mismo padre.
Manuel Domitsu Kono
Tema 4
119
La siguiente figura muestra una parte de un rbol de nodos y las relaciones entre
sus nodos:
Figura 2. Relaciones entre nodos de un rbol de Nodos

Para el rbol de nodos de la figura 1, tenemos las siguientes relaciones entre sus
nodos:
El nodo <html> no tiene un nodo padre. Es el nodo raz.

El nodo padre de los nodos <head> y <body> es el nodo <html>.
El nodo padre del nodo del nodo de texto "my header" es el nodo <h1>.
El nodo <html> tiene dos nodos hijos <head> y <body>.
El nodo <head> tiene un nodo hijo; el nodo <title>.
El nodo <title> tiene un nodo hijo; el nodo texto "My title".
Los nodos <a> y <h1> son hermanos, y ambos son hijos de <body>.
El nodo <head> es el primer hijo del nodo <html> y el nodo <body> es el
ltimo hijo del nodo <html>.
El nodo <a> es el primer hijo del nodo <body> y el nodo <h1> es el ltimo
hijo del nodo <body>.
Interfaz de Programacin de DOM de HTML

En DOM, los documentos HTML consisten de un conjunto de nodos objetos. Los
nodos pueden ser accedidos con JavaScript u otros lenguajes de programacin.
La interfaz de programacin de DOM est definida por propiedades y mtodos
estndar.
ITSON
Manuel Domitsu Kono
120
Propiedades de DOM de HTML

Algunas propiedades de DOM:
x.innerHTML El valor del texto del elemento x.

x.nodeName - El nombre del elemento x.
x.nodeValue - El valor del elemento x.
x.parentNode - El padre del elemento x.
x.childNodes - El nodos hijos del elemento x.
x.attributes Los atributos del elemento x.
Mtodos de DOM de HTML

Algunos mtodos de DOM:
x.getElementById(id) Obtn el elemento con el atributo id

especificado.
x.getElementsByTagName(name) Obten todos los elementos con un
nombre de etiqueta especificado.
x.appendChild(node) - Inserta un nodo hijo al elemento x.
x.removeChild(node) - Remueve un nodo hijo al elemento x.
La Propiedad innerHTML
La propiedad innerHTML nos permite obtener o modificar el contenido de un
elemento.
El siguiente ejemplo obtiene el texto del elemento <p> con id="intro":
<html>
<body>
<p id="intro">Hola mundo!</p>
<script type="text/javascript">
txt=document.getElementById("intro").innerHTML;
document.write("<p>El texto en el parrafo intro: "
+ txt + "</p>");
</script>
</body>
</html>
En el ejemplo anterior getElementById() es un mtodo y innerHTML es una

propiedad.
ITSON
Manuel Domitsu Kono
Tema 4
121
Nodos Hijos y Valor de un Nodo

Podemos usar las propiedades childNodes y nodeValue para obtener el
contenido de un elemento.
El siguiente cdigo obtiene el valor del elemento <p> con id="intro":
<html>
<body>
<p id="intro"> Hola mundo!</p>
txt=document.getElementById("intro")
.childNodes[0].nodeValue;
document.write("<p> El texto en el parrafo intro: "
+ txt + "</p>");
</script>
</body>
</html>
En el ejemplo anterior getElementById() es un mtodo, mientras childNodes

y nodeValue son propiedades.
Acceso a los Nodos DOM de HTML

Con DOM, se puede acceder a cada nodo en un documento HTML.
Se puede acceder a un nodo de tres formas:
1. Usando el mtodo getElementById().
2. Usando el mtodo getElementsByTagName().
3. Navegando el rbol de nodos, usando las relaciones entre nodos.
Mtodo getElementById()
Este mtodo regresa el elemento con el id especificado. Su sintaxis es:
node.getElementById("id");
El siguiente ejemplo obtiene el elemento con id="intro":

document.getElementById("intro");
ITSON
Manuel Domitsu Kono
122
Mtodo getElementsByTagName()
Este mtodo regresa todos los elementos con el nombre de etiqueta especificado.
Su sintaxis es:
node.getElementsByTagName("tagname");
El siguiente ejemplo regresa una lista de nodos de todos los elementos <p> en el
documento:
document.getElementsByTagName("p");
El siguiente ejemplo regresa una lista de nodos de todos los elementos <p> que
son descendientes del elemento con id="principal":
document.getElementById("principal").getElementsByTagName("p");
Lista de Nodos de DOM

El mtodo getElementsByTagName() regresa una lista de nodos. Una lista de
nodos es un arreglo de nodos. El siguiente cdigo selecciona todos los nodos <p>
en una lista de nodos.
x=document.getElementsByTagName("p");
Los nodos de la lista de nodos pueden accesarse por su ndice. Para acceder al
segundo prrafo podemos escribir:
y=x[1];
Longitud de la Lista de Nodos de DOM

La propiedad length establece el nmero de nodos en una lista de nodos. En el
siguiente ejemplo se obtiene la lista de todos los elementos <p>. Luego se itera la
lista de nodos para desplegar el valor de su nodo de texto:
x=document.getElementsByTagName("p");
for (i=0;i<x.length;i++) {
document.write(x[i].innerHTML);
document.write("<br />");
}
ITSON
Manuel Domitsu Kono
Tema 4
123
Navegar las Relaciones de los Nodos

Las tres propiedades parentNode, firstChild y lastChild, siguen la
estructura del documento y permiten hacer viajes cortos en el documento. Por
ejemplo en el siguiente fragmento HTML:
<html>
<body>
<p>Hola mundo!</p>
<div>
<p>DOM es muy util!</p>
<p> Este ejemplo muestra las relaciones entre nodos.</p>
</div>
</body>
</html>
El primer elemento <p> es el nodo primer hijo (firstChild) del elemento

<body> y el elemento <div> es el ltimo hijo (lastChild) del elemento <body>.
El nodo padre (parentNode) del primer elemento <p> y el elemento <div>, es el
elemento <body> y el nodo padre de los elementos <p> dentro del elemento
<div>, es el elemento <div>.
El elemento firstChild puede usarse para acceder al texto de un elemento:
<html>
<body>
<p id="intro">Hello World!</p>
x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);
</script>
</body>
</html>
Nodos Raz de DOM

Hay dos propiedades del documentos especiales que permiten acceder a los
elementos:
document.documentElement Regresa el nodo raz del documento.

document.body Da acceso directo al elemento <body>.
InformacindeunNodoDOMdeHTML
En DOM de HTML, cada nodo es un objeto. Los objetos tienen mtodos y
propiedades que pueden manipularse mediante JavaScript. Tres propiedades de
ITSON
Manuel Domitsu Kono
124
los nodos son: nodeName, nodeValue y nodeType que contienen informacin de

los nodos.
La Propiedad nodeName
La propiedad nodeName especifica el nombre de un nodo.
El nodeName es de solo lectura.

El nodeName es lo mismo que el nombre del elemento.
El nodeName de un atributo es el nombre del atributo.
El nodeName de un nodo de texto es siempre #text.
El nodeName del nodo del documento es siempre #document.
Nota: El nodeName siempre contiene el nombre del elemento en maysculas.
La Propiedad nodeValue
La propiedad nodeValue especifica el valor de un nodo.
El nodeValue para los nodos de los elementos est indefinido.
El nodeValue de un nodo de texto es el texto mismo.
El nodeValue de un atributo es el valor del atributo.
El siguiente ejemplo recupera el valor del nodo de texto del elemento <p
id="intro">:
<html>
<body>
<p id="intro">Hola mundo!</p>
x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);
</script>
</body>
</html>
La Propiedad nodeType
La propiedad nodeType especifica el tipo de un nodo. Esta propiedad es de solo
lectura.
ITSON
Manuel Domitsu Kono
Tema 4
125
La tabla 4.1 muestra los tipos de nodos ms importates.

Tabla 4.1 Tipos de nodos
Tipo de Elemento
Elemento
Atributo
Texto
Comentario
Documento
Tipo de Nodo
1
2
3
8
9
Cambio de los Elementos DOM de HTML

Los valores (contenido y atributos) de los elementos HTML pueden modificarse
usando JavaScript, DOM de HTML y eventos.
El siguiente ejemplo cambia el color de fondo del elemento <body>:
<html>
<body>
document.body.bgColor="lavender";
</script>
</body>
</html>
La forma ms sencilla de obtener o modificar el contenido de un elemento es

mediante la propiedad innerHTML.
El siguiente ejemplo cambia el texto de un elemento <p>:
<html>
<body>
<p id="p1">Hola mundo!</p>
document.getElementById("p1").innerHTML="Hola de nuevo!";
</script>
</body>
</html>
Se puede cambiar un elemento HTML usando eventos. Un manejador de eventos

permite la ejecucin de cdigo cuando un evento ocurre. Los eventos son
generados por el navegador cuando el usuario hace clic en un elemento, la pgina
carga, se enva un formulario, etc.
ITSON
Manuel Domitsu Kono
126
El siguiente ejemplo cambia el color de fondo del elemento <body> cuando se

hace clic en un botn.
<html>
<body>
<input type="button"
onclick="document.body.bgColor='lavender';"
value="Cambia color de fondo" />
</body>
</html>
Se puede cambiar el valor de un elemento mediante una funcin. El siguiente

ejemplo usa una funcin para cambiar el texto de un elemento <p> cuando se
hace clic en un botn:
<html>
<head>
function cambiaTexto() {
document.getElementById("p1")
.innerHTML="Hola de nuevo!";
}
</script>
</head>
<body>
<input type="button" onclick="cambiaTexto()"
value="Cambia Texto" />
</body>
</html>
UsodelObjetoStyle
El objeto Style de cada elemento HTML representa su estilo individual. El siguiente
ejemplo usa una funcin para cambiar el estilo del elemento <body> cuando se
hace clic en un botn:
<html>
<head>
function cambiaColor() {
document.body.style.backgroundColor="lavender";
}
</script>
</head>
<body>
<input type="button" onclick=" cambiaColor()"
value="Cambia color de fondo" />
ITSON
Manuel Domitsu Kono
Tema 4
127
</body>
</html>
El siguiente ejemplo usa una funcin para cambiar el estilo de un elemento <p>
cuando se hace clic en un botn:
<html>
<head>
function CambiaEstilo() {
document.getElementById("p1").style.color="blue";
document.getElementById("p1").style.fontFamily="Arial";
}
</script>
</head>
<body>
<input type="button" onclick=" CambiaEstilo()"
value="Cambia Estilo" />
</body>
</html>
EventosdeDOMdeHTML
Los eventos son acciones que pueden ser detectadas desde JavaScript. Cada
elemento de una pgina Web tiene una serie de eventos que pueden disparar
funciones de JavaScript. Por ejemplo, se puede usar el evento onclick de un botn
para indicar que la funcin se ejecutar cuando el usuario haga clic sobre el botn.
Se definen los eventos en los elementos de HTML.
Ejemplos de eventos:
Clic del ratn

Cargado de una pgina o imagen
Pasar el ratn sobre una parte de una pgina Web
Seleccin de un elemento de entrada en un formulario HTML
Envo de un formulario HTML
Presionar una tecla
Nota: Normalmente los eventos se usan en combinacin con las funciones y las
funciones no ejecutarn antes de que el evento suceda.
El siguiente ejemplo despliega la fecha cuando se hace clic sobre un botn.
ITSON
Manuel Domitsu Kono
128
<html>
<head>
function despliegaFecha() {
document.getElementById("demo").innerHTML=Date();
}
</script>
</head>
<body>
<h1>Despliega Fecha</h1>
<p id="demo"></p>
<button type="button"
onclick="despliegaFecha()">
Despliega Fecha
</button>
</body>
</html>
Eventos onload y onUnload

Los eventos onload y onUnload son disparados cuando el usuario entra a o deja
una pgina.
El evento onload se usa, normalmente, para verificar el tipo y versin del
navegador del visitante y cargar la versin apropiada de la pgina Web en base a
esta informacin.
Ambos eventos onload y onUnload son usados frecuentemente para ttrabajar
con cookies que deben establecerse cuando el usuario entra a o sale de una
pgina. Por ejemplo se puede pedirle al visitante su nombre de usuario cuando
recin arriva a la pgina. El nombre se almacena en un cookie. Cuando el
visistante arriva de nuevo a la pgina, el visitante puede ser reconocido por la
informacin en el cookie.
Eventos onFocus, onBlur y onChange

Los eventos onFocus, onBlur y onChange se usan frecuentemente en
combinacin con validacioes de elementos de formulario.
El siguiente es un ejemplo de cmo se usa el evento onChange. Se invoca a la
funcin checkEmail() cada vez que se cambia el contenido del campo de entrada
e-mail.
E-mail: <input type="text" id="email" onchange="checkEmail()" />
ITSON
Manuel Domitsu Kono
Tema 4
129
Evento onSubmit
El evento onSubmit se usa para validar todos los elementos de un formulario
antes de enviarlo.
En el siguiente ejemplo, la funcin checkForm() ser invocada cuando el usuario
haga clic en el botn Submit. Si los valores de los campos de entrada no son
aceptados, el envo es cancelado. La funcin checkForm() regresa un valor
booleano. Si regresa true la forma ser enviada, de otra manera el envo sera
cancelado.
<form method="post" action="xxx.htm" onsubmit="return checkForm()"
Javascript del Lado del Cliente

JavaScript es un lenguaje de programacin de propsito general que es
interpretado. En la mayora de los casos el cdigo JavaScript se inserta en las
pginas Web y su cdigo es interpretado por el intrprete que est incrustado en
el navegador Web.
JavaScript junto con DOM y CSS permiten que el contenido y aparencia de las
pginas Web pueda ser modificado.
Con JavaScript podemos:
Agregarle instrucciones a las pginas HTML.

Hacer que las pginas Web respondan a los eventos disparados por el
navegador.
Leer y escribir elementos de HTML para cambiar el contenido de un
elemento HTML.
Validar datos de entrada antes de enviarlos al servidor Web.
Detectar el tipo de navegador del cliente y cargar una una pgina adecuada
al navegador.
Crear cookies para almacenar y recuperar informacin en la computadora
del cliente.
Ubicacin del Cdigo JavaScript

El cdigo JavaScript puede ser puesto en tres lugares:
En el cuerpo de un documento HTML.
En la cabecera de un documento HTML.
En un archivo externo.
ITSON
Manuel Domitsu Kono
130
Elemento <script> de HTML

Para insertar cdigo JavaScript en un documento HTML se usa el elemento
<script> de HTML cuya sintaxis es:
<script type="tipo" src="URL">codigo</script>
La tabla 4.2 muestra el significado y valor de los atributos elemento <script>:

Tabla 2.3 Atributo href del Elemento <script>
Atributo
type
src
Descripcin
Especifica el tipo MIME
del cdigo
Establece el URL del
archivo externo con el
cdigo.
Valores
"text/javascript"
URL
Descripcin
Para insertar cdigo en
JavaScript
Si el atributo src est
presente el elemento
<script> debe estar
vaco.
JavaScript en el Cuerpo de un Documento HTML

El cdigo JavaScript es interpretado conforme se va procesando el documento
HTML.
En el siguiente ejemplo, el cdigo JavaScript colocado dentro del cuerpo del
documento HTML, escribe la fecha actual en el elemento <p> cuando la pgina se
carga en el navegador.
<html>
<body>
<p id="demo"></p>
</script>
</body>
</html>
Note que el cdigo JavaScript se coloca al final de la pgina para asegurarse que
no sea ejecutado antes de que el elemento <p> sea creado.
Funciones de JavaScript y Eventos
No siempre se quiere que el cdigo JavaScript sea ejecutado cuando la pgina
carga. Algunas veces deseamos que el cdigo ejecute cuando ocurre un evento.
En estos casos podemos poner el cdigo Javascript dentro de una funcin.
ITSON
Manuel Domitsu Kono
Tema 4
131
JavaScript en el Encabezado de un Documento HTML

Las funciones de JavaScript normalmente se colocan en la cabecera de una
documento de HTML.
En el siguiente ejemplo se invoca a la funcin cuando se hace clic sobre un botn:
<html>
<head>
}
</script>
</head>
<body>
<p id="demo"></p>
Despliega Fecha
</button>
</body>
</html>
JavaScript en el Encabezado y en el Cuerpo de un Documento

HTML
Se puede colocar un ilimitado numero de elementos <script> con cdigo
JavaScript dentro del documento HTML y se puede tener los elementos tanto en
la cabecera como en el cuerpo del documento HTML al mismo tiempo.
Se acostumbra colocar todas las funciones en la cabecera o en el final del
documento HTML para que estn en un solo lugar y no interfieran con el contenido
de la pgina.
JavaScript en un Archivo Externo

El cdigo JavaScript tambin puede colocarse en archivos externos. Un archivo
JavaScript por lo general contiene cdigo que va a ser usado en varias pginas
Web.
Los archivos externos con cdigo JavaScript tienen la extensin ".js". El atributo
"src" de el elemento <script> apunta al nombre del archivo externo con el
cdigo JavaScript.
ITSON
Manuel Domitsu Kono
132
Nota: El cdigo JavaScript en un archivo externo no puede contener elementos

<script>.
El siguiente cdigo muestra el cdigo de una funcin JavaScript en el archivo
externo despliegaFecha.js:
}
El cdigo siguiente muestra la pgina HTML que invoca el archivo externo e

invoca a la funcin que contiene.
<html>
<head>
<script type="text/javascript" src="despliegaFecha.js">
</script>
</head>
<body>
<p id="demo"></p>
Despliega Fecha
</button>
</body>
</html>
Nota: Coloque el elemento <script> exactamente donde normalmente se colocara

el cdigo javaScript.
Insertar Texto en el Documento HTML con JavaScript

El siguiente ejemplo inserta un elemento <p> con la fecha actual en el documento
HTML:
<html>
<body>
document.write("<p>" + Date() + "</p>");
</script>
</body>
</html>
Nota: Evite el uso de mtodo document.write() en el cdigo JavaScript. Si lo

usamos dentro de una funcin o despus de que se ha cargado la pgina, la
pgina completa HTML ser sobreescrita.
ITSON
Manuel Domitsu Kono
Tema 4
133
Cambiar Elementos HTML con JavaScript

En el siguiente ejemplo se escribe la fecha actual en un prrafo existente:
<html>
<body>
<p id="demo"></p>
</script>
</body>
</html>
Note: Algunos navegadores no soportan JavaScript. Esos navegadores

desplegarn el cdigo JavaScript como texto. Para evitar eso, encierre el cdigo
JavaScript entre delimitadores de comentarios de HTML:
<html>
<body>
<p id="demo"></p>
<!-document.getElementById("demo").innerHTML=Date();
//-->
</script>
</body>
</html>
Note el comentario de lnea de JavaScript para impedir que JavaScript ejecute la

etiqueta -->.
Cuadros de Dilogo Emergentes de JavaScript

JavaScript tiene tres tipos de cuadros de dilogos emergentes: Cuadro de Alerta,
Cuadro de Confirmacin y Cuadro con Campo de Texto.
Cuadro de Alerta
Un Cuadro de Alerta se usa cuando se quiere asegurar que la informacin
proviene del usuario. Cuando un Cuadro de Alerta aparece, el usuario tiene que
hacer clic en el botn "OK" para continuar.
La sintaxis de un Cuadro de Alerta es:
ITSON
Manuel Domitsu Kono
134
alert("texto");
Ejemplo de un Cuadro de Alerta

<html>
<head>
function muestra_alerta() {
alert("Soy un Cuadro de Alerta!");
}
</script>
</head>
<body>
<input type="button" onclick="muestra_alerta()"
value="Muestra un Cuadro de Alerta" />
</body>
</html>
Cuadro de Confirmacin
Un Cuadro de Confirmacin se usa si queremos que el usuario verifique o acepte
algo. Cuando un Cuadro de Confirmacin aparece, el usuario tiene que hacer clic
en el botn "OK" o en el botn "Cancel" para continuar. Si el usuario hace clic en
el botn "OK", el cuadro regresa true. Si el usuario hace clic en el botn
"Cancel", el cuadro regresa el valor de false.
La sintaxis de un Cuadro de Confirmacin es:
confirm("texto");
Ejemplo de un Cuadro de Confirmacin

<html>
<head>
function muestra_confirmacion() {
var r=confirm("Presiona un boton");
if (r==true) {
alert("Presionaste OK!");
}
else {
alert("Presionaste Cancel!");
}
}
</script>
</head>
ITSON
Manuel Domitsu Kono
Tema 4
135
<body>
<input type="button" onclick=" muestra_confirmacion()"
value="Muestra un Cuadro de Confirmacion" />
</body>
</html>
Cuadro con Campo de Texto

Un Cuadro con Campo de Texto se usa si se quiere que el usuario suministre un
valor antes de entrar a una pgina. Cuando un Cuadro con Campo de Texto
aparece, el usuario tiene que hacer clic en el botn "OK" o en el botn "Cancel"
para continuar despus de suministrar un valor. Si el usuario hace clic en el botn
"OK", el cuadro regresa el valor suministrado. Si el usuario hace clic en el botn
"Cancel", el cuadro regresa el valor de null.
La sintaxis de un Cuadro Campo de Texto es:
prompt("text","valorOmision");
Ejemplo de un cuadro con Campo de Texto

<html>
<head>
function captura_nombre() {
var nombre=prompt("Dame tu nombre","Juan Perez");
if (nombre!=null && nombre!="") {
document.write("<p>Hola " + nombre
+ "! Como estas?</p>");
}
}
</script>
</head>
<body>
<input type="button" onclick="captura_nombre()"
value="Captura Nombre" />
</body>
</html>
Validacin de Formularios con JavaScript

La nica forma confiable de validar los datos capturados en un formulario es del
lado del servidor. No se debe validar slo del cliente mediante JavaScript, por las
siguientes razones:
ITSON
Manuel Domitsu Kono
136
Un dispositivo puede no tener un intrprete de JavaScript.

Un usuario puede haber desabilitado la ejecucin de cdigo JavaScript en
el navegador.
Un administrador puede haber desabilitado JavaScript en una red.
Sin embargo, adems de validar los datos de todos los formularios en el servidor,
es recomendable validarlos usando JavaScript del lado del cliente tambin. La
ventaja, si JavaScript est disponible, es que en el caso de errores en los datos la
validacin nos ahorra el viaje al servidor para detectar los errores, lo cual es til
sobretodo para los usuarios con conexiones lentas.
Hay dos formas de validacin del lado del cliente:
Validar los datos cuando se presiona el botn enviar.
Validar cada dato campo por campo, sobre todo con formularios largos y
revalidar toda la forma al presionar el botn enviar.
Ejemplo
El siguiente cdigo contiene una serie de funciones para validar que un campo no
este vaco, para valida una edad y para validar una fecha. Las funciones estn en
un archivo externo JavaScript. Las principales caractersticas de este cdigo son:
En la funcin validacionComun() se detecta si el navegador es una
versin que no soporta los mtodos de DOM de HTML empleados. En
estos casos no se realiza la validacin del lado del cliente y se delega la
validacin al servidor.
La deteccin se realiza verificando si el navegador tiene definidos algunos
mtodos como document.getElementById().
El formateo de los mensajes de aviso y error se realiza estableciendo la
clase CSS del elemento en el que se desplegar el mensaje.
valida.js
//
// Funciones de validacion de
//
var nbsp = 160;
var node_text = 3;
var cadenaVacia = /^\s*$/ ;
var campoEnfocarGlobal;
campoEnfocar
formularios de Javascript.
// caracter de espacio
// Tipo de nodo de texto de DOM
// Variable global para almacenar el
// enfocaAtrasado()
//
ITSON
Manuel Domitsu Kono
Tema 4
137
// Hace que el elemento almacenado en la variable global

// campoValidarGlobalDelayed obtenca el foco. Ajuste para
// remediar un bug de IE y otros
function enfocaAtrasado() {
campoEnfocarGlobal.focus();
}
// enfoca()
//
// Hace que el elemento del parametro obtenga el foco
//
// Parametros:
//
- campoEnfocar: Elemento a obtener el foco
function enfoca(campoEnfocar) {
// Guarda campoEnfocar en la variable global para conservar el valor
// cuando la funcion termine
campoEnfocarGlobal = campoEnfocar;
setTimeout('enfocaAtrasado()', 100);
}
// trim()
//
// Elimina los caracteres blancos al principio o final
// de la cadena del parametro
//
// Parametros
//
- str: Cadena a procesar
function trim(str) {
return str.replace(/^\s+|\s+$/g, '');
}
// despliegaMensaje()
//
// Despliega un mensaje de error o aviso
//
// Parametros
//
- idMensaje:
id del elemento en que se desplegara el mensaje
//
- claseMensaje: Clase asociada al mensaje para usarse en CSS,
// warn/error.
//
- mensaje:
Mensaje a desplegar
//
// Debe llamarse antes a la funcion validacionComun
function despliegaMensaje(idMensaje, claseMensaje, mensaje) {
var mensajeDesplegar;
// Si el mensaje a desplegar es una cadena vaca
if (cadenaVacia.test(mensaje))
// Hacer que la cadena a desplegar sea el caracter de espacio
mensajeDesplegar = String.fromCharCode(nbsp);
ITSON
Manuel Domitsu Kono
138
else
// Hacer que la cadena a desplegar sea el mensaje
mensajeDesplegar = mensaje;
// Despliega el mensaje
var elem = document.getElementById(idMensaje);
elem.firstChild.nodeValue = mensajeDesplegar;
// Establece la clase CSS para establecer las propiedades del mensaje
elem.className = claseMensaje;
}
// validacionComun()
//
// Codigo comun para todas las funciones de validacion:
// Si la version del navegador es vieja, pasa la validacion
// para que la validacion la haga el servidor
//
// Parametros:
//
- campoValidar: Elemento a validar
//
- idMensaje:
//
- requerido:
Campo requerido
//
// Regresa:
//
- true:
Pasa la validacion
//
- false:
Falla la validation
//
- prosigue: Continua con la siguiente validacion
var prosigue = 2;
function validacionComun(campoValidar, idMensaje, requerido) {
// Si el navegador es viejo
if (!document.getElementById)
// Deja la validacion al servidor
return true;
var elem = document.getElementById(idMensaje);
// Si el navegador es viejo, deja la validacion al servidor
if (!elem.firstChild) return true;
// El elemento en que se desplegara el mensaje no es el correcto
if (elem.firstChild.nodeType != node_text) return true;
// Si el campo a validar esta vacio
if(cadenaVacia.test(campoValidar.value)) {
// Si el campo esta vacio y es obligatorio
if(requerido) {
despliegaMensaje(idMensaje, "error",
"Error: Se requiere un valor");
enfoca(campoValidar);
return false;
ITSON
Manuel Domitsu Kono
Tema 4
139
}
// Si el campo esta vacio y no es obligatorio
else {
// Borra un posible mensaje de error previo
despliegaMensaje(idMensaje, "warn", "");
return true;
}
}
return prosigue;
}
// validaPresente()
//
// Valida si se ha teclaeado algo en el campo de texto
//
// Parametros:
//
//
- idMensaje:
//
// Regresa:
//
true si se teclaeado algo, falso en caso contrario
//
function validaPresente(campoValidar, idMensaje) {
var stat = validacionComun (campoValidar, idMensaje, true);
if(stat != prosigue) return stat;
despliegaMensaje (idMensaje, "warn", "");
return true;
}
// validaEdad()
//
// Valida la edad de una persona. Una edad tiene de 1 a 3 dgitos
// y edad en [0, edadMax]
//
// Parametros:
//
- edadMax:
Edad maxima
//
//
- idMensaje:
//
- requerido:
Campo requerido
//
// Regresa:
//
true si ok
function validaEdad(edadMax, campoValidar, idMensaje, requerido) {
var stat = validacionComun (campoValidar, idMensaje, requerido);
if (stat != prosigue) return stat;
var edad = trim(campoValidar.value);
ITSON
Manuel Domitsu Kono
140
var reEdad = /^[0-9]{1,3}$/

if (!reEdad.test(edad)) {
despliegaMensaje (idMensaje, "error", "Error: Edad no vlida");
return false;
}
if (edad > edadMax) {
despliegaMensaje (idMensaje, "error", "Error: Edad no vlida");
return false;
}
return true;
}
// validaEmail()
//
// Valida una direccion de correo
//
// Parametros:
//
//
- idMensaje:
//
- requerido:
Campo requerido
//
// Regresa:
//
true si ok
//
function validaEmail(campoValidar, idMensaje, requerido) {
var stat = validacionComun (campoValidar, idMensaje, requerido);
if (stat != prosigue) return stat;
var email = trim(campoValidar.value);
var reEmail = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
if (!reEmail.test(email)) {
despliegaMensaje (idMensaje, "error", "Error: E-mail no vlido");
return false;
}
return true;
}
ITSON
Manuel Domitsu Kono
Tema 4
141
El siguiente cdigo muestra una pgina HTML en la que se utilizan las funciones
JavaScript anteriores para validar cada campo conforme se van capturando
valores as como al enviar el formulario completo. De existir un error en alguno de
los campos, se despliega un mensaje de error a la derecha del campo con el error.
Las principales caractersticas de este cdigo son:
Utiliza un botn de enviar estndar y su atributo onSubmit para invocar la
funcin que valida todo el formulario.
Las validaciones de cada campo individual se hacen mediante el atributo
onChange de cada campo para invocar a la funcin que valida cada
campo.
contactame.html
<html>
<head>
<title>Contáctame</title>
<link rel="stylesheet" type="text/css" href="estilos.css" />
<script type="text/javascript" src="valida.js">
</script>
function validaEnviar() {
var elem;
var errores=0;
// Ejecuta las validaciones en orden inverso para que el elemento
// con el enfoque sea el primero con error
if(!validaEmail(document.forms.cuestionario.email,
'msjEmail', true)) errores += 1;
if(!validaEdad(150, document.forms.cuestionario.edad, 'msjEdad',
true)) errores += 1;
if(!validaPresente(document.forms.cuestionario.nombre,
'msjNombre')) errores += 1;
return (errores==0);
};
</script>
</head>
<body>
<h1 align="center">Contáctame</h1>
<form name="cuestionario" onSubmit="return validaEnviar()"
action="blanco.html">
<table align="center">
<caption>Mis Datos Personales</caption>
<tr>
<td align="right">Nombre *</td>
ITSON
Manuel Domitsu Kono
142
<td><input name="nombre" id="nombre" maxlenght="50" size="20"

onchange="validaPresente(this, 'msjNombre');" />
</td>
<td id="msjNombre"> </td>
</tr>
<tr>
<td align="right">Edad *</td>
<td><input name="edad" id="edad" maxlenght="3" size="3"
onchange="validaEdad(150, this, 'msjEdad', true);" />
</td>
<td id="msjEdad"> </td>
</tr>
<tr>
<td align="right">E-mail *</td>
<td><input name="email" id="email" maxlenght="75" size="50"
onchange="validaEmail(this, 'msjEmail', true);" />
</td>
<td id="msjEmail"> </td>
</tr>
</table>
<br />
<br />
<table align="center">
<tr>
<td><input type="submit" name="boton" value="Enviar" /></td>
<td><input type="reset" name="boton" value="Restaurar" /></td>
</tr>
</table>
</form>
</body>
</html>
Para resaltar los mensajes de aviso o de error, el cdigo JavaScript inserta estilos
para colorear el texto de los mensajes usando las siguientes reglas de estilo:
estilos.css
...
*.error {
color: red;
}
*.warn {
color: blue;
}
...
ITSON
Manuel Domitsu Kono

Tema 4 - DOM de HTML y JavaScript

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Tema 4 - DOM de HTML y JavaScript

Загружено:

Авторское право:

Доступные форматы

DOM de HTML y JavaScript

Ncleo de DOM - standard model for any structured document

Nodos de DOM de HTML

El documento entero es un nodo de documento.

Manuel Domitsu Kono

DOM de HTML y JavaScript

El texto de un nodo de elemento siempre se almacena en un nodo de texto. En el

Nodo de rbol del DOM de HTML

Figura 1. Estructura de rbol de un Documento HTML.

Nodos Padres, Hijos y Hermanos

En un rbol de nodos, el nodo superior es el nodo raz.

Manuel Domitsu Kono

DOM de HTML y JavaScript

Figura 2. Relaciones entre nodos de un rbol de Nodos

El nodo <html> no tiene un nodo padre. Es el nodo raz.

Interfaz de Programacin de DOM de HTML

Manuel Domitsu Kono

DOM de HTML y JavaScript

Propiedades de DOM de HTML

x.innerHTML El valor del texto del elemento x.

Mtodos de DOM de HTML

x.getElementById(id) Obtn el elemento con el atributo id

En el ejemplo anterior getElementById() es un mtodo y innerHTML es una

Manuel Domitsu Kono

DOM de HTML y JavaScript

Nodos Hijos y Valor de un Nodo

En el ejemplo anterior getElementById() es un mtodo, mientras childNodes

Acceso a los Nodos DOM de HTML

El siguiente ejemplo obtiene el elemento con id="intro":

Manuel Domitsu Kono

DOM de HTML y JavaScript

Lista de Nodos de DOM

Longitud de la Lista de Nodos de DOM

Manuel Domitsu Kono

DOM de HTML y JavaScript

Navegar las Relaciones de los Nodos

El primer elemento <p> es el nodo primer hijo (firstChild) del elemento

Nodos Raz de DOM

document.documentElement Regresa el nodo raz del documento.

Manuel Domitsu Kono

DOM de HTML y JavaScript

los nodos son: nodeName, nodeValue y nodeType que contienen informacin de

El nodeName es de solo lectura.

Nota: El nodeName siempre contiene el nombre del elemento en maysculas.

Manuel Domitsu Kono

DOM de HTML y JavaScript

La tabla 4.1 muestra los tipos de nodos ms importates.

Cambio de los Elementos DOM de HTML

La forma ms sencilla de obtener o modificar el contenido de un elemento es

Se puede cambiar un elemento HTML usando eventos. Un manejador de eventos

Manuel Domitsu Kono

DOM de HTML y JavaScript

El siguiente ejemplo cambia el color de fondo del elemento <body> cuando se

Se puede cambiar el valor de un elemento mediante una funcin. El siguiente

Manuel Domitsu Kono

DOM de HTML y JavaScript

Clic del ratn

Manuel Domitsu Kono

DOM de HTML y JavaScript

Eventos onload y onUnload

Eventos onFocus, onBlur y onChange

Manuel Domitsu Kono

DOM de HTML y JavaScript