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

如果您想获得其父级的第一个孩子，可以使用: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>

Answer 2

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

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

Answer 3

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

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

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

或

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

Answer 5

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

你必须选择

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;
}

JS querySelector只有第一个没有迭代子节点的子节点

5 个答案: