Cómo seleccionar elementos con JavaScript

En el post anterior hablé sobre el DOM y cómo Javascript trabaja con él. En esta ocasión explicaré los diferentes métodos para seleccionar elementos con JavaScript. Una vez que se construye el árbol de nodos DOM, es posible emplear funciones para poder acceder de forma directa a cualquier nodo del árbol. Al acceder a un nodo, podemos manipularlo: acceder a su valor, cambiar un valor, moverlo… , o crear nuevos elementos dentro de o a partir de él.

En este post explicaré las diferentes funciones que nos permiten acceder o seleccionar elementos con JavaScript. Aunque, es importante recordar que para seleccionar elementos, es importante que el árbol DOM haya sido construido totalmente, es decir, cuando la página HTML se haya cargado completamente.

Seleccionar elementos con getElementsByTagName()

Esta función nos permite obtener todos los elementos cuya etiqueta sea igual al parámetro que le pasamos a la función. Por ejemplo, para seleccionar todos los h1 de una página html.

Delante de la función, vemos un documento. Ahí se indica a partir de qué nodo se realiza la búsqueda de elementos. Como queremos obtener todo los títulos de la página, usamos document.

Esta función devuelve un array de todos los nodos que cumplen la condición de que su etiqueta coincide con el argumento pasado. El valor al ser un array de nodos, cada uno se trataría como un objeto. Para obtener el texto del primer título.

Como comenté hace un momento, lo que va precedido de la función es a partir de onde se realiza la búsquueda. Por tanto, vamos a mostrar como se buscaría los elementos span que estén dentro del primer título

De esta forma etiquetas tendría todos los elementos span que estén dentro del primer título.

Seleccionar elementos por nombre con getElementsByName()

Esta función es similar al anterior, pero esta vez se buscan los elementos cuyo atributo name coincida con el parámetro. Por ejemplo, tenemos un formulario y queremos seleccionarlo..

Esta funcion es muy útil cuando queremos seleccionar un input tipo radio o tipo checkbox ya que el atributo name es común para ellos para indicar que están relacionados.

Seleccionar elementos por su id getElementById()

Esta función es la más utilizada para seleccionar elementos con JavaScript y nos devuelve elemento cuyo atributo id coincida con el parámetro indicado en la función. Como el atributo id debe ser único para cada elemento, la función devuelve únicamente el nodo deseado.

A modo de curiosidad, en IE6 esta función devuelve aquellos elementos cuyo atributo name coincida con el argumento pasado a la función.
Espero que os haya gustado este post de cómo seleccionar elementos con JavaScript. A seguir picando 🙂