Jak v JS změnit element h2 uvnitř elementu header

document.querySelector("header h2").innerText = "nový nadpis";

Díky a když to bude prosím v jiném elementu který bude na stránce vícekrát?

Jak to myslíš?

Třeba budu chtít editovat "nadpis 3" který je v elementu navi a ten element je na stránce vícekrát a nechci použít id, stránka se nemění co se týká elementů.

<navi>
  <h2>nadpis 1</h2>
</navi>
<navi>
  <h2>nadpis 2</h2>
...
...
<h2>nadpis 3</h2>
...
...
<h2>nadpis 4</h2>
</navi>

document.querySelectorAll("navi h2").forEach((e) => {
    if (e.innerText === "nadpis 3") e.innerText = "nový nadpis";
});

Díky a nejde to i přímo?
Něco jako

document.querySelector("header[0] h2[2]").innerText = "nový nadpis";

Možná šlo, ale vyjadřuješ se nejednoznačně, takže netuším, co přesně potřebuješ.

Ve druhém elementu nav chci přepsat druhý element h2.

document.querySelectorAll("navi")[1].querySelectorAll("h2")[1].innerText = "nový nadpis";

Díky, ty jsi vážně machr ;)
Můžu ještě doplňující dotaz?
Co je na tom zápise špatně? Nemůžu použít 3 elementy naráz?

document.body.appendChild( e1 + e2 + e3 ) ;

appendChild přidává jenom jeden.

document.body.append(e1, e2, e3) ;

Paráda, moc díky.
PS: ještě rosím jednu
Pro jaký element mám nastavit css styl jako je třeba

* {
  box-sizing: border-box;
}

nebo

@media (max-width: 600px) {
  nav, article {
    width: 100%;
    height: auto;
  }
}

jak se to správně v JS dělá, jde to vůbec?

Teď nerozumím otázce.

Když budu chtít nastavit elementu nějaký css styl pomocí JS tak to udělám nějak takto

document.getElementById("wrp").style.color = "blue";

Jenže nevím jakému elementu mám nastavit css styl * {..} nebo @media{...}

Tak to takhle nejde.

Nevadí, díky moc.

Bude lepší když napíšeš, čeho chceš dosáhnout.