Acorde al W3C el Modelo de Objetos del Documento es una interfaz de programación de aplicaciones (API) para documentos validos HTML y bien construidos XML. Define la estructura lógica de los documentos y el modo en que se accede y manipula.
El DOM permite un acceso a la estructura de una página HTML mediante el mapeo de los elementos de esta página en un árbol de nodos. Cada elemento se convierte en un nodo y cada porción de texto en un nodo de texto. Para comprender más fácilmente véase el siguiente ejemplo:
El DOM permite un acceso a la estructura de una página HTML mediante el mapeo de los elementos de esta página en un árbol de nodos. Cada elemento se convierte en un nodo y cada porción de texto en un nodo de texto. Para comprender más fácilmente véase el siguiente ejemplo:
<body>
<p>Esto es un párrafo que contiene <a href="#">un enlace</a> en el medio. </p>
<ul>
<li>Primer punto en la lista</li>
<li>Otro punto en la lista</li>
</ul>
</body>
<p>Esto es un párrafo que contiene <a href="#">un enlace</a> en el medio. </p>
<ul>
<li>Primer punto en la lista</li>
<li>Otro punto en la lista</li>
</ul>
</body>
Como puede verse un elemento [a] se encuentra localizado dentro de un elemento [p] del HTML, convirtiéndose en un nodo hijo, o simplemente hijo del nodo [p], de manera similar [p] es el nodo padre. Los dos nodos li son hijos del mismo padre, llamándose nodos hermanos o simplemente hermanos.
Es importante comprender la diferencia entre elementos y nodos de textos. Los elementos comúnmente son asociados a las etiquetas. En HTML todas las etiquetas son elementos, tales como <p>, <img> y <div> por lo que tienen atributos y contienes nodos hijos. Sin embargo, los nodos de textos no poseen atributos e hijos.
Siempre use el DOCTYPE correcto
El DOCTYPE (abreviado del inglés “document type declaration”, declaración del tipo de documento) informa cual versión de (X)HTML se usará para validar el documento; existen varios tipos a seleccionar. El DOCTYPE, debe aparecer siempre en la parte superior de cada página HTML y siendo un componente clave de las páginas web “obedientes” a los estándares.
En caso de usarse un DOCTYPE incompleto, no actualizado o simplemente no usarlo llevará al navegador a entrar en modo raro o extraño, donde el navegador asume que se ha programado fuera de los estándares.
Todavía todos los navegadores actuales no son capaces de procesar correctamente todos los tipos de documentos, sin embargo, muchos de ellos funcionan correctamente en los navegadores más utilizados actualmente, tales como:
HTML 4.01 Strict y Transitional, XHML 1.0 Strict y Transitional los se comportan del modo correcto en Internet Explorer (versión 6, 7 Beta), Mozilla y Opera 7. De ahora en adelante se adoptará para cada ejemplo
Es importante comprender la diferencia entre elementos y nodos de textos. Los elementos comúnmente son asociados a las etiquetas. En HTML todas las etiquetas son elementos, tales como <p>, <img> y <div> por lo que tienen atributos y contienes nodos hijos. Sin embargo, los nodos de textos no poseen atributos e hijos.
Siempre use el DOCTYPE correcto
El DOCTYPE (abreviado del inglés “document type declaration”, declaración del tipo de documento) informa cual versión de (X)HTML se usará para validar el documento; existen varios tipos a seleccionar. El DOCTYPE, debe aparecer siempre en la parte superior de cada página HTML y siendo un componente clave de las páginas web “obedientes” a los estándares.
En caso de usarse un DOCTYPE incompleto, no actualizado o simplemente no usarlo llevará al navegador a entrar en modo raro o extraño, donde el navegador asume que se ha programado fuera de los estándares.
Todavía todos los navegadores actuales no son capaces de procesar correctamente todos los tipos de documentos, sin embargo, muchos de ellos funcionan correctamente en los navegadores más utilizados actualmente, tales como:
HTML 4.01 Strict y Transitional, XHML 1.0 Strict y Transitional los se comportan del modo correcto en Internet Explorer (versión 6, 7 Beta), Mozilla y Opera 7. De ahora en adelante se adoptará para cada ejemplo
HTML 4.01 Strict : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Resultando una única línea de código, o dos líneas con un salto de línea después de EN”.
La importancia de validar el HTML
Si los elementos son anidados de manera inadecuada pueden generarse problemas, véase la siguiente línea:
Resultando una única línea de código, o dos líneas con un salto de línea después de EN”.
La importancia de validar el HTML
Si los elementos son anidados de manera inadecuada pueden generarse problemas, véase la siguiente línea:
<p>Estos elementos han sido <strong>incorrectamente </p>anidados </strong>
El árbol que resulta de esto se encuentra incorrectamente anidado del todo, por tanto generará errores inesperados en los navegadores. Manteniendo su HTML válido se pueden evitar tales problemas.
Accediendo a los elementos
Afortunadamente, Javascript permite acceder a cada uno de los elementos de una página utilizando tan sólo algunos métodos y propiedades.
Si desea encontrar de manera rápida y fácil un elemento se tiene a la mano el método getElementById. El mismo permite un acceso inmediato a cualquier elemento tan sólo conociendo el valor de su atributo id. Véase el siguiente ejemplo:
El árbol que resulta de esto se encuentra incorrectamente anidado del todo, por tanto generará errores inesperados en los navegadores. Manteniendo su HTML válido se pueden evitar tales problemas.
Accediendo a los elementos
Afortunadamente, Javascript permite acceder a cada uno de los elementos de una página utilizando tan sólo algunos métodos y propiedades.
Si desea encontrar de manera rápida y fácil un elemento se tiene a la mano el método getElementById. El mismo permite un acceso inmediato a cualquier elemento tan sólo conociendo el valor de su atributo id. Véase el siguiente ejemplo:
<p>
<a id="contacto" href="contactos.html">Contáctenos</a>
</p>
Puede usarse el atributo id del elemento a para acceder al mismo:
<a id="contacto" href="contactos.html">Contáctenos</a>
</p>
Puede usarse el atributo id del elemento a para acceder al mismo:
var elementoContacto = document.getElementById("contacto");
Ahora el valor de la variable elementoContacto está referida al elemento [a] y cualquier operación sobre la misma afectará el hiperenlace.
El método getElementById es adecuado para operar sobre un elemento en específico, sin embargo, en ocasiones se necesita trabajar sobre un grupo de elementos por lo que en este caso puede utilizarse el método getElementsByTagName. Este retorna todos los elementos de un mismo tipo. Asumiendo la siguiente lista desordenada:
Ahora el valor de la variable elementoContacto está referida al elemento [a] y cualquier operación sobre la misma afectará el hiperenlace.
El método getElementById es adecuado para operar sobre un elemento en específico, sin embargo, en ocasiones se necesita trabajar sobre un grupo de elementos por lo que en este caso puede utilizarse el método getElementsByTagName. Este retorna todos los elementos de un mismo tipo. Asumiendo la siguiente lista desordenada:
<ul>
<li><a href="editorial.html">Editorial</a></li>
<li><a href="semblanza.html">Autores</a></li>
<li><a href="noticias.html">Noticias</a></li>
<li><a href="contactos.html">Contátenos</a></li>
</ul>
Puede obtenerse todos los hipervínculos de la siguiente manera:
<li><a href="editorial.html">Editorial</a></li>
<li><a href="semblanza.html">Autores</a></li>
<li><a href="noticias.html">Noticias</a></li>
<li><a href="contactos.html">Contátenos</a></li>
</ul>
Puede obtenerse todos los hipervínculos de la siguiente manera:
var hipervinculos= document.getElementsByTagName("a");
El valor de la variable hipervinculos es una colección de elementos [a]. Las colecciones son arreglos pudiéndose acceder a cada elemento a través de la ya conocida notación con corchetes.
Los elementos devueltos por getElementsByTagName serán ordenado según el orden que aparezcan en el código fuente. Por tanto para el caso anterior quedaría así:
El valor de la variable hipervinculos es una colección de elementos [a]. Las colecciones son arreglos pudiéndose acceder a cada elemento a través de la ya conocida notación con corchetes.
Los elementos devueltos por getElementsByTagName serán ordenado según el orden que aparezcan en el código fuente. Por tanto para el caso anterior quedaría así:
hipervinculos[0] el elemento [a] para “Editorial”
hipervinculos[1] el elemento [a] para “Autores”
hipervinculos[2] el elemento [a] para “Noticias”
hipervinculos[3] el elemento [a] para “Contáctenos”
Otra maneras de acceder a un elemento usando su id es document.all["id"] la cual fue introducida en Internet Explorer 4 y document.layers["id"] introducida por Netscape 5 por que el W3C todavía no había estandarizado la manera de acceder a los elementos mediante su id. Sin embargo, no se recomienda su uso porque al estar fuera de los estándares actuales hay navegadores que no soportan estos métodos.
Por otro lado existen varios elementos en un documento HTML que pueden ser accedidos de otras maneras. El elemento body de un documento puede accederse a través de la forma document.body, mientras que el conjunto de todos los formularios en un documento puede encontrase en document.forms, así mismo el conjunto de todas las imágenes sería mediante document.images.
Actualmente la mayoría de los navegadores soportan esto métodos aún así es recomendable el uso del método getElementsByTagName, véase el siguiente ejemplo para acceder al elemento body:
var body = document.getElementsByTagName("body")[0];
Creando elementos y textos
La creación de nodos es posible mediante el uso de dos métodos disponibles en el objeto document. Dichos métodos son:
createElement(Tipo cadena): Crea un nuevo elemento del tipo especificado y devuelve un referencia a dicho elemento.
createTextNode(Cadena de texto): Crea un nuevo nodo de texto con el contenido especificado en la cadena de texto.
El siguiente ejemplo muestra cómo se crea un nuevo elemento de párrafo vacío:
var nuevoEnlace = document.createElement("a");
La variable nuevoEnlace ahora referencia un nuevo enlace listo para ser insertado en el documento. El texto que va dentro del elemento [a] es un nodo de texto hijo, por lo que debe ser creado por separado.
La variable nuevoEnlace ahora referencia un nuevo enlace listo para ser insertado en el documento. El texto que va dentro del elemento [a] es un nodo de texto hijo, por lo que debe ser creado por separado.
var nodoTexto = document.createTextNode("Semblanza");
Luego si desea modificar el nodo de texto ya existente, puede utilizarse la propiedad nodeValue, esta permite coger y poner el nodo de texto:
Luego si desea modificar el nodo de texto ya existente, puede utilizarse la propiedad nodeValue, esta permite coger y poner el nodo de texto:
var textoViejo = nodoTexto.nodeValue;
nodoTexto.nodeValue = "Novedades";
El valor de la variable textoViejo es ahora "Semblanza" y el nuevo texto "Novedades". Se puede insertar un elemento o texto (nodo) como último hijo de un nodo ya existente usando el método appendChild. Este método coloca el nuevo nodo después de todos los hijos del nodo. NuevoEnlace.appendChild(nodoTexto);
Ahora todo lo que se necesita es insertar el enlace en el cuerpo del documento. Para hacer esto, se necesita una referencia al elemento body del documento, teniendo como guía los estándares siguientes:
nodoTexto.nodeValue = "Novedades";
El valor de la variable textoViejo es ahora "Semblanza" y el nuevo texto "Novedades". Se puede insertar un elemento o texto (nodo) como último hijo de un nodo ya existente usando el método appendChild. Este método coloca el nuevo nodo después de todos los hijos del nodo. NuevoEnlace.appendChild(nodoTexto);
Ahora todo lo que se necesita es insertar el enlace en el cuerpo del documento. Para hacer esto, se necesita una referencia al elemento body del documento, teniendo como guía los estándares siguientes:
var cuerpoRef = document.getElementsByTagName("body")[0];
cuerpoRef.appendChild(nuevoEnlace);
Otra manera sería utilizando el método getElementById. Para ello se asume que la etiqueta
cuerpoRef.appendChild(nuevoEnlace);
Otra manera sería utilizando el método getElementById. Para ello se asume que la etiqueta
<body> tiene asignado un valor para el atributo id. <body id=”cuerpo”>
var cuerpoRef = document.getElementById("cuerpo");
cuerpoRef.appendChild(nuevoEnlace);
Existen básicamente tres maneras mediante las cuales un nuevo elemento o nodo de texto puede ser insertado en una página Web. Todo ello depende del punto en el cual se desee insertar el nuevo nodo: como último hijo de un elemento, antes de otro nodo o reemplazo para un nodo.
var cuerpoRef = document.getElementById("cuerpo");
cuerpoRef.appendChild(nuevoEnlace);
Existen básicamente tres maneras mediante las cuales un nuevo elemento o nodo de texto puede ser insertado en una página Web. Todo ello depende del punto en el cual se desee insertar el nuevo nodo: como último hijo de un elemento, antes de otro nodo o reemplazo para un nodo.
En JavaScript, muchas funciones para cada uno de los objetos, incluyendo el navegador y la ventana que lo contiene, han sido definidas previamente;
adicionalmente, el usuario puede definir funciones de acuerdo a sus necesidades, por ejemplo el código:
function comeLaLetraA(Texto){
var TextoNuevo = “”; while(letras en el Texto recibido){
//lee la siguiente letra //si esta letra no es «a» añádela al nuevo texto }
return TextoNuevo; }Añade una nueva función al documento utilizado para crear una página web
| Shady Grove | Aeolian |
| Over the River, Charlie | Dorian |
El Modelo de Objetos de Documento (DOM – Document Object Model -) describe cómo todos los elementos en una página HTML, tales como campos de entrada, imágenes, etc, se relacionan con la estructura más alta: el propio documento. Llamando al elemento por su nombre correcto DOM, podemos influir en él mediante un lenguaje de programación, e,g. Javascript, Java, etc.
JavaScript por si solo tiene muchas limitaciones pero se han desarrollado muchas y excelentes librerias que le han dado realmente contenido dinámico al desarrollo web. jQuery es uno de los complementos más esenciales para el desarrollo web, usado en millones de sitios en toda la web, ya que nos facilita mucho el desarrollo de aplicaciones enriquecidas del lado del cliente, en Javascript, compatibles con todos los navegadores.
jQuery no es un lenguaje, sino una serie de funciones y métodos de Javascript. Por tanto, Javascript es el lenguaje y jQuery es una librería que podemos usar opcionalmente si queremos facilitar nuestra vida cuando programamos en Javascript. A veces nos podemos referir a jQuery como framework o incluso como un API de funciones, útiles en la mayoría de proyectos web.
 | La gran difusión de Ajax y Javascript es notable en muchos proyectos en Internet. Sin embargo hay que considerar que algunos navegadores tienen deshabilitado Javascript por defecto. Lo cual hace necesario que se habilite en cada máquina cliente.Para que estos códigos funcionen en Mozilla Firefox es necesario
|
write
Permite escribir texto html desde Javascript. El texto se escribe directamente el body del html.
Es la forma más fácil de escribir HTML desde Javascript, lo cual no quiere decir que es la mejor manera de escribir código HTML desde Javascript o incluso que va a trabajar en todas las situaciones. De hecho, el método document.write es muy limitado en lo que puedes hacer con él.
El lector debe considerar que document.write sólo funciona con las página que el navegador procesa como HTML.
Ejemplo: Imprimir un mensaje y abrir una nueva ventana mediante DOM
- Las cadenas en Javascript son objetos y por lo tanto tienen métodos y atributos. En las líneas 4 y 5 se presenta ejemplos de ellos que facilmente pueden deducir su finalidad.
- La línea 6 imprime la cadena en el body.
- La línea 8 abre una página nueva, la función open tiene como parámetros la página que abrira, y el lugar donde lo hará en este caso _selfsustituye la página actual
<body> <script> var mensaje = '¡Hola mis estimados y finos alumnos!. Buen dia'; mensaje = mensaje.toUpperCase). bold(). italics); mensaje = mensaje.fontsize(6).fontcolor('red'); document.write(mensaje); if(confirm('¿Abrir HomePage del curso?') ) window.open('http://www.prograweb.com.mx/pwebCompetencias','_self'); </script> </body>- Ejemplo: form Modifica el valor del elemento indicado que esta contenido en una forma.
getElementByIdPermite obtener la referencia a un elemento de la página mediante el id de dicho elemento.Una vez obtenida la referencia al elemento, podemos acceder a todas sus propiedades<head> <title>getElementById</title> <script> function cambiarColor( color ) { var elemento = document.getElementById('parrafo'); elemento.style.font = 'bold italic 16 pt Verdana'; elemento.style.color = color; } </script> </head> <body> <p id='parrafo'>Mis colores favoritos. ¿Adivina por qué?</p> <button onclick = 'cambiarColor('blue');'>Azul</button> <button onclick = 'cambiarColor('red');'>Rojo</button> </body>
No hay comentarios:
Publicar un comentario