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 cuarto1 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. 


 Curso: TdC > El DOM > getElementById y getElementsByTagName [56/64]