JS querySelector 只有第一个孩子没有迭代孩子

Question

我如何选择 X 类型的第一个子元素，它是使用元素的元素的直接后代 querySelector

例如 ：

 <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，只选择第一个子元素？

原文由 user4602228 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

原文由 Will Reese 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以使用 :first-child 如果您想获得其父母的第一个孩子

target.querySelector('span:first-child');

或者你可以使用 :first-of-type 如果你想指定类型就像你的情况是 span

 target.querySelector('span:first-of-type');

参见示例：

 var target = document.querySelector('span:first-of-type');
target.style.color = 'red';

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

原文由 Chiller 发布，翻译遵循 CC BY-SA 3.0 许可协议