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 lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prueba</title>
</head>
<body>
<p>Este es el primer párrafo</p>
<p>Este es el segundo párrafo</p>
<p>Este es el tercer párrafo</p>
<input type="button" value="Agregar un punto al final de cada párrafo" onClick="cambiarParrafos()">
<script src="funciones.js"></script>
</body>
</html>
Luego el archivo funciones.js es:
function cambiarParrafos() {
let lista = document.getElementsByTagName('p')
for (let f = 0; f < lista.length; f++)
lista[f].childNodes[0].nodeValue = lista[f].childNodes[0].nodeValue + '.'
}
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 un punto al final de cada párrafo sólo debemos almacenar el contenido actual más el string '.':
let lista = document.getElementsByTagName('p')
for (let f = 0; f < lista.length; f++)
lista[f].childNodes[0].nodeValue = lista[f].childNodes[0].nodeValue + '.'
Podemos recorrer el vector de elementos con el for of:
function cambiarParrafos() {
let lista = document.getElementsByTagName('p')
for (let elemento of lista)
elemento.childNodes[0].nodeValue = elemento.childNodes[0].nodeValue + '.'
}