在香草JS中，如何将querySelectorAll与2个伪选择器一起使用？

Question

I'm re-writing some jQuery as vanilla JS - it looks like this:

$('.main-container').children('.module:has(a)').not('#promo');

What I've tried:

document.querySelectorAll('.main-container .module:has(a):not(#promo)');

But using two pseudo-selectors in one statement is what's throwing me off. Using only the :not(#promo) selector works as it should:

document.querySelectorAll('.main-container .module:not(#promo)');

But things fall apart when I try adding :has(a) . What am I missing?

Answer 1

Rearrange your selector like so:

var modules = document.querySelectorAll('.main .module:not(#exclude)');

Then filter() for .module s that .contains(a)

See demo and let me know if the HTML is correct or not since it's not posted

Demo

Index 2, 5, and 9 should be excluded

 var modules = Array.from(document.querySelectorAll('.main .module:not(#exclude)')); var hasA = modules.filter(function(module, index, hasA) { let a = module.querySelector('a'); return module.contains(a); }); hasA.map(function(module, index, hasA) { module.insertAdjacentText('beforeend', ' INCLUDED'); return console.log(`module ${index}: ${module.textContent}`); }); 

 .as-console-wrapper { width: 60%; margin-left: 40%; min-height: 100%; } 

 <ol class='main' start='0'> <li class='module'><a href='#/'>LINK</a></li> <li class='module'><a href='#/'>LINK</a></li> <li id='exclude' class='module'> <a href='#/'>LINK</a> </li> <li class='module'><a href='#/'>LINK</a></li> <li class='module'><a href='#/'>LINK</a></li> <li class='component'> <a href='#/'>LINK</a> </li> <li class='module'><a href='#/'>LINK</a></li> <li class='module'><a href='#/'>LINK</a></li> <li id='include' class='module'> <a href='#/'>LINK</a> </li> <li class='module'>NO LINK</li> </ol>