Javascript 在 querySelector 中：如何获取第一个元素和最后一个元素？dom中使用什么遍历顺序？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5684811/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
in querySelector: how to get the first and get the last elements? what traversal order is used in the dom?
提问by cc young
in a div, have elements (not necessarily 2nd generation) with attribute move_id.
在 div 中，具有属性为 的元素（不一定是第 2 代）move_id。
First, would like most direct way of fetching first and last elements of set
首先，想要获取集合的第一个和最后一个元素的最直接方式
tried getting first and last via:
尝试通过以下方式获得第一个和最后一个：
var first = div.querySelector('[move_id]:first');
var last = div.querySelector('[move_id]:last');
this bombs because :first and :last were wishful thinking on my part (?)
这个炸弹是因为 :first 和 :last 是我的一厢情愿（？）
cannot use the Array methods of querySelectorAllsince NodeListis not an Array:
不能使用 Array 方法，querySelectorAll因为NodeList不是数组：
var first = (div.querySelectorAll('[move_id]'))[0];
var last = (div.querySelectorAll('[move_id'])).pop();
this bombs because NodeListdoes not have method pop()
这个炸弹是因为NodeList没有方法pop()
(yes, one could could use Array methods on top of the NodeList:
（是的，可以在 NodeList 之上使用 Array 方法：
var first = div.querySelector('[move_id]');
var last = Array.prototype.pop.call(div.querySelectorAll('[move_id']));
this works, and is what I'm using now, but thinking there has to be something more direct that I'm simply missing)
这有效，并且是我现在正在使用的，但认为必须有一些更直接的东西，我只是想念）
Second, need to verify that the elements are listed by pre-oder depth-first traversal as per http://en.wikipedia.org/wiki/Tree_traversal
其次，需要验证元素是否按照http://en.wikipedia.org/wiki/Tree_traversal通过 pre-oder 深度优先遍历列出
回答by Anurag
To access the first and last elements, try.
要访问第一个和最后一个元素，请尝试。
var nodes = div.querySelectorAll('[move_id]');
var first = nodes[0];
var last = nodes[nodes.length- 1];
For robustness, add index checks.
为了健壮性，添加索引检查。
Yes, the order of nodes is pre-order depth-first. DOM's document orderis defined as,
是的，节点的顺序是深度优先的。DOM 的document order定义为，
There is an ordering, document order, defined on all the nodes in the document corresponding to the order in which the first character of the XML representation of each node occurs in the XML representation of the document after expansion of general entities. Thus, the document element node will be the first node. Element nodes occur before their children. Thus, document order orders element nodes in order of the occurrence of their start-tag in the XML (after expansion of entities). The attribute nodes of an element occur after the element and before its children. The relative order of attribute nodes is implementation-dependent.
在文档中的所有节点上定义了一个排序，即文档顺序，对应于每个节点的XML表示的第一个字符在一般实体扩展后的文档的XML表示中出现的顺序。因此，文档元素节点将是第一个节点。元素节点出现在其子节点之前。因此，文档顺序按元素节点在 XML 中开始标记的出现顺序（实体扩展后）对元素节点进行排序。元素的属性节点出现在元素之后和子元素之前。属性节点的相对顺序取决于实现。
回答by Guillaume Massé
:lastis not part of the css spec, this is jQuery specific.
:last不是 css 规范的一部分，这是 jQuery 特定的。
you should be looking for last-child
你应该寻找 last-child
var first = div.querySelector('[move_id]:first-child');
var last = div.querySelector('[move_id]:last-child');
回答by g.breeze
Example to get the lastinput element:
获取最后一个输入元素的示例：
document.querySelector(".groups-container >div:last-child input")
document.querySelector(".groups-container >div:last-child input")
回答by Iuri Carraro
Example to get last article or any other element:
获取最后一篇文章或任何其他元素的示例：
document.querySelector("article:last-child")
