@alterebro

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 cuyo id es pasado como parámetro y devuelve un objeto.
  • document.getElementsByTagName('etiqueta'). Recupera todos los elementos con el nombre de etiqueta etiqueta 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 nombre atributo
  • node.setAttribute('atributo', 'valor'). Define el valor de el atributo con el nombre atributo a valor
  • nodo.nodeType. Lee y devuelve el tipo de nodo (1 = elemento, 3 = nodo de texto)
  • nodo.nodeName. Lee y devuelve el nombre de nodo (el nombre del elemento o #textNode)
  • nodo.nodeValue. Lee y devuleve o define el valor de nodo (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, llamados node.firstChild y node.lastChild
  • node.parentNode. Devuleve el nodo contenedor de node.
Creación de nuevos nodos
  • document.createElement(element). Crea un nuevo elemento nodo con el nombre element. El nombre es pasado como cadena.
  • document.createTextNode(string). Crea un nuevo nodo de texto con el vaor de nodo de string.
  • newNode = node.cloneNode(bool). Crea newNode como copia (clon) de node. Si bool es true, el clon incluye clones de todos los nodos hijo del original.
  • node.appendChild(newNode). Añade newNode como un nuevo (último) nodo hijo a node.
  • node.insertBefore(newNode,oldNode). Inserta newNode como un nuevo nodo hijo de "node" antes de oldNode.
  • node.removeChild(oldNode). Elimina el hijo oldNode de node.
  • node.replaceChild(newNode, oldNode). Reemplaza el nodo hijo oldNode de "node" por newNode.
  • element.innerHTML. Lee o escribe el contenido HTML de el element dado como cadena — incluyendo todos los nodos hijo con sus atributos y contenido textual.
Fallos de implementación conocidos en algunos navegadores:
  • getAttribute and setAttribute 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" usa className y en vez de for usa HTMLfor.
  • 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: ,

0 comentarios

Publicar un comentario

Suscribirse a Enviar comentarios [Atom]