Necesito aplicar el filtro not(.pseudo-element) usando js pero no estoy seguro de cómo agregarlo hasta ahora. He logrado extraer #app del DOM usando:
const app = document.getElementById('app') app.style.filter = 'brightness(0.5)' Ahora mi objetivo es aplicar este brightness a todos los niños con excepción de uno, cómo lograrlo usando js
Podrías usar la respuesta de shotgun02 o algo como esto:
const elements = [...app.querySelectorAll('*:not(.pseudo-element)')]; elements.forEach((element) => { element.style.filter = 'brightness(0.5)'; }); En el ejemplo anterior, estoy usando la sintaxis extendida ( [...app.querySelectorAll()] ) porque personalmente prefiero trabajar con Objetos en lugar de NodeList, pero esa es una preferencia personal.
Otro enfoque sería usar el método .classList() :
const elements = [...app.querySelectorAll('*')]; elements.forEach((element) => { if (!element.classList.contains('pseudo-element')) { element.style.filter = 'brightness(0.5)'; } });Tenga en cuenta que el mejor enfoque probablemente sea hacer lo mismo con CSS si realmente no necesita JS para eso.
* { filter: brightness(0.5); } .pseudo-element { filter: none; }Puede probar el selector :not() como se muestra a continuación, que devolverá todos los elementos secundarios de la aplicación, excepto los elementos que tengan la clase .pseudo-element .
app.querySelectorAll('*:not([class="pseudo-element"])');Otra forma de escribir lo mismo es la siguiente: -
app.querySelectorAll('*:not(.pseudo-element)');El selector :not( selector ) también acepta comas
app.querySelectorAll('*:not(.pseudo-element,.pseudo-element-2)');