Introducción al Modelo de Objetos de Documento (DOM) 

Autor Original:Mike Hall URL ORIGINAL : http://www.brainjar.com/dhtml/intro/ TÍTULO ORIGINAL : Introduction to the Document Object Model Traducción al castellano:Pedro Palazón Candel URL CASTELLANO : http://kusor.net/traducciones/brainjar.es/introdom1.es.html

Introducción al Modelo de Objetos de Documento (DOM)

Revisa la recomendación W3C DOM2 standard.

Tipos de Nodos

Antes de ir mas allá, probablemente sea un buen momento de explicar los tipos de nodos con más detalle. Como se ha mencionado, hay varios tipos de nodos definidos en el modelo de objetos de documento, pero los que vas a utilizar con más frecuencia para las páginas web son element, text y attribute.

Los nodos Element, como hemos visto, se corresponden a las etiquetas individualel o pares de éstas en el código HTML. Éstas pueden tener nodos hijos, que pueden ser otros elementos o nodos de texto.

Los nodos Text representan contenido, o datos de carácter. Van a tener un nodo padre y, posiblemente, nodos del mismo nivel, pero no pueden tener nodos hijos.

Los nodos Attribute son un caso especial. No están considerados una parte del árbol del documento - no tienen un nodo padre(parent), ni nodos hijos(children) o nodos del mismo nivel (siblings). En lugar de ello, son utilizados para posibilitar el aceso a los atributos de un nodo elemento. Esto es, representan los atributos definidos en la etiqueta HTML de un elemento, como el atributo HREF de una etiqueta A o el atributo SRC de una etiqueta IMG.

Nótese que los valores de los atributos son siempre cadenas de texto.

Atributos vs. Nodos Atributo

Hay varios modos de hacer referencia a los atributos de un elemento. la razón de ésto es que el estándar del DOM2 fué diseñado para muchos tipos de documentos estructurados (e.d., documentos XML), no sólo HTML. Por lo que define un tipo formal de nodo para los atributos.

Pero para todos los documentos también proporciona algunos métodos mas convenientes para acceder, agregar y modificar atributos, com se describe a continuación.

El método document.createAttribute() te permite crear un nuevo nodo atributo, al cuál le puedes fijar entonces un valor y asignarlo a un nodo elemento.

var attr = document.createAttribute("myAttribute");
attr.value = "myValue";
var el = document.getElementById("myParagraph");
el.setAttributeNode(attr);

No obstante, usualmente es más fácil aceder a los atributos de un elemento directamente usando los métodos del elemento getAttribute() y setAttribute() en su lugar.

var el = document.getElementById("myParagraph");
el.setAttribute("myAttribute", "myValue");

Los atributos de un elemento son representados también como propiedades del nodo elemento. En otras palabras, puedes usar simplemente

var el = document.getElementById("myParagraph");
el.myAttribute = "myValue";
Compatibilidad de Navegadores Nótese que Internet Explorer (hasta la versión 5.5) no soporta el tipo de nodo atributo. En su lugar, debes aceder y fijar los atributos de un elemento usando los métodos getAttribute() y setAttribute() del nodo elemento o como propiedades como se ha mostrado anteriormente.

También es interesante resaltar que puedes definir tus propios atributos en la etiqueta HTML en sí misma. Por ejemplo,

<p id="myParagraph" myAttribute="myValue">This is a sample paragraph.</p>

...

alert(document.getElementById("myParagraph").getAttribute("myAttribute"));

mostrará "myAttribute." Pero fíjate en que deberías usar element .getAttribute(attributeName) en lugar de element.attributeName para obtener el valor ya que algunos navegadores no registrarán los atributos definidos por el usuario como propiedades del elemento.

Los atributos también pueden removerse de un nodo elemento, utilizándo indistintamente los métodos removeAttribute() o removeAttributeNode() o fijándolos en la propiedad element.attributeName a una cadena nula ("").

La alteración de los atributos es uno de los modos de crear efectos dinámicos. A continuación hay un párrafo de ejemplo. Utiliza los links para alterar su atributo ALIGN.

Texto en un elemento párrafo.

Align Left | Align Right

El código es bastante simple:

<p id="sample1" align="left">Text in a paragraph element.</p>

... code for the links ...

document.getElementById('sample1').setAttribute('align', 'left');
document.getElementById('sample1').setAttribute('align', 'right');

Atributos de estilo

La mayor parte de los atributos para las etiquetas HTML son bastante simples, definen un único valor para una propiedad específica para dicha etiqueta. Los estilos son un poco más complicados. Como sabes, CSS puede ser utilizado para aplicar parámetros de estilo a una etiqueta individual, a todas las etiquetas de un tipo dado o a las que hayamos asignado  clases. Asímismo, los estilos para un elemento en particular pueden ser heredados dede cualquiera de éstas fuentes.

También puedes alterar estos estilos a varios niveles. Por ejemplo, puedes cambiar el atributo STYLE de una etiqueta HTML, o su atributo CLASS. Pero estos métodos alterarán todos los parámetros de estilo de un elemento. Frecuentemente, vas a querer cambiar sólamente un sólo parámetro, o unos pocos seleccionados, mientras que retendrás los demás.

Afortunadamente, el atributo style de un nodo elemento está definido como un objeto con propiedades para cada parámetro de estilo posible. Puedes acceder y actualizar estos parámetros individuales como desees. Aquí hay un ejemplo similar al anterior.

Text in a paragraph element.

Align Left | Align Right

Pero en este caso, la alineación del texto está definida y alterada usando un parámetro de style en lugar del atributo ALIGN. Aquí está el código subyacente al ejemplo:

<p id="sample2" style="text-align:left;">Text in a paragraph
element.</p>

... code for the links ...

document.getElementById('sample2').style.textAlign = 'left';
document.getElementById('sample2').style.textAlign = 'right';

Nótese que cuando el nombre de un parámetro CSS contiene un guión ("-") como en "text-align", el nombre de su correspondiente propiedad style se construye quitando el guión y pasando a mayúsculas la primera letra que le sigue, en este caso quedaría como "textAlign."

Nótese que incluso si un parámetro en particular de style no está definido inicialmente para un elemento, sigues pudiendo fijar su valor usando DOM. Por ejemplo, en el código anterior el estilo  'inline' style= en la etiqueta P realmente no es necesario.

Prev | Next

BrainJar.com · ©1999-2002 by Mike Hall 
Publicado con autorización explícita del autor.
Puedes encontrar más artículos y tutoriales relacionados con dhtml en esta web.
Valid HTML |Valid CSS