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

Question

以下命令

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

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

有没有办法直接获得最后一个元素而不先诉诸.length？

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

另一种选择是

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

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>