getElementById y getElementsByTagName

Tabla de contenidos

1. getElementById
2. getElementsByTagName

getElementById

El método getElementById permite, como su nombre indica, seleccionar un elemento del documento por medio del valor del atributo id que se le haya asignado. Su sintaxis es la siguiente:

    document.getElementById('id_del_elemento');
            

Por medio de esta línea podríamos elegir cualquier elemento cuyo identificador conozcamos para manipularlo posteriormente. Por ejemplo, por medio de document.getElementById('contenido') seleccionaríamos el elemento con id="contenido".

Como todo método, getElementById tiene que ser un método de un objeto; para éste y para todos los métodos que vamos a ver en esta sección sobre el DOM, el objeto del que dependen es document.

Existe también el método getElementsByName, que seleccionaría todos los elementos basándose en el atributo name. En XHTML no es muy útil puesto que para la mayor parte de los elementos el uso de name como identificador ha sido depreciado en favor de id, pero es bueno saber que forma parte del arsenal a nuestra disposición a la hora de trabajar con elementos que pueden compartir name pero no, obviamente, id, como son los radiobotones y las casillas de un formulario. Para más información sobre ello, ver las notas del elemento input.

Igual que existe getElementById uno podría esperar que existiera un método getElementsByClassName en la especificación del DOM HTML 2, pero no es así. No obstante, Robert Nyman ha escrito una función con ese mismo fin (inglés).

getElementsByTagName

Por medio de este método lo que se selecciona es una lista de nodos cuyo elemento es el especificado como parámetro; a cada uno de los nodos se le asigna un índice, de acuerdo al orden en el que aparecen en el marcado del documento. Su sintaxis:

    document.getElementsByTagName('elemento');
    document.getElementsByTagName('elemento')[índice_del_elemento];
            

Con la primera línea de código obtenemos todos los elementos de un tipo, mientras que con la segunda elegimos una de ellos en concreto. Por ejemplo

    document.getElementsByTagName('p');
            

nos devuelve una lista con todos los párrafos del documento, mientras que

    document.getElementsByTagName('p')[3];
            

nos devuelve el cuarto¹ párrafo.

Algo que hay que recordar es que para seleccionar un elemento en concreto por medio de este método es necesario indicar el índice, incluso cuando sólo existe un elemento de su tipo. Por ejemplo, todos sabemos que un documento sólo puede tener un body, pero no podemos seleccionarlo por medio de document.getElementsByTagName('body'), puesto que esto devuelve una lista de nodos —aunque sólo contenga un único nodo—; la forma correcta de seleccionarlo sería document.getElementsByTagName('body')[0].

Por último, indicar que se pueden combinar los métodos vistos para seleccionar una lista de elementos dentro de un elemento concreto:

    document.getElementById('contenido_adicional').getElementsByTagName('li');
    document.getElementsByTagName('div')[1].getElementsByTagName('li');
            

La primera línea nos devolvería una lista con ítems de lista del documento, pero restringida a aquellos descendientes dentro del elemento con id="contenido_adicional". La segunda nos devolvería la lista de los li descendientes del segundo div del documento.

No voy a ofrecer aquí ejemplos concretos de empleo de los dos métodos, porque los voy a emplear constantemente en los ejemplos de las secciones siguientes.

Notas

1. Como al trabajar con matrices, los índices de una lista de nodos parten de 0.