Funciones más comunes del DOM

DOM proporciona dos métodos alternativos para acceder a un nodo específico: a través de sus nodos padre y directo.

Es importante recordar que el a los nodos, su modificación y su eliminación solamente es posible cuando el árbol DOM ha sido construido completamente, es decir, después de que la página XHTML se cargue por completo. Más adelante se verá cómo asegurar que un código jаvascript solamente se ejecute cuando el navegador ha cargado entera la página XHTML.

En jаvascript cada objeto tiene un nombre único y exclusivo. Cuando existe más de un objeto en un documento web, estos se organizan en un vector y se le asigna una identificación a cada uno, la cual se utiliza para hacer referencia a estos. Por ejemplo:

<frame id = "frame_1"> ... </frame>

Así, si existen varios elementos del tipo frame, se puede hacer referencia a cada uno de estos de la siguiente forma:

Buscando por posición en el documento: document.frame[0]

Buscando por identificador: document.frame["frame_1"]

También se puede usar la función getElementById, así: document.getElementById("frame_1")

Manejo de propiedades y funciones en los objetos DOM

En jаvascript los objetos tienen propiedades, algunos ejemplos de estas propiedades pueden ser el color, el ancho, el alto, entre otros.

Las propiedades se pueden determinar de la siguiente manera:

objeto.propiedad = valor

Así, por ejemplo para asignar un color al objeto "frame_1", hacemos referencial al color de tal objeto, dándole un valor así: 

frame_1.color = red

Una de las características principales de los objetos es la función para la cual han sido creados, aunque en muchas ocasiones se define más de una función para el mismo objeto. En jаvascript algunos objetos, tales como window y navigator poseen funciones definidas previamente, pero el también puede definir más funciones en estos objetos.

A continuación se muestran algunos objetos de HTML DOM con su respectiva descripción.

Nota: Los objetos que se muestran son links que llevan a una página donde están las propiedades y métodos de cada uno.

Objeto	Descripción
Anchor	Representa un elemento HTML (hipervínculo).
Applet	Representa un elemento applet HTML. El elemento applet es usado para ubicar el contenido ejecutable en una página.
Area	Representa un área de una image-map. Una image-map es una imagen con regiones donde podemos dar clic.
Base	Representa un elemento base HTML.
Basefont	Representa un elemento basefont HTML.
Body	Representa el cuerpo de un documento.
Button	Usado cuando se presiona un botón en un formulario HTML. Por cada instancia de una etiqueta HTML <input type = "button"> en un formulario, un objeto Button es creado.
Checkbox	Representa un checkbox en un formulario HTML. Por cada instancia de una etiqueta HTML <input type = "checkbox"> en un formulario, un objeto Checkbox es creado.
Document	Usado para acceder a todos los elementos en una página.
Event	Representa el estado de un evento, tal como el elemento en el cual el evento ocurre, el estado de las teclas del teclado, la ubicación del mouse y el estado de los botones de este.
File	Por casa instancia de un etiqueta HTML <input type = "file"> de un formulario, un objeto File es creado.
Form	Utilizado para la entrada de datos por el .
Frame	Representa un frame (marco) o una subzona en HTML.
Frameset	Permite dividir una zona en subzonas, sea horizontal o verticalmente.
Hidden	Representa un campo oculto.
History	Consiste en un arreglo de URL's, las cuales han sido visitadas por el que usa la ventana del navegador.
Iframe	Permite insertar un marco dentro de un bloque de texto.
Image	Representa una imagen en HTML.
Link	Representa un elemento link en HTML. Define una relación entre dos documentos ligados.
Location	Contiene la información sobre la URL actual.
Meta	Proporciona la meta-información de un documento HTML, tal como descripciones y palabras claves para los motores de busqueda.
Navigator	Contiene la información del navegador del cliente.
Option	Representa una opción en una lista de selección en un formulario de HTML.
	Representa un campo de contraseña en un formulario.
Radio	Representa un radiobutton (botones de radio) de HTML.
Reset	Representa un botón de ajuste o de borrado en los campos de un formulario.
Screen	Este objeto se crea automáticamente. Contiene la información sobre la pantalla de visualización del cliente.
Select	Representa una lista de selección en un formulario.
Style	Representa una declaración individual del estilo.
Submit	Representa un botón para enviar los datos de un formulario.
Table	Representa una tabla en HTML.
TableData	Representa los elementos o datos de una tabla.
TableHeader	Representa los encabezados de una tabla
TableRow	Representa el inicio y el final de una linea en una tabla.
Text	Representa un campo de texto en un formulario.
Textarea	Representa un área de texto.
Window	Representa la ventana del navegador.

Manejo de Eventos (event handler)

Un evento ocurre cuando alguna situación produce un cambio, por ejemplo, cuando se da clic sobre algún elemento de la página y este debe producir alguna acción, o cuando se pasa el cursor por encima de un cuadro y este debe cambiar de color. Es decir, un evento ocurre cuando el interactúa con la página web.

La mayoría de los eventos se refiere a la interfaz del navegador, estos son agregados generalmente a un elemento específico de la página. Otros eventos se refieren a las acciones del navegador, por ejemplo, cuando un documento o una imagen han cargado completamente en la página.

Para capturar un evento sobre un objeto, se asigna una función específica para manejar el evento cuando este suceda.

Muchas etiquetas HTML tienen eventos propios. Se puede definir el código de un script que debe ser ejecutado cuando uno de esos eventos ocurren usando el nombre del evento como un atributo. A continuación se muestra un ejemplo en el cual se manejan dos eventos (onmouseover y onmouseout) del elemento. La palabra reservada this se refiere al objeto que dispara el evento, en este caso es el elemento span. 

<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title> Ejemplo de eventos </title> 
  <!-- Cambia el color de texto y el fondo del elemento. -->

<span style="background-color:yellow;"
onmouseover="this.style.backgroundColor='black';this.style.color='white'"
onmouseout="this.style.backgroundColor='yellow';this.style.color=''">
Ejemplo con manejadores de eventos</span>


</head>
<body>
</body>
</html>
       

Ver Ejemplo.