javascript - JS querySelector 只有第一个 child 没有迭代 child

Question

如何使用元素 querySelector

选择 X 类型的第一个子元素，它是元素的直接后代

例如:

<div id="target">
   <span>1</span>
   <span>2</span>
   <span>3</span>
   <div>
      <span>4</span>
   </div>
</div>

我想使用 querySelector 只选择目标 div 的第一个子 SPAN。

target.querySelector('span'); // This would return all spans in target

我知道但不想使用的其他替代方案:

使用 CSS :

#target > span

使用JS:

[].filter.call(target.children, f=>{ return f.tagName == 'SPAN' })

无论如何我都想使用 querySelector...

有没有办法在给定元素上调用 querySelectorAll 以仅选择第一个子元素？

Answer 1

querySelector 获取匹配选择器的第一个元素。只需使用直接后代选择器即可。您不需要任何其他伪选择器。

var target = document.querySelector("#target");
var child = target.querySelector("#target > span");