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

【问题标题】：JS querySelector only first child without iterating childrenJS querySelector 只有第一个孩子没有迭代孩子
【发布时间】：2017-06-14 07:38:23
【问题描述】：

如何使用元素 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 以仅选择第一个子元素？

【问题讨论】：

document.querySelector('#target > span').

标签： javascript html css

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

如果要获取其父级的第一个子级，可以使用:first-child

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

或者，如果您想指定类型，例如 span，您可以使用 :first-of-type

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>

【讨论】：

这适用于示例 html，但如果跨度不是第一个孩子，则它不起作用。这样做的目的是获取类型的第一个元素，而不是恰好也是 :first-child 的跨度。
你是对的@WillReese，感谢您指出这一点，我编辑了我的答案，也许现在更清楚了

【解决方案3】：

如果您不想依赖#target 选择器，可以使用:scope pseudo-class：

const target = document.querySelector("#target");
const child = target.querySelector(":scope > span");

【讨论】：

后来出现了，但这应该是公认的答案。

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

如果您仍然想使用 querySelector，为什么不使用它：

target.querySelector('#target span').first();

或

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

【讨论】：

【解决方案6】：

在这个解决方案中，我假设你知道有多少项目

你必须选择

var x = document.querySelectorAll("span");
 x[0].style.backgroundColor = "red";
 x[1].style.backgroundColor = "red";
 x[2].style.backgroundColor = "red";

结果将与

相同

#target > span {
  background-color:red;
}

【讨论】：