Tenho uma dúvida sobre o conteúdo, foi usado ali no código a tag "p" para a varável paragrafo, no HTML do projeto só existe uma tag "p", mas e se existisse mais parágrafos "p" no HTML como deveria fazer no Javascript nessa situação?
Tenho uma dúvida sobre o conteúdo, foi usado ali no código a tag "p" para a varável paragrafo, no HTML do projeto só existe uma tag "p", mas e se existisse mais parágrafos "p" no HTML como deveria fazer no Javascript nessa situação?
Olá, Marcelo! Tudo bem?
Se você tiver mais de um parágrafo <p>
no seu HTML e quiser manipulá-los individualmente com JavaScript, você pode usar classes ou IDs para diferenciá-los. Aqui está como você pode fazer isso:
Se todos os parágrafos tiverem a mesma classe, você pode usar document.querySelectorAll()
para selecionar todos eles e depois iterar sobre a lista retornada:
<p class="texto_paragrafo">Parágrafo 1</p>
<p class="texto_paragrafo">Parágrafo 2</p>
let paragrafos = document.querySelectorAll('.texto_paragrafo');
paragrafos.forEach((paragrafo, index) => {
paragrafo.innerHTML = `Este é o parágrafo ${index + 1}`;
});
Se cada parágrafo tiver um ID único, você pode usar document.getElementById()
para selecioná-los individualmente:
<p id="paragrafo1">Parágrafo 1</p>
<p id="paragrafo2">Parágrafo 2</p>
let paragrafo1 = document.getElementById('paragrafo1');
let paragrafo2 = document.getElementById('paragrafo2');
paragrafo1.innerHTML = 'Este é o primeiro parágrafo';
paragrafo2.innerHTML = 'Este é o segundo parágrafo';
Dessa forma, você pode manipular cada parágrafo de acordo com a sua necessidade.
Espero ter ajudado e bons estudos!