Biblioteca Online : ¡La Suscripción ENI por 9,90 € el primer mes!, con el código PRIMER9. Pulse aquí
¡Acceso ilimitado 24/7 a todos nuestros libros y vídeos! Descubra la Biblioteca Online ENI. Pulse aquí
  1. Libros
  2. Aprender a desarrollar con JavaScript
  3. Modelo DOM
Extrait - Aprender a desarrollar con JavaScript Aspectos principales del uso de frameworks (4ª edición)
Extractos del libro
Aprender a desarrollar con JavaScript Aspectos principales del uso de frameworks (4ª edición)
1 opinión
Volver a la página de compra del libro

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):

images/11_1.png

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...