如何使用 JavaScript 正确查询选择器结果？

Question

我有下面这一段HTML.

<div id="outer"><b class="dest">something</b>
    <div id="test"><b class="dest">unwanted stuff</b></div>
</div>

假设我已经使用 document.querySelector("#outer") 引用了 outer 元素。如何查询所有 b 具有 dest class 的元素并且是其父元素的第一个子元素？我尝试了 document.querySelector("#outer").querySelector("b.dest") 和 document.querySelector("#outer").querySelector("b.dest:first-child")，但只返回了第一个 b 元素。如何获得两个 b 元素（通过 document.querySelector("#outer") 的结果）？

Answer 1

.querySelector最多只选择一个元素

.querySelectorAll Returns 一个 array-like 节点列表。

你想要：

var bElements = document.getElementById("outer").querySelectorAll('b.dest:first-child');

这将 return 一个包含所有元素的数组：

有一个 ID 为 outer
有classdest
他们的first-childparent

然后您可以像访问数组一样访问每个元素，例如。

bElements[0]

演示：

var bElements = document.getElementById("outer").querySelectorAll('b.dest:first-child');

console.log(bElements)

<div id="outer"><b class="dest">something</b>
    <div id="test"><b class="dest">unwanted stuff</b></div>
</div>

如何使用 JavaScript 正确查询选择器结果？

How use JavaScript to query on selector result properly?

javascript

css-selectors