Accediendo a un conjunto de marcas HTML similares (getElementsByTagName)

El método getElementsByTagName() devuelve una lista de elementos con un nombre determinado. Se busca en todo el documento, incluyendo el nodo raíz.

El método getElementsByTagName() devuelve una colección de todos los elementos del documento con el nombre de etiqueta especificado, como un objeto HTMLCollection. El objeto HTMLCollection representa una colección de nodos. Se puede acceder a los nodos mediante números de índice. El índice comienza en 0.

Sugerencia: el valor de parámetro "*" devuelve todos los elementos del documento. Consejo: puede utilizar la propiedad length del objeto HTMLCollection para determinar la cantidad de elementos con el nombre de etiqueta especificado, luego puede recorrer todos los elementos y extraer la información que desee.

Sintaxis

elements = document.getElementsByTagName(name)

elements es una lista 'viva' (NodeList) de los elementos encontrados en el orden en que han aparecido en el árbol.
name es una cadena que representa el nombre de los elementos. La cadena especial "*" representa a todos los elementos.

En el siguiente ejemplo, getElementsByTagName empieza por el elemento padre y busca hacia abajo recurrentemente a lo largo de todo el DOM por ese elemento padre, buscando por hijos que cumplan con el criterio: nombre = name.
Ten en cuenta que cuando el nodo en el que se invoca getElementsByTagName, no es el nodo document, en realidad se está usando el método element.getElementsByTagName.

<html>
<head>
<title>ejemplo de getElementsByTagName</title>
<script type="text/javascript">
function getAllParaElems()
{
  var allParas = document.getElementsByTagName("p");
  var num = allParas.length;
  alert("Hay " + num + " <p> elementos en este documento");
}
function div1ParaElems()
{
  var div1 = document.getElementById("div1");
  var div1Paras = div1.getElementsByTagName("p");
  var num = div1Paras.length;
  alert("Hay " + num + " <p> elementos en el elemento div1");
}
function div2ParaElems()
{
  var div2 = document.getElementById("div2");
  var div2Paras = div2.getElementsByTagName("p");
  var num = div2Paras.length;
  alert("Hay " + num + " <p> elementos en el elemento div2");
}
</script>
</head>
<body style="border: solid green 3px">
<p>Algo de texto</p>
<p>Algo de texto</p>
  <div id="div1" style="border: solid blue 3px">
    <p>Algo de texto en div1</p>
    <p>Algo de texto en div1</p>
    <p>Algo de texto en div1</p>
    <div id="div2" style="border: solid red 3px">
    <p>Algo de texto en div2</p>
    <p>Algo de texto en div2</p>
    </div>
  </div>
<p>Algo de texto</p>
<p>Algo de texto</p>
<button onclick="getAllParaElems();">
 muestra todos los elementos p en el documento</button><br />
<button onclick="div1ParaElems();">
 muestra todos los elementos p en div1</button><br />
<button onclick="div2ParaElems();">
 muestra todos los elementos p en div2</button>
</body>
</html>

Ver ejemplo anterior

Disponemos en el objeto document de un método llamado:

getElementsByTagName("Nombre de la Marca")

Retorna un vector con la referencia a todas las marcas de dicho tipo.
A diferencia del método getElementById que retorna la referencia de una sola marca, el método getElementsByTag retorna un conjunto de referencias, las mismas se almacenan en un vector.

Vamos a desarrollar una aplicación para agregar un punto al final de cada párrafo.
La página html es:

<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<script>
function cambiarParrafos()
{
  var lista=document.getElementsByTagName('p');
  for(f=0;f<lista.length;f++)
  {
   lista[f].childNodes[0].nodeValue=lista[f].childNodes[0].nodeValue + 'texto.';
  }
}</script>
</head>
<body>
<p>Este es el primer </p>
<p>Este es el segundo /p>
<p>Este es el tercer </p>
<input type="button" value="Agregar la palabra texto al final de cada párrafo" onClick="cambiarParrafos()">
</body>
</html>

Ver ejemplo anterior

El código javascript es :

function cambiarParrafos()
{
  var lista=document.getElementsByTagName('p');
  for(f=0;f<lista.length;f++)
  {
   lista[f].childNodes[0].nodeValue=lista[f].childNodes[0].nodeValue + 'texto.';
  }
}

Hay que tener en cuenta que en el vector lista se almacena la referencia a todas las marcas de tipo párrafo (p) de la página. Luego para acceder al contenido de cada párrafo debemos hacerlo mediante el vector childNodes y mediante la propiedad nodeValue acceder al texto contenido en dicho párrafo. Disponemos el subíndice cero en la propiedad childNodes ya que los párrafos definidos en el ejemplo tienen como hijo sólo un texto.

Para agregar la palabra texto y un punto al final de cada párrafo sólo debemos almacenar el contenido actual más el string '.':

  for(f=0;f<lista.length;f++)
  {
   lista[f].childNodes[0].nodeValue=lista[f].childNodes[0].nodeValue + 'texto.';
  }

Podemos obtener la referencia a una marca HTML, y a partir de esta referencia llamar al método getElementsByTagName visto en un concepto anterior:

  var obj=document.getElementById("bloque2");
  var lista=obj.getElementsByTagName('p');

La cual retorna un vector con todas las marcas contenidas en ese bloque (es decir, no es respecto a todo el documento como el problema anterior)

Esto puede ser de gran utilidad cuando queremos hacer cambios a un conjunto de marcas similares del documento, pero que no afecten a todo el documento.
Para probar el método, agregaremos un punto al final de cada párrafo que están contenidos en una marca (div).
El código javascript es :

<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<script >
function cambiarParrafos()
{
  var obj=document.getElementById("bloque2");
  var lista=obj.getElementsByTagName('p');
  for(f=0;f<lista.length;f++)
  {
   lista[f].childNodes[0].nodeValue=lista[f].childNodes[0].nodeValue + '.';
  }
}
</script>
</head>
<body>
<div id="bloque1">
<h1>Primer Bloque de párrafos.</h1>
<p>Este es el primer párrafo</p>
<p>Este es el segundo párrafo</p>
<p>Este es el tercer párrafo</p>
</div>
<div id="bloque2">
<h1>Segundo Bloque de párrafos.</h1>
<p>Este es el primer párrafo</p>
<p>Este es el segundo párrafo</p>
<p>Este es el tercer párrafo</p>
</div>
<input type="button" value="Agregar la palabra 'texto.' al final del cada parrafo del segundo bloque" onClick="cambiarParrafos()">
</body>
</html>

Ver ejemplo anterior

Agrupamos los párrafos en dos div

function cambiarParrafos()
{
  var obj=document.getElementById("bloque2");
  var lista=obj.getElementsByTagName('p');
  for(f=0;f<lista.length;f++)
  {
   lista[f].childNodes[0].nodeValue=lista[f].childNodes[0].nodeValue + '.';
  }
}

Lo más importante del problema es ver como llamamos al método getElementsByTagName. Si queremos la referencia a todas las marcas de la página lo hacemos :

  var lista=document.getElementsByTagName('p');

Si queremos la referencia a todas las marcas similares contenidas en un div lo hacemos:

  var obj=document.getElementById("bloque2");
  var lista=obj.getElementsByTagName('p');

Es decir, primero obtenemos la referencia del div con id llamado bloque2 y luego, mediante el objeto devuelto, llamamos al método getElementsByTagName.

(adsbygoogle = window.adsbygoogle || []).push({});

Accediendo a un conjunto de marcas HTML similares (getElementsByTagName)