@alterebro

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: DOM, javascript