ES6 - DOM HTML

Cada página web reside dentro de una ventana del navegador, que puede considerarse como un objeto.

UNA document objectrepresenta el documento HTML que se muestra en esa ventana. El objeto de documento tiene varias propiedades que hacen referencia a otros objetos que permiten el acceso y la modificación del contenido del documento.

La forma en que se accede al contenido de un documento y se modifica se denomina Document Object Modelo DOM. Los objetos están organizados en una jerarquía. Esta estructura jerárquica se aplica a la organización de objetos en un documento web.

A continuación se muestra una jerarquía simple de algunos objetos importantes:

Existen varios DOM. Las siguientes secciones explican cada uno de estos DOM en detalle y describen cómo puede usarlos para acceder y modificar el contenido del documento.

The Legacy DOM- Este es el modelo que se introdujo en las primeras versiones del lenguaje JavaScript. Todos los navegadores lo admiten bien, pero solo permite el acceso a determinadas partes clave de los documentos, como formularios, elementos de formulario e imágenes.
The W3C DOM- Este modelo de objeto de documento permite el acceso y la modificación de todo el contenido del documento y está estandarizado por el World Wide Web Consortium (W3C). Este modelo es compatible con casi todos los navegadores modernos.
The IE4 DOM- Este modelo de objeto de documento se introdujo en la versión 4 del navegador Internet Explorer de Microsoft. IE 5 y las versiones posteriores incluyen soporte para la mayoría de las características básicas de DOM de W3C.

El DOM heredado

Este es el modelo que se introdujo en las primeras versiones del lenguaje JavaScript. Es compatible con todos los navegadores, pero permite el acceso solo a ciertas partes clave de los documentos, como formularios, elementos de formulario e imágenes.

Este modelo proporciona varias propiedades de solo lectura, como título, URL y lastModified, proporciona información sobre el documento en su conjunto. Aparte de eso, hay varios métodos proporcionados por este modelo que se pueden usar para establecer y obtener los valores de las propiedades del documento.

Propiedades del documento en DOM heredado

A continuación se muestra una lista de las propiedades del documento a las que se puede acceder mediante DOM heredado.

No Señor	Descripción de propiedad
1	alinkColor En desuso: una cadena que especifica el color de los enlaces activados. Example : document.alinkColor
2	anchors[ ] Una matriz de objetos de anclaje, uno para cada ancla que aparece en el documento. Example : document.anchors [0], document.anchors [1] y así sucesivamente
3	applets[ ] Una matriz de objetos de subprograma, uno para cada subprograma que aparece en el documento. Example : document.applets [0], document.applets [1] y así sucesivamente
4	bgColor En desuso: una cadena que especifica el color de fondo del documento. Example : document.bgColor
5	Cookie Una propiedad con valor de cadena con un comportamiento especial que permite consultar y configurar las cookies asociadas con este documento. Example : document.cookie
6	Domain Una cadena que especifica el dominio de Internet del que proviene el documento. Se utiliza con fines de seguridad. Example : documento.dominio
7	embeds[ ] Matriz de objetos que representan datos incrustados en el documento con la etiqueta <embed>. Un sinónimo de complementos []. Algunos complementos y controles ActiveX se pueden controlar con código JavaScript. Example : document.embeds [0], document.embeds [1] y así sucesivamente
8	fgColor Una cadena que especifica el color de texto predeterminado para el documento. Example : document.fgColor
9	forms[ ] Una matriz de objetos de formulario, uno para cada formulario HTML que aparece en el documento. Example : document.forms [0], document.forms [1] y así sucesivamente
10	images[ ] Una matriz de objetos de formulario, uno para cada formulario HTML que aparece en el documento con la etiqueta HTML <img>. Example : document.forms [0], document.forms [1] y así sucesivamente
11	lastModified Una cadena de solo lectura que especifica la fecha del cambio más reciente en el documento. Example : document.lastModified
12	linkColor En desuso: una cadena que especifica el color de los enlaces no visitados. Example : document.linkColor
13	links[ ] Es una matriz de enlaces de documentos. Example : document.links [0], document.links [1] y así sucesivamente
14	Location La URL del documento. En desuso en favor de la propiedad URL. Example : document.location
15	plugins[ ] Un sinónimo de incrustaciones [] Example : document.plugins [0], document.plugins [1] y así sucesivamente
dieciséis	Referrer Una cadena de solo lectura que contiene la URL del documento, si lo hubiera, desde el que se vinculó el documento actual. Example : document.referrer
17	Title El contenido de texto de la etiqueta <title>. Example : titulo del documento
18	URL Una cadena de solo lectura que especifica la URL del documento. Example : document.URL
19	vlinkColor En desuso: una cadena que especifica el color de los enlaces visitados. Example : document.vlinkColor

Métodos de documento en DOM heredado

A continuación se muestra una lista de métodos admitidos por DOM heredado.

No Señor	Descripción de propiedad
1	clear( ) En desuso: borra el contenido del documento y no devuelve nada. Example : document.clear ()
2	close( ) Cierra un flujo de documentos abierto con el método open () y no devuelve nada.
3	open( ) Elimina el contenido del documento existente y abre una secuencia en la que se puede escribir el contenido del nuevo documento. No devuelve nada. Example : document.open ()
4	write( value, ...) Inserta la cadena o cadenas especificadas en el documento que se está analizando actualmente o las agrega al documento abierto con open (). No devuelve nada. Example : document.write (valor, ...)
5	writeln( value, ...) Idéntico a write (), excepto que agrega un carácter de nueva línea a la salida. No devuelve nada. Example : document.writeln (valor, ...)

Podemos ubicar cualquier elemento HTML dentro de cualquier documento HTML usando HTML DOM. Por ejemplo, si un documento web contiene un elemento de formulario, entonces, usando JavaScript, podemos referirnos a él como document.forms [0]. Si su documento Web incluye dos elementos de formulario, el primer formulario se denomina document.forms [0] y el segundo como document.forms [1].

Usando la jerarquía y las propiedades dadas arriba, podemos acceder al primer elemento del formulario usando document.forms [0] .elements [0] y así sucesivamente.

Ejemplo

A continuación, se muestra un ejemplo para acceder a las propiedades del documento mediante el método DOM heredado.

<html> 
   <head> 
      <title> Document Title </title> 
      
      <script type = "text/javascript"> 
         <!--  
            function myFunc() {  
               var ret = document.title;  
               alert("Document Title : " + ret );  
               var ret = document.URL;  
               alert("Document URL : " + ret );  
               var ret = document.forms[0];  
               alert("Document First Form : " + ret );  
               var ret = document.forms[0].elements[1];  
               alert("Second element : " + ret );  
            } //
         --> 
      </script> 
   </head> 
   
   <body> 
      <h1 id = "title">This is main title</h1> 
      <p>Click the following to see the result:</p> 
      
      <form name = "FirstForm">
         <input type = "button" value = "Click Me" onclick = "myFunc();" /> 
         <input type = "button" value = "Cancel"> 
      </form> 

      <form name = "SecondForm"> 
         <input type = "button" value = "Don't ClickMe"/> 
      </form> 
   </body> 
   
</html>

Salida

La siguiente salida se muestra en la ejecución exitosa del código anterior.

Note- Este ejemplo devuelve los objetos para formularios y elementos. Tendríamos que acceder a sus valores utilizando las propiedades del objeto que no se tratan en este tutorial.

↰ Previous page Next page ↱