不使用 .length 从节点列表中获取最后一项

Question

以下命令

document.querySelectorAll('#divConfirm table')[1].querySelectorAll('tr')

给出一个包含 3 个表行 (tr) 元素的节点列表。如果我知道列表大小，我可以通过 .item(2) 访问最后一个元素。

有没有办法直接获取最后一个元素而不先求助于 .length？

原文由 Doug Fir 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

至少有一种方法

var els = document.querySelectorAll('#divConfirm table')[1].querySelectorAll('tr');

var last = [].slice.call(els).pop();

但是，下面的语句

但是如果我不知道运行脚本之前的长度

没有意义，你已经有了元素的集合，所以你总是知道长度

var els = document.querySelectorAll('#divConfirm table')[1].querySelectorAll('tr');

var last = els[els.length - 1];

the8472 的回答所暗示的 另一种选择是

document.querySelector('#divConfirm table:nth-child(2) tr:last-child');

原文由 adeneo 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

由于 _NodeList 没有 pop 方法_。

在新数组中使用 扩展语法，然后 pop() 获取最后一个元素。

这基本上将 Nodelist 复制为常规数组，因此 pop() 和其他数组方法变得可用。

 console.log(
  // Last elem with pop()
  [...document.querySelectorAll("div")].pop()
)

console.log(
  //  2nd elem
  [...document.querySelectorAll("div")].slice(1)[0]
)

console.log(
  // By index :) just in case
  document.querySelectorAll("div")[0]
)

 <div>The sun</div>
<div>is</div>
<div>shinning</div>

原文由 NVRM 发布，翻译遵循 CC BY-SA 4.0 许可协议