在 querySelector 中: 如何得到第一个元素和最后一个元素? 在 dom 中使用了什么遍历顺序？

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 order is defined as,

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.

:last is not part of the css spec, this is jQuery specific.

you should be looking for last-child

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

Example to get the last input element:

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

Adding to the answers here a solution (a bit different to the others proposed):

Using the :last-of-type selector to get the last element of a certain specific tag name.

Array method at() is also helpful in combination with querySelectorAll, but it requires to destruct the result, to get a "real" array, because querySelectorAll doesn't have the at method at its disposal (so sad...)

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


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


console.log(
"querySelectorAll + at:",
[...document.querySelectorAll('mark')].at(-1)
)

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

Use element.firstElementChild and element.lastElementChild

If you want to get the first child element, use: node.firstElementChild. (if you want the first child, even if it's a non-element like text, then use: node.firstChild).

If you want to get the last child element, use: node.lastElementChild. (again, if you want to select a non-element child, like text, use use: node.lastChild).

MDN WebDocs Description

From the above-linked MDN webdocs:

firstElementChild — The Element.firstElementChild read-only property returns an element's first child Element, or null if there are no child elements.

lastElementChild — The Element.lastElementChild read-only property returns an element's last child Element, or null if there are no child elements.

Wide Browser Support

firstChild and lastChild have extremely wide browser support.

Supported in:

• Chrome — Version 1
• Edge — Version 12
• Firefox — Version 1
• Internet Explorer — Version 6
• Opera — Version 12.1
• Safari — Version 1

Working Demo — 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>

Working Demo — 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>

You can get the first and last element directly.

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