Mi chuleta de Javascript: manipular DOM y CSS

Esto es un compendio, chuletario, o cheat sheet (hay que ser modernos) de métodos y propiedades disponibles en javascript, así como trucos varios y consejos para hacer más cross-browser nuestras aplicaciones.

Manipular la estructura DOM: resumen de métodos

Este apartado es un resumen de todos los métodos para acceder y manipular la estructura DOM de un documento mediante los métodos disponibles. Obviamente hay técnicas y funciones disponibles (aqui voy recopilando algunas) para hacer más compatible nuestras aplicaciones, pues no todos los métodos son igualmente soportados por todos los navegadores. Por cierto, en cuestión de compatibilidad y accesibilidad, no te olvides del fantástico sitio Quirksmode.org.

Encontrar los elementos de un documento

• document.getElementById('id'): Devuelve el elemento con el id id
• document.getElementsByTagName('tagname'): Devuelve en un array de tipo lista todos los elementos del tipo o con la etiqueta) name.

Leer atributos de elementos, valores de nodo, y otros datos del nodo

• node.getAttribute('attribute'): Devuelve el valor del atributo attribute del nodo node.
  
• node.setAttribute('attribute', 'value'): Asigna el valor value al atributo attribute del nodo node.
• node.nodeType: Lee el tipo del nodo node (1 = elemento, 3 = nodo de texto)
• node.nodeName: Lee el nombre del nodo node (o el nombe del elemento, o #textNode)
• node.nodeValue: Lee o asigna el valor del nodo node (el texto de contenido en el caso de nodos de texto)

Navegar entre nodos

• node.previousSibling: Devuelve el nodo homólogo previo y lo almacena como un objeto.
• node.nextSibling: Devuelve el nodo homólogo siguiente lo almacena como un objeto.
• node.childNodes: Devuelve todos los nodos hijos y los almacena en una lista. Hay atamos para el primero y el último hijo, llamados node.firstChild y node.lastChild.
• node.parentNode: Devuelve el nodo que contiene a node.

Crear nuevos nodos

• document.createElement(element): Crea un nuevo nodo con el nombre element (se le pasa como cadena).
• document.createTextNode(string): Crea un nuevo nodo de texto con el valor string.
• newNode = node.cloneNode(bool): Crea newNode como una copia o clon de node. Si bool es true, el clon incluye clones de todos los nodos hijos del original.
• node.appendChild(newNode): Añade newNode como un nuevo nodo hijo de node (después de el resto de hijos).
• node.insertBefore(newNode, oldNode): Inserta newNode como un nodo hijo de node y antes de oldNode.
• node.removeChild(oldNode): Elimina el nodo hijo oldNode de node.
• node.replaceChild(newNode, oldNode): Reemplaza el nodo hijo oldNode de node con newNode.
• element.innerHTML: Lee o escribe el contenido HTML del elemento element como una cadena -incluyendo todos los nodos hijos con sus atributos y contenido de texto-.

Manipular la estructura DOM: trucos y buenas prácticas

• La mejor forma de testear si el navegador soporta métodos DOM es incluir algo así en nuestro código javascript:

  // Check for DOM and apply a class to the body if it is supported
  if(!document.getElementById || !document.createElement){return;}

  Este test es no obstructivo en sí, pero también convierte en no obstrutivo a nuestro código: si no lo soporta deja de ejecutarse. Utilizarla siempre en las funciones que primero se ejecuten (inicialización, et.).

• asdf

Manipular la presentación CSS: resumen de métodos

Lo siguiente es un resumen de las propiedades disponibles que se corresponden con los atributos CSS que definen el estilo de los elementos.

• background, backgroundAttachment, backgroundColor, backgroundImage, backgroundPosition, y backgroundRepeat
• order, borderBottom, borderTop, borderLeft, borderRight, y para cada uno de su estilo, width, y color
• color, direction, display, visibility, letterSpacing, lineHeight, textAlign, textDecoration, textIndent, textTransform, wordSpacing, letterSpacing
• margin, padding (y para cada uno top, left, bottom, y right)
• width, height, minWidth, maxWidth, minHeight, maxHeight
• captionSide, emptyCells, tableLayout, verticalAlign
• top, bottom, left, right, zIndex, cssFloat, position, overflow, clip, clear
• listStyle, listStyleImage, listStylePosition, listStyleType
• font, fontFamily, fontSize, fontStretch, fontStyle, fontVariant, fontWeightx

Trucos y buenas prácticas para manipular la presentación

• Para cambiar dinámicamente la clase de un objeto conviene hacerlo mediante el atributo className ya que los atributos class o style no son soportados por algunos navegadores. El nombres del atributo es className ya que class es una palabra reservada de javascript. Un ejemplo de asignación dinámica:
  var n=document.getElementById('nav');
n.className='dynamic';
• Para eliminar una clase conviene hacerlo mediante la asignación de cadena vacía. El método removeAttribute() no es fiable entre los diferentes navegadores.
• Una forma mucho más accesible de ocultar los elementos es evitando el display:none (que también se oculta a los lectores para discapacitados) y utilizar el código siguiente:
  .off-left { position:absolute; left:-999px; width:990px; }