在JavaScript中，使用querySelector选取嵌套的子元素时遇到问题

Question

我在JavaScript中遇到了一个与querySelector方法相关的问题，特别是当我试图访问嵌套的子元素时。我有一个已选中的元素，目标是获取该选中元素的第一个子元素，然后进一步获取那个内部元素的第一个子元素。

我已经尝试了以下代码：

let selected = document.querySelector(".main-box")
var desiredElement = selected.querySelector("div:nth-child(1) > div:nth-child(1)");

但似乎这段代码得到的结果与下面的代码相同：

var desiredElement = selected.querySelector("div:nth-child(1)");

看起来选择器的第二部分（> div:nth-child(1)）并未按预期工作。

我的HTML结构如下：


    
        目标元素

然而，当使用以下代码时，它能正常工作：

var desiredElement = document.querySelector(".main-box > div:nth-child(1) > div:nth-child(1)");

为什么这段代码不起作用呢？

let selected = document.querySelector(".main-box")
var desiredElement = selected.querySelector("div:nth-child(1) > div:nth-child(1)");

Ryan Lundy · Answer

第二部分应该是你的带有内文“Target Element”的div元素。由于:nth-child()选择器是根据元素在其父元素所有同级子元素中的位置来选取元素，所以选取方式需要稍作调整。

我已经尝试了以下方法：

var desiredElement = selected.querySelector("div:nth-child(1) > div:nth-child(1)");

但这种方法并未达到预期效果，原因可能在于:nth-child() CSS伪类在此场景下并不对应于该元素在父元素子元素列表中的索引位置。

换句话说，通过querySelector试图获取的这个div元素可能选取方式有误：var desiredElement = selected.querySelector("div:nth-child(1) > div:nth-child(1)");

当处理其他DOM元素的子元素时，更简洁的方法可能是这样的：

var selected = document.querySelector(".main-box");
var desiredElement2 = document.querySelector(".main-box :nth-child(1)");
var desiredElement3 = document.querySelector(".main-box :nth-child(1) > div:nth-child(1)");

console.log(selected);
console.log(desiredElement2);
console.log(desiredElement3);

以上代码示例中，HTML结构如下：


    
        目标元素

Nosredna · Answer

在当前情况下，为了达到你的目标——获取所选元素的第一个子元素，然后获取该内部元素的第一个子元素，你可以对选择器进行一个简单的修改：添加:not(.main-box)函数来表示你不希望从.main-box开始计数：

div:nth-child(1):not(.main-box) > div:nth-child(1)

工作示例：



let selected = document.querySelector('.main-box');
let desiredElement = selected.querySelector('div:nth-child(1):not(.main-box) > div:nth-child(1)');
desiredElement.classList.add('desiredElement');
div > div > div {
  width: 180px;
  height: 60px;
  border: 1px solid rgb(191, 191, 191);
}

.desiredElement {
  color: rgb(255, 0, 0);
  font-weight: 700;
}

    
        目标元素 1-1
        元素 1-2
        元素 1-3
    
    
        元素 2-1
        元素 2-2
        元素 2-3
    
    
         元素 3-1
         元素 3-2
         元素 3-3

tymeJV · Answer

baseElement.querySelector(selectors) 方法会返回

baseElement 的第一个匹配指定 selectors 组合的后代元素。在匹配时，会考虑整个元素层级结构，包括那些不属于 baseElement 及其后代集外的元素；换句话说，首先在整个文档中应用 selectors 来生成一个潜在元素列表，而不是仅针对 baseElement 应用。然后检查这些剩余元素是否为 baseElement 的后代。querySelector() 方法将返回其中的第一个匹配项。

由于你的

元素自身就是 div:nth-child(1)，所以选择其中也匹配 div:nth-child(1) > div:nth-child(1) 的第一个元素将会得到

的子元素。

为了达到期望的结果，你可以使用以下方法之一：

   document.querySelector(".main-box > div:nth-child(1) > div:nth-child(1)")

   document.querySelector(".main-box")?.querySelector(":scope > div:nth-child(1) > div:nth-child(1)")

   document.querySelector(".main-box")?.firstElementChild?.firstElementChild

   document.querySelector(".main-box")?.querySelector("div:nth-child(1)")?.querySelector("div:nth-child(1)")