Tutorial de JavaScript

DOM y El Objeto Document()

Hasta el momento durante el presente curso de JavaScript hemos visto entre otras cosas, algunas de las bases de dicho lenguaje de programación, así como algunos de sus Objetos más importantes.

Otra cosa que debes saber es que los elementos de una página web se encuentran agrupados en una estructura jerárquica denominada DOM (Document Object Model), en la que cada elemento u Objeto contiene a su vez a otros. Cada Objeto uno de ellos se denomina nodo.

El Objeto Document(), que a su vez se halla dentro de Window(), contiene el resto de Objetos (nodos) que hacen referencia a cada uno de los elementos HTML en la página web.

Algo más adelante veremos cómo acceder a elementos HTML desde JavaScript usando el Objeto Document().

Propiedades de los Objetos del DOM en JavaScript

Cada Objeto que hace referencia a un elemento HTML dentro de la página web posee unas propiedades y eventos que podemos definir desde JavaScript.

A continuación te mostramos algunas de las propiedades genéricas más importantes de los elementos HTML:

• className: devolver el nombre de una clase CSS definida, o aplicarla a elemento.
• disabled: activar o desactivar el elemento (true/false).
• innerHTML: obtiene o define el código HTML de un elemento.
• height: alto del elemento
• id: identificador del elemento (el definido en la etiqueta HTML <id>)
• length: longitud, número de caracteres...
• tagName: devuelve el nombre de la etiqueta HTML (por ejemplo '<P>' o '<SPAN>').
• style: permite acceder al Objeto Style(), con el que es posible modificar el estilo de un elemento.
• title: título (el definido en el atributo HTML <title>)
• width: ancho

Aparte de las propiedades mencionadas, cada elemento HTML dispone de otras propiedades específicas.

Otras propiedades genéricas, usadas para acceder a otros elementos del DOM son:

• firstChild: primer elemento encontrado dentro del actual.
• lastchild: último elemento encontrado dentro del actual.
• nodeName: nombre del elemento.
• nodeType: tipo del elemento.
• nodeValue: valor del elemento.
• ownerDocument: acceder al objeto Document() principal.
• parentNode: Objeto del DOM dentro del que se encuentra el elemento actual.

Un poco más adelante veremos cómo implementarlos.

Vea también: [ Eventos en JavaScript ]

Relacionado: [ Propiedades del DOM en JavaScript ] - [ Propiedades del Objeto Style() ]

Obtener información sobre el Documento

Algunas de las propiedades del Objeto Document() que nos permiten obtener información sobre el documento:

• domain: devuelve el nombre del dominio en el que se encuentra alojada la página web.

• referrer: devuelve la URL que cargó la página web actual.

  Por ejemplo, si tenemos dos páginas web 'index1.html' e 'index2.html' y la segunda ha sido cargada tras hacerse clic en un enlace de la primera, referrer devolvería ésta.

• URL: devuelve la URL completa en que se encuentra la página web.

document.write( "domain: "   + document.domain   + "<br />" );
document.write( "referrer: " + document.referrer + "<br />" );
document.write( "URL: "      + document.URL      + "<br />" );

También dispone de las siguientes Colecciones, con las que podemos obtener un array de objetos de determinado tipo:

• anchors[]: devuelve un array de objetos Anchor(), que hacen referencia a los textos de los enlaces encontrados.
• forms[]: array de objetos Form(), que hacen referencia a los formularios encontrados en la página web.
• images[]: array de objetos Image(), que hacen referencia a las imágenes encontradas.
• links[]: array de objetos Link(), que hacen referencia a los archivos enlazados a la página web usando la etiqueta HTML <link>.

Como ejemplo, mostramos dos formas de obtener el número de enlaces que hay en la página web:

var aEnlaces = document.anchors;

document.write( "Hay [" + aEnlaces.length + "] enlace(s) en la página.<br />" );
document.write( "Hay [" + document.anchors.length + "] formularios(s) en la página." );

Dimensiones del Documento

Con las propiedades clientHeight y clientWidth obtendremos el alto y ancho visibles del documento (sin incluirse bordes, márgenes ni barras de desplazamiento).

En el siguiente ejemplo usamos el evento onresize() en el Objeto Window(), para mostrar las dimensiones visibles del Documento cada vez que se carga el contenido y se redimensiona la ventana:

<html>

    <head>
        <title>Curso de JavaScript</title>
        <script language="JavaScript">

            window.onload = function()
            {
                document.body.innerHTML = "clientHeight: " + document.body.clientHeight + "<br />";
                document.body.innerHTML += "clientWidth: " + document.body.clientWidth;
            }

            window.onresize = function()
            {
                document.body.innerHTML = "clientHeight: " + document.body.clientHeight + "<br />";
                document.body.innerHTML += "clientWidth: " + document.body.clientWidth;
            }

        </script>
    </head>

    <body>
        Curso de JavaScript
    </body>

</html>

Vea también: [ Eventos en JavaScript ] - [ Scroll en una página web ] - [ Posición de la ventana ] - [ Dimensiones de un elemento ]

Escribir con JavaScript en un documento HTML

Como hemos anteriormente, con el método write() podremos escribir directamente en la página web, pudiendo intercalar texto, código HTML y código CSS:

document.write( "Esto es una línea.<br />");
document.write( "<p style='color:red;font-weight:bold;'>Esto es un párrafo.</p>" );

Existe también un método writeln() que agrega un salto de línea, pero para que funcione hay que ponerlo en una etiqueta HTML <pre>

También podemos usar la propiedad innerHTML (se borrará el contenido actual del documento) del siguiente modo:

document.body.innerHTML = "<p style='color:red;font-weight:bold;'>Esto es un párrafo.</p>";

En la siguiente sección explicaremos más detalladamente el uso de innerHTML.