Repaso a los métodos DOM más comunes.
miércoles, julio 09, 2008 @14:16
Como obtener elementos, sus atributos y valores de nodos, como navegar entre ellos y como crear nuevos nodos.
- Obteniendo elementos en un documento
-
document.getElementById('id')
. Recupera el elemento cuyoid
es pasado como parámetro y devuelve un objeto.document.getElementsByTagName('etiqueta')
. Recupera todos los elementos con el nombre de etiquetaetiqueta
y los guarda en una lista de elementos con forma de array
- Obteniendo atributos de los elementos, valores de nodos y otros datos
-
node.getAttribute('atributo')
. Recupera el valor de un atributo que tenga de nombreatributo
node.setAttribute('atributo', 'valor')
. Define el valor de el atributo con el nombreatributo
avalor
nodo.nodeType
. Lee y devuelve el tipo denodo
(1 = elemento, 3 = nodo de texto)nodo.nodeName
. Lee y devuelve el nombre denodo
(el nombre del elemento o #textNode)nodo.nodeValue
. Lee y devuleve o define el valor denodo
(el contenido textual en al caso de los nodos de texto)
- Navegando entre nodos
-
node.previousSibling
. Devuelve el nodo hermano anterior y lo guarda como objeto.node.nextSibling
. Devuleve el siguiente nodo hermano y lo almacena como un objeto.node.childNodes
. Devuelve todos los nodos hijo del objeto y los almacena en una lista. Eston son los atajos para acceder al primer y último hijo, llamadosnode.firstChild
ynode.lastChild
node.parentNode
. Devuleve el nodo contenedor denode
.
- Creación de nuevos nodos
-
document.createElement(element)
. Crea un nuevo elemento nodo con el nombreelement
. El nombre es pasado como cadena.document.createTextNode(string)
. Crea un nuevo nodo de texto con el vaor de nodo destring
.newNode = node.cloneNode(bool)
. CreanewNode
como copia (clon) denode
. Sibool
estrue
, el clon incluye clones de todos los nodos hijo del original.node.appendChild(newNode)
. AñadenewNode
como un nuevo (último) nodo hijo anode
.node.insertBefore(newNode,oldNode)
. InsertanewNode
como un nuevo nodo hijo de "node" antes deoldNode
.node.removeChild(oldNode)
. Elimina el hijooldNode
denode
.node.replaceChild(newNode, oldNode)
. Reemplaza el nodo hijooldNode
de "node" pornewNode
.element.innerHTML
. Lee o escribe el contenido HTML de elelement
dado como cadena — incluyendo todos los nodos hijo con sus atributos y contenido textual.
- Fallos de implementación conocidos en algunos navegadores:
-
-
getAttribute
andsetAttribute
No son de fiar, en su lugar, asigna el valor de la propiedad del elemento directamente:obj.property = value.
Además, algunos atributos son en realidad palabras reservadas, asi en vez de "class" usaclassName
y en vez defor
usaHTMLfor
. - Navegadores con buen soporte DOM devolveran los saltos de linea como nodos de texto en la colección de childNodes, asi que asegurate de, o eliminarlos o testearlos contra
nodeType
. Real DOM compliant browsers will return linebreaks as text nodes in the childNodes collection, make sure to either remove them or test for the
-
Etiquetas: DOM, javascript
0 comentarios
Publicar un comentario