Is there a way to select all entities with a particular component attached?
I was trying document.querySelectorAll(".shadow");
and various other combinations to no avail.
I believe you're looking for a attribute selector - which allows grabbing HTML nodes by their attributes. a-frame components are pretty much custom made HTML attributes - you're setting them using setAttribute()
:)
In your case it would be document.querySelectorAll("[shadow]")
Check it out in this fiddle.
Quoting this answer:
That said, the Selectors Level 4 Working Draft includes a :has() pseudo-class that will provide this capability. It will be similar to the jQuery implementation.
li:has(> a.active) { /* styles to apply to the li tag */ } However, as of 2020, this is still not supported by any browser.
In the meantime, you'll have to resort to JavaScript if you need to select a parent element.
In short, there is no querySelectorAll
to do this for you.
To do this, you need to select all children with class shadow
, then select all their parents like so:
var children = document.querySelectorAll(".shadow");
var parents = [];
children.forEach(child => {
parents.push(child.parentElement);
})
console.log(parents);
<div class="parent1">
<div class="shadow"></div>
</div>
<div class="parent2">
<div class="shadow"></div>
</div>
querySelectorAll("a-image")
etc. Seems hacky, but there is no way to do this with CSS (querySelector
is in effect just a CSS selector). See this question: stackoverflow.com/questions/1014861/…
Commented
Oct 26, 2020 at 9:58