在 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 结构如下：

<div class="main-box">
    <div>
        <div>Target Element</div>
        <div></div>
        <div></div>
    </div>
    <div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div>
         <div></div>
         <div></div>
         <div></div>
    </div>
</div>

但当我使用这段代码时效果很好

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)");

Answer 1

第二部分应该是带有内部文本目标元素的 div。选择必须有点不同，因为:nth-child()选择器根据子元素在父元素内所有兄弟元素中的位置来选择子元素。

我已经尝试过这种方法：

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

但它并没有给出你想要的效果。

据我所知，这可能与 CSS 伪类有关:nth-child()，在这种情况下，CSS 伪类与父级子列表中元素的索引不匹配。

换句话说，您尝试通过 querySelector 获取的 div 可能是错误的：var desiredElement = selected.querySelector("div:nth-child(1) > div:nth-child(1)");

当您处理其他 DOM 元素的子元素时，这种方法更加简洁。

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

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