Aframe select 按组件

Question

有没有办法 select 所有实体都附加了特定组件？

我尝试了 document.querySelectorAll(".shadow"); 和其他各种组合都无济于事。

Answer 1

引用 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.

总之没有querySelectorAll给你做这个

为此，您需要 select 所有 children 和 class shadow，然后 select 所有 parents 像这样:

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>

An article on the limits of CSS selectors

Answer 2

我相信您正在寻找 attribute selector - which allows grabbing HTML nodes by their attributes. a-frame components are pretty much custom made HTML attributes - 您正在使用 setAttribute() 进行设置:)

你的情况是 document.querySelectorAll("[shadow]")

在this fiddle中查看。

Aframe select 按组件

Aframe select by component

html

javascript

aframe