<!DOCTYPE html> <html style="background-color: #D1D1D1 "> <head> <meta charset="utf-8" /> <link rel="stylesheet" type="text/css" href="./main.css" /> </head> <body id="body"> <h1 id="headerTitle"></h1> <div> <p id="header">November 29th</p> </div> <div> <p id="header">November 29th</p> </div> <div> <p id="header">November 29th</p> </div> <script src="./main.js"></script> </body> </html>Estoy tratando de recorrer el cuerpo y entrar en cada div y cambiar el texto del 29 de noviembre. Lo más cerca que he llegado es con esto:
var body = document.getElementsByTagName("div") for (i = 0; i < body.length; i++) { document.getElementById("header").innerHTML = "Hello World!"; }pero solo cambia el primer div y se detiene.
Solo está cambiando el primer div , ya que se supone que una identificación solo pertenece a un elemento, por lo que se detiene después de encontrar ese elemento. Cambie el campo de identificación en las etiquetas p a class y podría usar
let body = document.getElementsByClassName() for (let element of body) { element.innerHTML = "..." }Como ya se mencionó, no debe tener más de 1 elemento con la misma identificación. Cambiando las identificaciones a la clase, este código debería funcionar:
[...document.querySelectorAll('.header')].map((elem) => elem.textContent = 'Hello World!');// Solo para cambiar los datos en los div, puedes hacer esto
var div_s = documento.getElementsByTagName("div")
for (i = 0; i < div_s.length; i++) { div_s[i].innerHTML = "Hello World!"; }O para cambiar los datos en p's, necesita identificaciones únicas para cada etiqueta, como se indica a continuación.
<div title = "header1"> <p id="header1">November 29th</p> </div> <div title = "header2"> <p id="header2">November 29th</p> </div> <div title="header3"> <p id="header3">November 29th</p> </div> <script> var divs = document.getElementsByTagName('div') for (i = 0; i < divs.length; i++) { document.getElementById(divs[i].title).innerHTML = "Hello World!"; } </script>