El modelo DOM que vimos en el apartado anterior establece una relación jerárquica entre los elementos (objetos) que forman parte de un documento HTML y la relación de éstos con el navegador.
Cada uno de estos elementos tienen una serie de propiedades que se podrán modificar en función de las acciones del usuario pero para hacerlo es necesario que cada elemento esté identificado de forma unívoca.
Cuando un elemento está identificado mediante un nombre único en todo el documento, el lenguaje utilizado para implementar la interactividad puede localizar el elemento fácilmente y acceder a sus propiedades, o atributos, y cambiarlas. Esto se debe a que, en el modelo DOM, los atributos de una etiqueta HTML son traducidos por el navegador en propiedades de un objeto.
En el siguiente enlace puedes ver todos los objetos (elementos) que forman parte de un documento con sus propiedades y con los métodos o acciones que se pueden realizar sobre el mismo.
Desde el siguiente enlace puedes acceder a las especificaciones del W3C de los tres niveles del modelo DOM.
Pero en un documento HTML puede haber un número muy elevado de elementos div o de elementos input, o cualquier otro elemento repetido cada uno con su identificador exclusivo. En ese caso ¿cómo identifica este modelo a cada uno de esos elementos? La respuesta es muy simple, utiliza un vector. En en la siguiente presentación puedes ver un ejemplo comentado de las formas que tenemos de acceder a un elemento del modelo de objetos de documento.
HTML
<!-- Este es un comentario de HTML para indicar que aquí iría la cabecera y parte del cuerpo -->
<div id="cabecera">
<!-- Este comentario indica que aquí iría todo el texto HTML correspondiente a la cabecera del cuerpo de la página -->
</div>
<div id="contenido">
<!-- Este comentario indica que aquí iría todo el texto HTML correspondiente a el contenido del cuerpo de la página -->
</div>
<!-- Este es otro comentario de HTML para indicar que aquí iría el resto del cuerpo -->Forma 1
document.getElementById("contenido")
Esta forma utiliza el método getElementById al que se le pasa como argumento el valor “contenido” del atributo id del elemento al que queremos hacer referencia.
Forma 2
document.getElementsByTagName(“div”)[1]
Esta forma utiliza el método getElementsByTagName al que se le pasa como argumento el nombre de la etiqueta div a la que queremos hacer referencia.
Este método crea siempre un vector de elementos div.
Como los vectores comienzan a numerar sus elementos en 0 el número 1 que está entre corchetes hacer referencia al segundo div del documento.
El índice [1] hace referencia a la posición relativa que ocupa el elemento div en el documento.
Forma 3
document.getElementsByTagName(“div”)[“contenido”]
Esta forma utiliza el método getElementsByTagName para crear un vector asociativo de elementos div donde, en lugar de emplear la posición relativa del elemento div en el documento para hacer referencia a un elemento del vector, emplea el nombre del identificador “contenido” por el cual es conocido.
Es un tipo abstracto de datos por el cual a cada nombre por el que se identifica un elemento del vector se le asocia un valor. Ejemplo: Edad["Pedro"]=35, Edad["Ana"]=28. En este tipo de vectores los nombres "Pedro" y "Ana" son únicos, no puede haber dos iguales.
Los siguientes son enlaces a las páginas de sus autores que explican, con ejemplos, el modelo de objetos de documento.