logo标签列表

使用querySelectorAll()方法，返回的结果是否有序？

javascriptcsscss-selectorsselectors-api
80

我正在尝试编写一段适用于多个页面的js代码。

我打算使用querySelectorAll()从DOM中获取元素。

我需要对这些元素进行排序。为了做到这一点，我可以使用xPath或者选择器（我更喜欢使用选择器，但xPath也可以）。问题是：
querySelectorAll()返回的NodeList中的元素是否按照HTML中标签出现的顺序排序？

注意：我想加上标签: querySelectorAll

1个回答
95
返回的节点列表是有序的。一项快速测试证明了这一点：
document.querySelectorAll("body, head")[0]; //Returned [object HTMLHeadElement]

在HTML文档中，显然<head>标签出现在<body>之前。即使选择器显示body在head之前，NodeList的第一个元素也是一个<head>元素。

来自http://www.w3.org/TR/selectors-api/#queryselectorall：

NodeSelector接口上的querySelectorAll()方法必须在调用时返回一个NodeList，其中包含节点子树中所有匹配的Element节点，按文档顺序排序。如果没有这样的节点，则该方法必须返回一个空NodeList。

6
我已经使用Firefox、Chrome和Opera进行了测试。它们都按顺序显示，但我想知道这在所有浏览器中是否都会发生。 - brunoais
3
这是CSS选择器。逗号分隔并不意味着任何顺序（该部分在关于选择器如何选择的规范中有说明）。 - brunoais
15
Google搜索技巧：如果您正在寻找正式规范，请在搜索查询中添加“w3 spec”，如果您正在寻找关于CSS / JavaScript / HTML / ...的可靠来源，请添加“mdn”。请注意，翻译后的内容不改变原意，但会使其更加通俗易懂。 - Rob W
5
+1，但我建议先移动规范中的引用，因为一个浏览器在某个时间返回按文档顺序排序的结果并不能证明太多东西。 - Clément
4
术语“文档顺序”指的是对所讨论的DOM树或子树进行深度优先先序遍历。 - Michael T
显示剩余3条评论
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接