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

但它没有达到你想要的效果。

据我所知，这可能与

:nth-child()

CSS

pseudo-class

有关，在这种情况下，它与父级子列表中元素的索引不匹配。

当您处理其他 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);

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