Tutorial de DHTML : Temarios

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).

La página html es:

<html>
<head>
<title>Problema</title>
<script language="javascript" src="funciones.js" type="text/javascript"></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 un punto al final de cada 
párrafo" onClick="cambiarParrafos()">
</body>
</html>

Agrupamos los párrafos en dos capas (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.

11 - Accediendo a un conjunto de marcas HTML similares a partir de un Nodo (getElementsByTagName)