» » Funciones más comunes del DOM

Funciones más comunes del DOM

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

Es importante recordar que el acceso 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 usuario 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.
FileUpload Por casa instancia de un etiqueta HTML <input type = "file"> de un formulario, un objeto FileUpload es creado. 
Form Utilizado para la entrada de datos por el usuario.
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 usuario 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.
Password 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 usuario 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.

Deja un comentario

Información
Atención! Usuarios que están en este grupo no pueden dejar comentarios en la página...Primero debes Registrarse!