Introducción al Modelo de Objetos de Documento (DOM)
Revisa la recomendación W3C DOM2 standard.La Raíz (Root) Document
El objeto document object sirve de raíz de este árbol
de nodos. Implementa también la interfaz Node. Va a tener
nodos hijos pero no tendrá nodo padre ni nodos de su mismo nivel,
dado que él es el nodo inicial. Además de ser un Node,
también implementa la interfaz Document.
Esta interfaz proporciona métodos para acceder y crear otros nodos en el árbol del documento. Algunos métodos son:
getElementById()getElementsByTagName()createElement()createAttribute()createTextNode()
Nótese que, de modo distinto a los otros nodos, sólo hay
un objeto document en una página. Todos los métodos
anteriores (excepto getElementsByTagName()) pueden utilizarse
sólo contra el objeto document, e.d., usando la sintaxis document.
methodName().
El objeto document también puede tener otras propiedades
relacionadas con el soporte de antiguos niveles del DOM. Por ejemplo, encontrarás
que muchos navegadores tienen todavía los arrays document.images
y document.links o las propiedades document.bgColor
y document.fgColor relacionadas con los atributos BGCOLOR y
TEXT de la etiqueta BODY.
Estas propiedades se mantienen con la intención de proporcionar cierta compatibilidad hacia atrás para que páginas diseñadas para navegadores antiguos sigan funcionando apropiadamente con las nuevas versiones. Pueden utilizarse todavía en los scripts pero probablemente no estén soportadas en las versiones futuras.
Recorriendo el árbol del Documento
Como se ha mencionado, el árbol del documento refleja la estructura del código de una página. Cada etiqueta o par de etiquetas está representada por un nodo elemento con otros nodos representando atributos o datos de carácter (e.d., texto).
Técnicamente hablando, el objeto document tiene sólo
un elemento hijo, dado por document.documentElement. Para páginas
web, éste representa la etiqueta exterior HTML, y ésta actua
como el elemento raíz del árbol del documento. Va a tener los
elementos hijos HEAD y BODY que tendrán a su vez otros elementos hijos.
Utilizando ésto, y los métodos de la interfaz Node
, puedes recorrer el árbol del documento para acceder a los nodos
individuales contenidos en dicho árbol. Considera lo siguiente:
<html>
<head>
<title></title>
</head>
<body><p>This is a sample paragraph.</p></body>
</html>
y éste código:
alert(document.documentElement.lastChild.firstChild.tagName);
que debería mostrar "P", el nombre de la etiqueta representada por dicho nodo. El código se puede descomponer como sigue:
document.documentElement- devuelve la etiqueta HTML de la página..lastChild- devuelve la etiqueta BODY..firstChild- devuelve el primer elemento en BODY..tagName- devuelve el nombre de la etiqueta de dicho elemento, "P" en este caso.
Hay varios problemas obvios para acceder a los nodos de esta forma. Por ejemplo, un simple cambio del código de la página, como agregar texto o elementos con formato o imágenes, cambiará la estructura de árbol. La ruta utilizada anteriormente no apuntará, en ese caso, al nodo intencionado.
Menos obvias son ciertas incompatibilidades entre los navegadores. Nótese que en el ejemplo HTML anterior, no hay espacio entre las etiquetas BODY y P. Si se hubiese añadido simplemente un salto de línea,
<html>Prueba la utilidad DOM Viewer de Brainjar.com para navegar de modo interactivo un árbol de documento.
<head>
<title></title>
</head>
<body>
<p>This is a sample paragraph.</p>
</body>
</html>
Netscape añadiría un nodo para este dato, mientras que IE no lo haría. Por ésto, en Netscape, el código JavaScript mostrado anteriormente debería devolver "undefined" como su nuevo puntero para el nodo de texto para este espacio en blanco. Como no es un nodo elemento, no tiene la propiedad tagName. IE, por su parte, no agrega nodos para espacios en blanco cómo estos, por lo que todavía apuntaría a la etiqueta P.
Accediendo a los Elementos Directamente
Aquí es donde el método document.getElementById()
adquiere utilidad. Mediante la adición de un atributo ID a la etiqueta
del párrafo (o cualquier otra etiqueta, para el caso), puedes referirte
a ella directamente.
<p id="myParagraph">This is a sample paragraph.</p>
...
alert(document.getElementById("myParagraph").tagName);
De este modo, puedes evitar problemas de compatibilidad y actualizar los contenidos de la página sin tener que preocuparte de dónde está el nodo del párrafo en el árbol del documento. Debemos recordar que cada ID tiene que ser único en una página.
Un método algo menos directo de acceder a los nodos de tipo elemento
es proporcionado por document.getElementsByTagName(). Éste
devuelve un array de nodos representando todos los elementos en una página
que tengan la etiqueta HTML especificada. Por ejemplo, podrías cambiar
el color de todos los links en una página con lo siguiente.
var nodeList = document.getElementsByTagName("A");
for (var i = 0; i < nodeList.length; i++)
nodeList[i].style.color = "#ff0000";
Que actualiza simpemente los estilos inline de cada link fijándo
el parámetro color en rojo. Pruébalo try.