Question

我有一个非常简单的HTML结构，如下所示：

<div>
    <div>a<div>a1</div></div>
    <div>b</div>
    <p>c</p>
    <div>d</div>
</div>

document.body.querySelector('div > div:last-of-type')返回<div>a1</div>，而不是<div>d</div>。

我认为document.body.querySelector('div > div:last-of-type')应与document.body.querySelector('div > div:nth-of-type(3)')相同，后者返回<div>d</div>。

总结一下我的问题：

为什么document.body.querySelector('div > div:last-of-type')会返回<div>a1</div>，而不是<div>d</div>？这是一个错误吗？
选择<div>d</div>的正确方法是什么？

Answer 1

如果要从初始容器div的div子项中选择，请为div指定一个类或ID，例如.container，然后将其选为document.body.querySelector('div.container > div:last-of-type');

您当前的代码是从div中选择的div是任何其他div的最后一个div子项，您没有指定您只想查看容器div的子项

Answer 2

根据document#querySelector spec

Document，DocumentFragment和上的querySelector（）方法元素接口必须返回其中的第一个匹配的Element节点上下文对象的子树。

第一个匹配元素是什么？

我们可以将document#uerySelectorAll与相同的选择器一起使用，您可以看到数组中的第一个结果是<div>a1</div>。

const result = Array.from(document.body.querySelectorAll('div > div:last-of-type'));

console.log(result);

<html>
<body>
<div>
    <div>a<div>a1</div></div>
    <div>b</div>
    <p>c</p>
    <div>d</div>
</div>

如何获得<div>d</div>？

创建一个只匹配您想要的选择器：

console.log(document.body.querySelector('body > div > div:last-of-type'));

console.log(document.body.querySelector('p + div'));

<html>
<body>
<div>
    <div>a<div>a1</div></div>
    <div>b</div>
    <p>c</p>
    <div>d</div>
</div>

Answer 3

所以这是获得最后一个孩子的规范方式

＆＃13;

console.log(document.body.querySelector('div').lastElementChild)

＆＃13;

<div>
    <div>a<div>a1</div></div>
    <div>b</div>
    <p>c</p>
    <div>d</div>
</div>

＆＃13;

Answer 4