JavaScript: 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 determinadas 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 valores de propiedad 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.

Ex - document.alinkColor

2

anchors[ ]

Una matriz de objetos Anchor, uno para cada ancla que aparece en el documento.

Ex - document.anchors [0], document.anchors [1] y así sucesivamente

3

applets[ ]

Una matriz de objetos Applet, uno para cada applet que aparece en el documento.

Ex - document.applets [0], document.applets [1] y así sucesivamente

4

bgColor

En desuso: una cadena que especifica el color de fondo del documento.

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

Ex - document.cookie

6

domain

Una cadena que especifica el dominio de Internet del que proviene el documento. Se utiliza con fines de seguridad.

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

Ex - document.embeds [0], document.embeds [1] y así sucesivamente

8

fgColor

En desuso: una cadena que especifica el color de texto predeterminado para el documento.

Ex - document.fgColor

9

forms[ ]

Una matriz de objetos de formulario, uno para cada formulario HTML que aparece en el documento.

Ex - document.forms [0], document.forms [1] y así sucesivamente

10

images[ ]

Una matriz de objetos de imagen, uno para cada imagen incrustada en el documento con la etiqueta HTML <img>

Ex - document.images [0], document.images [1] y así sucesivamente

11

lastModified

Una cadena de solo lectura que especifica la fecha del cambio más reciente en el documento.

Ex - document.lastModified

12

linkColor

En desuso: una cadena que especifica el color de los enlaces no visitados.

Ex - document.linkColor

13

links[ ]

Es una matriz de enlaces de documentos.

Ex - document.links [0], document.links [1] y así sucesivamente

14

location

La URL del documento. En desuso en favor de la propiedad URL.

Ex - document.location

15

plugins[ ]

Un sinónimo de incrustaciones []

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

Ex - document.referrer

17

Title

El contenido de texto de la etiqueta <title>.

Ex - document.title

18

URL

Una cadena de solo lectura que especifica la URL del documento.

Ex - document.URL

19

vlinkColor

En desuso: una cadena que especifica el color de los enlaces visitados.

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

Ex - document.clear ()

2

close( )

Cierra un flujo de documentos abierto con el método open () y no devuelve nada.

Ex - document.close ()

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.

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

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

Ex - document.writeln (valor, ...)

Ejemplo

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

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

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

NOTE - Este ejemplo devuelve objetos para formularios y elementos y tendríamos que acceder a sus valores utilizando esas propiedades de objeto que no se tratan en este tutorial.