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

Question

在 div 中，包含具有属性

move_id

的元素（不一定是第二代）。

首先，想要最直接的方式来获取集合的第一个和最后一个元素

尝试通过以下方式获得第一个和最后一个：

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 之上使用数组方法：

var first = div.querySelector('[move_id]');
var last = Array.prototype.pop.call(div.querySelectorAll('[move_id']));

这是可行的，也是我现在正在使用的，但我认为必须有一些更直接的东西，我只是错过了）

其次，需要验证元素是否按照 http://en.wikipedia.org/wiki/Tree_traversal

通过预排序深度优先遍历列出

Answer 1

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

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

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

是的，节点的顺序是预序深度优先。 DOM 的

document order

定义为，

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

Answer 2

在此处添加解决方案的答案（与其他建议的有点不同）：

使用

:last-of-type

选择器获取某个特定 tag 名称的最后一个元素。

数组方法

at()

与

querySelectorAll

结合使用也很有帮助，但它需要破坏结果，以获得“真正的”数组，因为

querySelectorAll

没有可供使用的

at

方法（好难过……）

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>

Answer 3

获取 last 输入元素的示例：

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

Answer 4

let first = div.querySelector('[move_id]');
let last  = Array.from(div.querySelectorAll('[move_id]')).pop();

Answer 5

使用 element.firstElementChild 和 element.lastElementChild

如果您想获取first子元素，请使用：

node.firstElementChild

。 （如果您想要第一个孩子，即使它是像文本这样的非元素，请使用：

node.firstChild

）。

如果您想获取last子元素，请使用：

node.lastElementChild

。 （同样，如果您想选择非元素子元素，例如文本，请使用 use:

node.lastChild

）。

MDN WebDocs 描述

来自上面链接的 MDN 网络文档：

firstElementChild — Element.firstElementChild 只读属性返回元素的第一个子元素，如果没有子元素则返回 null。

lastElementChild — Element.lastElementChild 只读属性返回元素的最后一个子元素，如果没有子元素则返回 null。

广泛的浏览器支持

firstChild

和

lastChild

具有 极广泛的浏览器支持。

支持：

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

工作演示 —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>

工作演示 —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>

Answer 6

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

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

Answer 7

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