XPath还是querySelector？

Question

XPath可以完成querySelector可以做的所有事情，还有更多，所以你什么时候选择后者呢？我没有看到比较两者的任何速度基准，所以现在我选择基于语法简洁，这似乎是任意的。

编辑：我可能应该说我正在为Firefox编写Greasemonkey脚本，所以我不担心跨浏览器的兼容性，并且不想包含任何库。

Answer 1

您使用的浏览器是什么？在Safari（或iPhone）中，querySelector和querySelectorAll比XPath快得多。 IE根本不支持XPath，IE6和IE7不支持querySelector。最快的跨浏览器选择器引擎是Sizzle，由John Resig创建。 Sizzle也是jQuery中使用的主要选择器引擎。它使用querySelector适当的和正常的DOM方法，其中querySelector不可用。

Answer 2

在功能方面，您最好的选择是使用包含选择器引擎的库，其中许多（例如MooTools，Dojo，Prototype）已经在内部使用XPath来执行某些类的查询。您应该可以依靠一个好的图书馆为您选择禁食方法。

XPath可能能够执行querySelector可以执行的所有操作（我认为这个语句有点可疑，但这不是重点）但所有浏览器都不支持querySelector和querySelectorAll，所以我们应该将XPath与本机DOM查询方法（即getElementsByTagName，getElementById，querySelector，标准遍历和过滤方法等）

使用本机DOM过滤方法需要了解浏览器的怪癖和限制，并且很快就会对复杂的查询变得不切实际，除非您使用库（例如jQuery或MooTools）来消除不一致性。原生DOM技术（无论是通过像jQuery这样的代理，还是自定义实现）通常是通过XPath选择的原因是它们确实比XPath提供了更多的灵活性。例如，如果要筛选已检查的输入，“隐藏”元素或禁用的输入，XPath会缩短，但jQuery会为您提供：checked，：hidden和：disabled伪类。

Answer 3

如果您尚未学习XPath但只了解CSS选择器，则只使用querySelector。除此之外，即使对于简单查询，XPath语法也可能更复杂。因此，如果您不需要XPath提供的功能，则可能更容易使用CSS选择器。

你应该知道两件事：

• id选择器在纯XML上使用时不能与querySelector一起使用（或者至少不可靠）
• querySelector仅适用于浏览器当前支持的选择器，因此如果它不支持某些CSS3选择器，则无法使用它们。

Answer 4

CSS语法非常棒有两个原因：

• 与更复杂的XPath相比，它快一个数量级，资源密集程度更低。
• 当您想要找到 的内容时，可以使用css选择器找到相同的XPath查询，这样做的大部分时间都会更长，更难以阅读。

一个例子：拿这个css选择器：h1.header > a[rel~="author"]

其最短的函数XPath 等效将为//h1[contains(" "+normalize-space(@class)+" "," header ")]/a[contains(" "+normalize-space(@rel)+" "," author ")]

......这更难以读写。

如果您改为编写此XPath：//h1[@class="header"]/a[@rel="author"]

...您错误地错过了<h1 class="article header"><a rel="author external" href="/mike">...</a></h1>

等标记

当你真的需要 XPath时，它是唯一的选择，除非你想用代码手动遍历DOM（这会很快得到隐藏）。

就个人而言（我是Greasemonkey的维护者之一），我使用非常小的on.js库来满足我的所有节点切片需求 - 这给了我两个XPath的组合（当我需要时），和CSS（我倾向于几乎一直使用） - 主要是因为它让我将所有需要消化的页面部分的代码分离到脚本标题中，以便我的代码得到所有的东西它需要，而且可以是实际上为网页做有趣或伟大的事情。

Web浏览器非常适合快速运行javascript，如果我是你，我会建议使用任何使你最有效和最开心的开发人员，因为浏览器运行的代码量最少。但是，on.js的一个附带好处是，它会自动帮助脚本经常无法运行，在您认为所在的节点所在的页面上，结果是不，而不是破坏页面。