使用 querySelectorAll()。方法返回的结果是不是有序？
Posted
技术标签:
【中文标题】使用 querySelectorAll()。方法返回的结果是不是有序？【英文标题】：Using querySelectorAll(). Is the result returned by the method ordered?使用 querySelectorAll()。方法返回的结果是否有序？ 【发布时间】：2012-01-02 11:27:15 【问题描述】：我正在尝试制作一个适用于多个页面的 js 代码。 我正在尝试使用 querySelectorAll() 从 DOM 中获取元素。
我需要订购元素。为此，我可以使用 xPath 或选择器（我更喜欢使用选择器，但 xPath 也可以）。问题是： querySelectorAll() 返回的 NodeList 中的元素是否按照标签在 html 中出现的顺序排列？
注意：我想添加标签：querySelectorAll
【问题讨论】：
【参考方案1】：返回的节点列表是有序的。快速测试证明了这一点：
document.querySelectorAll("body, head")[0]; //Returned [object HTMLHeadElement]
显然，<head> 标签出现在 HTML 文档中的 <body> 之前。 NodeList 的第一个元素也是<head> 元素，即使选择器在`head 之前显示body。
来自http://www.w3.org/TR/selectors-api/#queryselectorall：
NodeSelector 接口上的
querySelectorAll()方法必须，当 调用，返回一个包含所有匹配元素的 NodeList 节点子树中的节点，按文档顺序。如果没有 此类节点，该方法必须返回一个空的 NodeList。
【讨论】：
我已经用 firefox、chrome 和 Opera 进行了测试。所有这些都显示它们是有序的，但我只是想知道这是否在所有浏览器中都会发生。 这是一个 CSS 选择器。 ',' 的分隔并不意味着任何顺序（该部分在关于选择器如何选择的部分的规范中） @brunoais 查看链接的 w3 规范。 这句话正是我想要的！这回答了问题，谢谢。 （/我还在想为什么他搜索的时候没有找到） @brunoais Google 搜索提示：如果您正在寻找官方规范，请在搜索查询中添加“w3 spec”，如果您正在寻找有关 CSS/javascript 的可靠来源，请添加“mdn” /HTML/...以上是关于使用 querySelectorAll()。方法返回的结果是不是有序？的主要内容，如果未能解决你的问题，请参考以下文章
如何循环遍历document.querySelectorAll()方法返回的结果
querySelectorAll 和 getElementsBy* 方法返回啥？
querySelectorAll 和 getElementsBy* 方法返回啥？
querySelectorAll 和 getElementsBy* 方法返回啥？
js动态查询指定class名的所有元素，querySelectorAll()和querySelectorAll()的区别