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


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

  let obj=document.getElementById("bloque2")
  let 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:

<!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>
    <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()">
    <script src="funciones.js"></script>
</body>

</html>

Agrupamos los párrafos en dos div

function cambiarParrafos() {
    let obj = document.getElementById("bloque2")
    let lista = obj.getElementsByTagName('p')
    for (let elemento of lista)
        elemento.childNodes[0].nodeValue = elemento.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 :

  let lista=document.getElementsByTagName('p')

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

    let obj = document.getElementById("bloque2")
    let 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.

Nos queda luego recorrer, en este caso con un for of los elementos del array y proceder a modificar el valor almacenado en cada párrafo:

    for (let elemento of lista)
        elemento.childNodes[0].nodeValue = elemento.childNodes[0].nodeValue + '.'

Retornar