DOM EN JAVASCRIPT, Resumen de mtodos

Introduccin La especificacin DOM de JavaScript, aunque haya sido implementada y ampliada por cada uno de los organismos encargados de desarrollar sus respectivos navegadores, representa el estndar a seguir, por eso a continuacin se presentar un resumen de la utilizacin de los mtodos ms importantes. Se ha tener en cuenta que los mtodos devolvern un valor dependiendo del tipo de nodo. Dichos tipos son: elemento (etiquetas), de texto, de atributo y el nodo padre document. Funciones principales

x = document.createElement('P'); Crea un elemento. x = document.createTextNode('text'); Crea un nodo texto. x = document.getElementById('test'); Obtiene el elemento con este ID. x = document.getElementsByTagName('P'); Obtiene un array de todas las etiquetas de este tipo en la pgina. Por ejemplo la sentencia document.getElementsByTagName('P')[0] devolvera el primer nodo con etiqueta P.

Funciones de cada nodo

x.nodeName; Devuelve el nombre del nodo en maysculas. Opciones; (Element nodes =>Tag name | Attribute nodes => Attribute name | Text nodes => #text | Document node => #document ). x.nodeType; Devuelve el tipo del nodo en formato numrico. Opciones; (Element nodes => 1 | Attribute nodes => 2 | Text nodes => 3 | Document node => 9). x.nodeValue; devuelve o asigna un valor al nodo. Opciones; (Element nodes => No disponible| Attribute nodes => Attribute value | Text nodes => Text | Document node => No disponible)

Funciones de rbol DOM Se pueden hacer anidaciones de propiedades realizando varias funciones en una lnea.

x.childNodes[1]; devuelve el segundo nodo del nodo x x.children[1]; devuelve el segundo nodo del nodo x. Se diferencia del anterior de que slo obtiene elementos (etiquetas HTML) x.firstChild; devuelve el primer hijo del nodo x x.lastChild; devuelve el ltimo hijo del nodo x x. NextSibling; devuelve el hermano siguiente de x x.parentNode; devuelve el nodo padre de x x.sourceIndex; Devuelve el ndice correspondiente a x del array que devuelve el mtodo document.getElementsByTagName('*').
Pgina 1

Mtodos de manipulacin de nodos

x.appendChild(y); aade un hijo (y) al nodo x x = y.cloneNode(true | false); realiza una copia del nodo y. Si el parmetro que se le pasa es true se realiza una copia entera, pero si es false se realiza slo la copia del nodo raz. x.insertBefore(y,z); inserta el nodo 'y' despus del nodo 'z' que se encuentra en x. x.removeChild(y); borra el hijo y del nodo x. x.replaceChild(y,z); remplaza el hijo 'z' por el hijo 'y'.

Funciones de manipulacin de nodos de texto

x.appendData(' some extra text'); aade la cadena al nodo x el cual debe ser de texto. x.data; contenido del nodo texto x.deleteData(4,3); borra desde el carcter 4, 3 caracteres. x.insertData(4,' and now for some extra text '); inserta la cadena despus del caracter 4 x.replaceData(4,3,' and for some new text ');remplaza los tres caracteres a partir del caracter 5 x.substringData(4,3); devuelve los tres caracteres despus del carcter 4;

Atributos Como funciones principales que asignan un valor a un atributo de un elemento tenemos; getAttribute('align') y setAttribute('align','center' ). Ejemplo utilizacin mtodos;
//Crear un atributo y lo asigna a x, z = document.createAttribute('title'); z.value = 'Test title'; x.setAttributeNode(z)

x.getAttributeNode('align'); Obtiene el atributo de align, el objeto no el valor. x.hasAttribute('align'); Devuelve true si el nodo contiene este atributo, falso en caso contrario. x.hasAttributes(); Devuelve true si el nodo contiene atributos, falso en caso contrario. x.removeAttribute('align'); Borra el atributo align del nodo x x.removeAttributeNode(z); Borra el nodo atributo z del nodo x. x.value; recoge el valor del atributo x

Pgina 2

Miscelneo de funciones Funciones que no se pueden catalogar en los apartados anteriores.

x.contains(document.getElementById('texto')); si el nodo x contiene el objeto texto devuelve true. False en caso contrario. document.documentElement; devuelve el objeto del tag html. Puede servir para saber el tamao de la pgina. x = document.getElementsByName('nombreDado'); devuelve un array con los tags que tienen como atributo name=" nombreDado ". x.hasChildNodes(); devuelve true cuando x tiene hijos nodos.

Pgina 3