jmocana.eu

Maquetador web

contactar

Manipulación del DOM con javaScript

0 Comentarios

Jun01

A la hora de manipular el DOM tenemos el siguiente listado de expresiones

  • document.getElementById(id_elemento);: Permite acceder al primer elemento con id “id_elemento”
  • document.getElementsByTagName(elemento): Devuelve una lista de nodos con todos los elementos con el nombre “elemento”.
    En caso de querer hacer referencia a un elemento específico, por ejemplo el primero, podríamos hacer uso de la expresión: document.getElementsByTagName(elemento)[0]
  • document.createElement(elemento);: Crea un nuevo elemento en el DOM
  • document.createTextNode(“texto”);: Genera un nuevo nodo de texto.
  • appendChild: Añade un nodo hijo a un padre concreto. Por ejemplo:
    var nuevoEnlace = document.createElement("a");
var nodoTexto = document.createTextNode("Esto es un enlace");
nuevoEnlace.appendChild(nodoTexto);
  • elementoPadre.insertBefore(nuevoElemento, elementoReferenciado);: Inserta un elemento justo antes de otro que le especifiquemos.
  • innerHTML: Permite introducir HTML dentro de una etiqueta.
  • parentNode: Selecciona el nodo padre de un nodo en concreto.
  • removeChild: Elimina un nodo hijo
  • getAttribute(propiedad);: Devuelve el valor de una propiedad que le pasamos por parametro
  • ancla.style.display: Devuelve un estilo concreto de un elemento
  • document.getElementsByClassName(names);: Retorna un conjunto de elementos los cuales poseen la clase “names”.

getElementsByClassName pertenece a la nueva especificación de HTML5 y tan solo algunos navegadores lo soportan, por ejemplo Internet Explorer en todas sus versiones inferiores a la 9.

Hasta que todos los navegadores soporten getElementsByClassName podremos hacer uso de la siguiente función:

function getElementsByClass(searchClass,node,tag) {
	var classElements = new Array();
	if ( node == null )
		node = document;
	if ( tag == null )
		tag = '*';
	var els = node.getElementsByTagName(tag);
	var elsLen = els.length;
	var pattern = new RegExp('(^|\\s)'+searchClass+'(\\s|$)');
	for (i = 0, j = 0; i < elsLen; i++) {
		if ( pattern.test(els[i].className) ) {
			classElements[j] = els[i];
			j++;
		}
	}
	return classElements;
}

Podemos encontrar información mas detallada en la siguiente página: Introducción a la manipulación del DOM mediante Javascript (Maestros del web)

Comentarios