Tenha uma dúvida respeito a esse document.querySelector() e o InnerHTML. No HTML podemos repetir a mesma tag diversas vezes, como que diferenciamos qual tag estou realmente querendo mudar?. Eu sei que existe o CSS para classificar, mas caso eu não soubesse, como isso seria feito??
Oi Nahomi
Realmente, quando usamos document.querySelector() para selecionar elementos, ele vai pegar apenas o primeiro elemento que encontrar que corresponda ao seletor.
Se no seu HTML existem várias tags iguais (por exemplo, várias
), para diferenciar exatamente qual você quer alterar sem usar classes ou IDs, você pode usar:
Selecionar pelo índice usando document.querySelectorAll():
Essa função retorna uma lista de todos os elementos que batem com o seletor. Daí você pode acessar pelo índice, tipo:
const paragrafos = document.querySelectorAll('p');
paragrafos[2].innerHTML = 'Novo texto'; // altera o terceiro <p>
Usar seletores mais específicos:
Mesmo sem classes ou IDs, você pode combinar seletores CSS para ser mais específico, tipo:
document.querySelector('div > p'); // seleciona o primeiro <p> filho direto de uma <div>
Mas o ideal mesmo é usar classes ou IDs, porque fica muito mais fácil identificar exatamente o elemento que quer modificar.