在 querySelector 中：如何获取第一个和最后一个元素？ dom中使用啥遍历顺序？

Posted 2023-03-05

【中文标题】在 querySelector 中：如何获取第一个和最后一个元素？ dom中使用啥遍历顺序？

【英文标题】：in querySelector: how to get the first and get the last elements? what traversal order is used in the dom?在 querySelector 中：如何获取第一个和最后一个元素？ dom中使用什么遍历顺序？

【发布时间】：2011-08-06 18:55:44

【问题描述】：

在 div 中，具有属性为 move_id 的元素（不一定是第 2 代）。

首先，想以最直接的方式获取集合的第一个和最后一个元素

尝试通过以下方式获得第一个和最后一个：

var first = div.querySelector('[move_id]:first');
var last  = div.querySelector('[move_id]:last');

这个炸弹因为 :first 和 :last 是我的一厢情愿 (?)

不能使用querySelectorAll 的数组方法，因为NodeList 不是数组：

var first = (div.querySelectorAll('[move_id]'))[0];
var last  = (div.querySelectorAll('[move_id'])).pop();

这个炸弹因为NodeList没有方法pop()

（是的，可以在 NodeList 之上使用 Array 方法：

var first = div.querySelector('[move_id]');
var last = Array.prototype.pop.call(div.querySelectorAll('[move_id']));

这行得通，也是我现在正在使用的，但认为必须有更直接的东西，我只是想念）

其次，需要验证元素是否按http://en.wikipedia.org/wiki/Tree_traversal的pre-oder深度优先遍历列出

【参考方案1】：

要访问第一个和最后一个元素，请尝试。

var nodes = div.querySelectorAll('[move_id]');
var first = nodes[0];
var last = nodes[nodes.length- 1];

为了稳健性，添加索引检查。

是的，节点的顺序是深度优先的。 DOM 的document order 定义为，

有一个排序，文档顺序，定义在文档中的所有节点上，对应于每个节点的XML表示的第一个字符在一般实体展开后的文档的XML表示中出现的顺序。因此，文档元素节点将是第一个节点。元素节点出现在它们的子节点之前。因此，文档顺序按元素节点在 XML 中出现的顺序对元素节点进行排序（在实体扩展之后）。元素的属性节点出现在元素之后和其子元素之前。属性节点的相对顺序取决于实现。

【讨论】：

重新遍历 - 谢谢 - 我很佩服那些能记住并找到这些问题的支持文档的人

但是对于代码，出于我自己的审美，更喜欢我的解决方案：它不需要例如声明节点变量，但这只是个人喜好。我希望有些人正确使用 :first 和 :last 我错过了。

【参考方案2】：

:last 不是 css 规范的一部分，这是特定于 jQuery 的。

你应该在寻找last-child

var first = div.querySelector('[move_id]:first-child');
var last  = div.querySelector('[move_id]:last-child');

【讨论】：

很好，当我们想要最后一个 div 时，不再需要使用 querySelectorAll。除非它仅在最后一个子节点具有属性[move_id]时才有效，否则它将返回null，您需要再次使用querySelectorAll。

:last-child 和 :first-child 与父元素相关，与列表无关！这意味着可能有几个第一个孩子和几个最后一个孩子，这不是我们所要求的。见这里：jsfiddle.net/r61tcvc3

:last 和 :last-child 不一样。它可以为您提供相同的结果，但这取决于 html 结构。

这太棒了！我可以使用多少个伪类？ nth:child() 会起作用吗？

【参考方案3】：

获取last输入元素的示例：

document.querySelector(".groups-container >div:last-child input")

【讨论】：

其实没有。这个答案只能从DIV:last-child 得到INPUT:first-child。见这里：jsfiddle.net/nqtpk5gd/1

【参考方案4】：

在此处为答案添加一个解决方案（与其他人提出的有点不同）：

使用:last-of-type选择器获取某个特定标签名称的最后一个元素：

console.log(
  ":last-of-type  -  ",
  document.querySelector('mark:last-of-type') // <---- 
)

console.log(
  ":last-child    -  ",
  document.querySelector('mark:last-child')
)

<p>
this is <mark>highlighted</mark> and this is <mark>is also</mark> but <strong>not this</strong>.
</p>

【参考方案5】：

使用 element.firstElementChild 和 element.lastElementChild

如果您想获得 first 子 元素，请使用：node.firstElementChild。 （如果你想要第一个孩子，即使它是非元素的文本，也可以使用：node.firstChild）。

如果您想获取 last 子 元素，请使用：node.lastElementChild。 （同样，如果您想选择非元素子项，例如文本，请使用：node.lastChild）。

MDN 网络文档说明

来自上述链接的 MDN 网络文档：

firstElementChild — Element.firstElementChild 只读属性返回元素的第一个子元素，如果没有子元素，则返回 null。

lastElementChild — Element.lastElementChild 只读属性返回元素的最后一个子元素，如果没有子元素，则返回 null。

广泛的浏览器支持

firstChild 和 lastChild 具有非常广泛的浏览器支持。

支持：

Chrome — 版本 1 Edge — 版本 12 Firefox — 版本 1 Internet Explorer — 版本 6 Opera — 12.1 版 Safari — 版本 1

工作演示——firstElementChild & lastElementChild

var mydiv = document.getElementById('my-div');
mydiv.firstElementChild.style.backgroundColor = 'green';
mydiv.lastElementChild.style.backgroundColor = 'green';

<div id="my-div">
    <p>My first paragraph!</p>
    <p>Here is an intermediate paragraph!</p>
    <p>Here is another intermediate paragraph!</p>
    <p>Here is yen another intermediate paragraph!</p>
    <p>My last paragraph!</p>
</div>

工作演示 - firstChild 和 lastChild

var mydiv = document.getElementById('my-div');
mydiv.firstChild.style.backgroundColor = 'green';
mydiv.lastChild.style.backgroundColor = 'green';

<div id="my-div"><p>My first paragraph!</p><p>Here is an intermediate paragraph!</p><p>Here is another intermediate paragraph!</p><p>Here is yen another intermediate paragraph!</p><p>My last paragraph!</p></div>