El Truco de Consulta DOM que Todo Desarrollador Front-End Necesita
El Truco de Consulta DOM que Todo Desarrollador Front-End Necesita
Acabo de descubrir un truco elegante para dominar las consultas DOM. Se llama :scope, y es un salvavidas. ¿Listo para hacer que tus selectores sean afilados como una navaja?
Seleccionar los elementos correctos a veces parece un juego de adivinanzas. Este enfoque te permite apuntar exactamente a lo que necesitas, sin trucos.
Aquí tienes un ejemplo de HTML:
<ul>
<li><strong>A</strong></li>
<li><strong>B</strong></li>
<li><strong>C</strong></li>
<li><strong>D</strong></li>
</ul>
Aquí está el desafío
Quieres solo los elementos <li> impares bajo el <ul>. Mi primer intento fue:
document.querySelectorAll(" > :nth-child(odd)")
No. La consulta anterior falla porque el descendiente directo (>) no tiene ancla. Esto no es un selector CSS válido. Así que probé:
document.querySelectorAll("* > :nth-child(odd)")
Funciona, pero captura todos los <strong> elementos, muy lejos del objetivo.
Aquí está la solución: Apóyate en la pseudo-clase :scope. Prueba esto:
document.querySelectorAll(":scope > :nth-child(odd)")
Consulta este demo para verlo en acción:
<!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>
Haz clic en el <ul>, y los elementos <li> de números impares se iluminan en un llamativo verde lima.
Cada <li> impar se estiliza, sin extras.
Consejo profesional: :scope ha sido sólido en navegadores desde que Edge se puso al día en 2019.
Prueba en tu próximo proyecto.
vía Amit Kumar