Ediciones ENI Editorial | líder en informática
Modelo DOM
Introducción
1. Definición del DOM
DOM (modelo de objetos del documento o Document Object Model) es el modelo de acceso a los diferentes componentes de los documentos HTML e incluso XML.
En el capítulo Exploración de flujo XML vía DOM, veremos en detalle cómo explotar el flujo XML en los scripts JavaScript.
Gracias al DOM, dispone de una descripción estructurada del script HTML. Este proporciona además el modo de acceso a los elementos constitutivos del modelo.
Como desarrollador, este será un gran aliado para acceder a estos elementos y manipularlos con un lenguaje de programación (JavaScript, por ejemplo, pero no en exclusiva).
DOM va a ser para nosotros un esquema de acceso a las partes que forman una página web (formulario, campo...) con etiquetas de marcado.
Este modelo proporciona una jerarquía de programación que organiza las propiedades, métodos y eventos.
El estudio y la correcta comprensión del modelo DOM son indispensables para poder utilizar lo mejor posible las principales librerías JavaScript, como Prototype, jQuery, MooTools...
El modelo DOM es un árbol formado por objetos Node (nodos). Se trata de una estructura arborescente con un nodo de tipo raíz y nodos hijo. En el siguiente ejemplo (script HTML), el nodo head es un hijo del nodo <html>. El nodo <head> es padre del nodo <title>. Las etiquetas <input> integradas...
Aprendizaje del modelo DOM
En una serie de ejemplos, vamos a ver cómo es posible con JavaScript escribir texto (y elementos DOM más complejos) en un documento HTML.
1. Script "Hello World"
En este primer script, vamos a ver cómo mostrar una cadena de caracteres "Hello World", en el cuerpo del documento HTML, añadiendo también etiquetas de formato (negrita).
El siguiente script no está escrito en su integridad; solo se muestra la secuencia JavaScript en cuestión, integrada en la sección HTML <body> del script:
<!-- Inicio script JavaScript -->
<script tipo="text/JavaScript">
/* Visualización del nombre del script */
alert("DOM_01");
/* Visualización Hello World! con el método document.write */
document.write("Hello World!<br />");
/* Visualización Hello World! con el método document.write */
/* palabra World en negrita */
document.write("Hello <b>World!</b>");
</script> Cuando se ejecuta el script, se obtiene la visualización, con el método alert, de un cuadro de diálogo con el título del ejercicio (DOM_01):
En este ejemplo, se ve cómo integrar en la secuencia que se va a mostrar etiquetas de formato como <b> ... </b> (negrita). En realidad, todas las etiquetas y todos los atributos de etiquetas HTML se pueden integrar en el método document.write. En general, se puede construir todo el documento HTML programándolo con JavaScript.
2. Diferencia entre write y writeln
En este pequeño ejemplo, vamos a ver la diferencia entre los métodos write y writeln.
<!-- Inicio script JavaScript -->
<script tipo="text/JavaScript">
/* Visualización del nombre del script */
alert("DOM_02");
/* Diferencia entre document.write y document.writeln */
/* NB1: Con el método writeln el retorno de carro
de fin de línea está implícito */
/* NB2: El método writeln necesita...