document.getElementsByTagName

Resumen

Devuelve una lista de elementos con un nombre determinado. Se busca en todo el documento, incluyendo el nodo raíz.

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.

Ejemplo

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>

Especificación