Fiquei na dúvida se posso envolver meu código numa função onload ao invés de colocá-la no final do documento.
<script>
onload = () => {
// let query = document.querySelector("h1");
// console.log(query);
header.textContent = "Título";
}
</script>Também gostaria de saber se posso usar um id diretamente com o textcontent ao invés de usar o querySelector, como fiz abaixo:
id#header
header.textContent = "Título";
Boa noite Alexandre, tudo bem cara? A sua primeira pergunta eu não sei responder, mas a segunda perguntei sobre textContent fiz um exemplo pra você ver em ação, segue o código logo abaixo:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<title>Exemplo getElementById</title>
<meta charset="UTF-8">
<script>
estado = 0;
function mudaCor(cor) {
var elemento = document.getElementById("item");
elemento.style.color = cor;
}
function mudaCorFundo(cor) {
var elemento = document.getElementById("item");
if (estado == 0) {
elemento.textContent = "hahahah"
elemento.style.backgroundColor = "lightblue";
elemento.style.borderBottom = "3px solid purple";
estado = 1;
}
else {
elemento.style.backgroundColor = "white";
elemento.style.borderBottom = "none";
estado = 0;
}
}
</script>
</head>
<body>
<p>Deu certo <span id="item">o exemplo com contentText</span>!</p>
<button onclick="mudaCor('green');">Verde</button>
<button onclick="mudaCor('magenta');">Magenta</button>
<br><br>
<button onclick="mudaCorFundo('blue');">Cor de fundo Azul</button>
</body>
</html>Execute o código e veja que o texto está mudando na minha tag p. Espero ter ajudado.