O Truque de Consulta DOM que Todo Desenvolvedor Front-End Precisa
O Truque de Consulta DOM que Todo Desenvolvedor Front-End Precisa
Acabei de descobrir um truque legal para acertar consultas DOM. Ele se chama :scope, e é um salvador. Pronto para deixar seus seletores afiados como uma navalha?
Selecionar os elementos certos às vezes parece um jogo de adivinhação. Essa abordagem permite que você alvo exatamente o que precisa, sem hacks.
Aqui está um exemplo HTML:
<ul>
<li><strong>A</strong></li>
<li><strong>B</strong></li>
<li><strong>C</strong></li>
<li><strong>D</strong></li>
</ul>
Aqui está o desafio
Você quer apenas os elementos <li> ímpares sob o <ul>. Minha primeira tentativa foi:
document.querySelectorAll(" > :nth-child(odd)")
Não. A consulta acima falha porque o descendente direto (>) não tem âncora. Isso não é um seletor CSS válido. Então, tentei:
document.querySelectorAll("* > :nth-child(odd)")
Ele executa, mas pega todos os <strong> elementos, longe do alvo.
Aqui está a solução: Aponte para a pseudo-classe :scope. Tente isso:
document.querySelectorAll(":scope > :nth-child(odd)")
Veja esta demonstração para vê-lo em ação:
<!doctype html>
<html lang="en">
<body>
<ul onclick="highlightOdds(event)">
<li><strong>A</strong></li>
<li><strong>B</strong></li>
<li><strong>C</strong></li>
<li><strong>D</strong></li>
</ul>
<script>
function highlightOdds(event) {
let targets = event.currentTarget
.querySelectorAll(":scope > :nth-child(odd)");
for (let node of targets) {
node.style = "background-color: limegreen; color: white;";
}
}
</script>
</body>
</html>
Clique no <ul>, e os elementos <li> de número ímpar são destacados em um verde-limão elegante.
Todo elemento <li> ímpar é estilizado, sem extras.
Dica profissional: :scope tem sido sólido em navegadores desde que o Edge se atualizou em 2019.
Experimente no seu próximo projeto.
via Amit Kumar