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>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 5o6a56
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 = valorframe_1.color = redA 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) 3l2g4t
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>
