在querySelector:如何获得第一个和最后一个元素?dom中使用的遍历顺序

Question

在div中，元素(不一定是第二代)具有move_id属性。

首先，想用最直接的方式获取set

的第一个和最后一个元素

尝试通过:

获取第一和最后一个

var first = div.querySelector('[move_id]:first');
var last  = div.querySelector('[move_id]: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

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选择器获取特定标签名称的最后一个元素。

数组方法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

获取最后输入元素的示例:

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

使用元素。firstElementChild和element.lastElementChild

如果您想获得第一子元素，使用: node.firstElementChild 。(如果你想要第一个子元素，即使它是非元素，如文本，然后使用: node.firstChild )。

如果您想获得最后一个子元素，使用: node.lastElementChild 。(同样，如果您想选择非元素的子元素，如文本，请使用use: node.lastChild )。

MDN WebDocs描述

来自上述链接的MDN webdocs:

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

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

宽浏览器支持

firstChild和lastChild有非常广泛的浏览器支持。

支持:

• Chrome - Version 1
• Edge - Version 12
• Firefox - Version 1
Internet Explorer - Version 6
• Opera - Version 12.1
• Safari - Version 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>