XPath或querySelector？

Question

XPath可以做一切querySelector可以做的事情，更多，所以你什麼時候選擇後者？我還沒有看到任何比較這兩個速度的速度基準，所以現在我選擇基於語法簡潔性，這看起來很隨意。

編輯：我可能應該說我正在爲Firefox編寫Greasemonkey腳本，所以我並不擔心跨瀏覽器的兼容性，並且不會包含任何庫。

Answer 1

你使用什麼瀏覽器？在Safari（或iPhone）中，querySelector和querySelectorAll比XPath快得多。 IE根本不支持XPath，而IE6和IE7不支持querySelector。最快的跨瀏覽器選擇器引擎是由John Resig創建的Sizzle。 Sizzle也是jQuery中使用的主要選擇器引擎。它在適當的地方使用querySelector，並在querySelector不可用的地方使用普通的DOM方法。

Answer 2

在功能方面，最好的選擇是使用一個包含選擇器引擎的庫，其中許多（例如MooTools，Dojo，Prototype）內部已經在使用XPath來執行某些類別的查詢。你應該能夠指望一個好的圖書館爲你選擇禁食的方法。所有瀏覽器都不支持querySelector和querySelectorAll，所以實際上我們應該比較XPath（XPath），它可以完成querySelector可以做的所有事情（我認爲這個陳述有點可疑，但這並不重要），但是querySelector和querySelectorAll不被所有瀏覽器支持，原生DOM查詢方法（即的getElementsByTagName，的getElementById，querySelector，標準遍歷和過濾方法等）

使用本地DOM過濾方法需要瀏覽器的怪癖和侷限性的知識，很快，除非你使用一個庫變得不切實際的複雜查詢（如jQuery或MooTools）來消除不一致。原生DOM技術（無論是通過代理如jQuery還是自定義實現）通常都是通過XPath選擇的，因爲它們的確提供了比XPath更多的靈活性。例如，如果要篩選檢查的輸入，「隱藏」元素或禁用的輸入，XPath會縮短，但jQuery會爲您提供：checked，：hidden和：disabled僞類。

Answer 3

如果您還沒有學習XPath，但只知道CSS選擇器，則只能使用querySelector。除此之外，即使對於簡單的查詢，XPath語法也可能更復雜。所以如果你不需要XPath提供的功能，那麼使用CSS選擇器可能會更容易。

你應該知道的兩件事情：

• 純XML使用時，ID選擇不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的一個好處是，它自動幫助腳本經常無法運行，在您認爲是的節點所在的頁面上，將轉換爲不是而不是破壞頁面。