DOM Recuperando elementos html existentes


Ejemplo

Una de las tareas más comunes es recuperar un elemento existente del DOM para manipularlo. Más comúnmente, estos métodos se ejecutan en un document , porque es el nodo raíz, pero todos estos métodos funcionan en cualquier elemento HTML en el árbol. Solo devolverán hijos del nodo en el que se ejecuta.

Recuperar por ID

var element = document.getElementById("logo");

element contendrá el (único) elemento que tiene su atributo id establecido en "logo", o contiene null si no existe tal elemento. Si existen varios elementos con este ID, el documento no es válido y puede pasar cualquier cosa.

Recuperar por nombre de etiqueta

var elements = document.getElementsByTagName("a");

elements contendrán una HTMLCollection vivo (un objeto similar a una matriz) de todas las etiquetas de enlace en el documento. Esta colección está sincronizada con el DOM, por lo que los cambios realizados en el DOM se reflejan en esta colección. La colección proporciona acceso aleatorio y tiene una longitud.

var element = elements[0];
//Alternative
element = elements.item(0);

element contiene el primer elemento de enlace HTML encontrado, o null si el índice está fuera de límites

var length = elements.length;

length es igual al número de elementos de enlace HTML que se encuentran actualmente en la lista. Este número puede cambiar cuando se cambia el DOM.

Recuperar por clase

var elements = document.getElementsByClassName("recipe");

elements contendrán una HTMLCollection vivo (un objeto similar a una matriz) de todos los elementos donde su atributo de class incluye "receta". Esta colección está sincronizada con el DOM, por lo que los cambios realizados en el DOM se reflejan en esta colección. La colección proporciona acceso aleatorio y tiene una longitud.

var element = elements[0];
//Alternative
element = elements.item(0);

element contiene el primer elemento HTML encontrado con esta clase. Si no hay tales elementos, el element tiene el valor undefined en el primer ejemplo y null en el segundo ejemplo.

var length = elements.length;

length es igual al número de elementos HTML que actualmente tienen la clase "receta". Este número puede cambiar cuando se cambia el DOM.

Recuperar por nombre

var elements = document.getElementsByName("zipcode");

elements contendrán un NodeList vivo (un objeto similar a una matriz) de todos los elementos con su atributo de name establecido en "zipcode". Esta colección está sincronizada con el DOM, por lo que los cambios realizados en el DOM se reflejan en esta colección. La colección proporciona acceso aleatorio y tiene una longitud.

var element = elements[0];
//Alternative
element = elements.item(0);

element contiene el primer elemento HTML encontrado con este nombre.

var length = elements.length;

length es igual a la cantidad de elementos HTML que actualmente tienen "código postal" como atributo de nombre. Este número puede cambiar cuando se cambia el DOM.