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

Answer 1

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

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

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>

Answer 3

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>

Answer 4

，如果你想使用querySelector反正为什么不使用这样的：

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

OR

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