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

Question

在 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 验证元素是否通过预排序深度优先遍历列出

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

Answer 1

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

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

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

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

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

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

Answer 2

您可以直接获取第一个和最后一个元素。

 //-- first element
console.log( document.querySelector("#my-div").querySelectorAll( "p" )[0] );
//-- last element
console.log( document.querySelector("#my-div").querySelectorAll( "p" )[document.querySelector("#my-div").querySelectorAll( "p" ).length-1] );

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

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