JavaScript >> Javascript 文檔 >  >> JavaScript

JavaScript 中的 XPath,第 1 部分

XPath 是這些天您很少聽到的那些東西之一。在 XML 統治的時代,XPath 作為一種在大型結構中進行隨機訪問的方法對開發人員來說非常重要。自 JSON 普及以來,XPath 受到的關注越來越少,但在瀏覽器中對 XPath 查詢的支持還是相當不錯的。很少有人知道它,使用它的人更少,因此沒有很多可用的書面信息。我希望這篇文章有助於填補這一空白。

對於那些不知道的人,DOM Level 3 XPath 指定了由 Firefox、Safari、Chrome 和 Opera 實現的接口。中心界面是XPathEvaluator ,其中包含使用 XPath 表達式的方法。主要方法是 evaluate() ,它接受五個參數:XPath 查詢字符串、查詢應從其開始的節點、命名空間解析器(稍後討論)、要返回的結果類型以及應添加新結果的可選結果對象。最後一個參數很少使用,因為結果也作為 evaluate() 的值返回 .

有 10 種不同的結果類型,每種都由 XPathResult 上的常量表示 目的。它們是(摘自 Professional JavaScript, 2nd Edition):

  • XPathResult.ANY_TYPE – 返回適合 XPath 表達式的數據類型
  • XPathResult.ANY_UNORDERED_NODE_TYPE – 返回匹配節點的節點集,儘管順序可能與文檔中節點的順序不匹配
  • XPathResult.BOOLEAN_TYPE – 返回一個布爾值
  • XPathResult.FIRST_ORDERED_NODE_TYPE – 返回只有一個節點的節點集,即文檔中第一個匹配的節點
  • XPathResult.NUMBER_TYPE – 返回一個數值
  • XPathResult.ORDERED_NODE_ITERATOR_TYPE – 按照它們在文檔中出現的順序返回匹配節點的節點集。這是最常用的結果類型。
  • XPathResult.ORDERED_NODE_SNAPSHOT_TYPE – 返回節點集快照,捕獲文檔外部的節點,以便任何進一步的文檔修改都不會影響結果集。結果集中的節點與它們在文檔中出現的順序相同。
  • XPathResult.STRING_TYPE – 返回一個字符串值
  • XPathResult.UNORDERED_NODE_ITERATOR_TYPE – 返回匹配節點的節點集,儘管順序可能與文檔中節點的順序不匹配
  • XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE – 返回節點集快照,捕獲文檔之外的節點,以便任何進一步的文檔修改都不會影響節點集。節點集中的節點不一定與它們在文檔中出現的順序相同。

evaluate()返回的信息 完全取決於請求的結果類型。最簡單的結果返回單個值(布爾值、節點、數字和字符串),而更複雜的結果返回多個節點。調用時,evaluate() 返回一個 XPathResult 目的。該對象的屬性包含評估的結果。每種簡單結果都有一個屬性:booleanValue , singleNodeValue , numberValue , 和 stringValue .此外,還有一個 resultType 其值映射到 XPathResult 之一的屬性 常數。這對於在使用 XPathResult.ANY_TYPE 時確定結果類型很有用 .如果沒有匹配結果,evaluate() 返回 null .

要執行 XPath 查詢,您需要使用 XPathEvaluator 目的。您可以創建一個新實例或使用內置實例。創建自己的意味著實例化 XPathEvaluator (Opera 僅在 9.5 版本中實現了此功能):

var evaluator = new XPathEvaluator();

//get first div
var result = evaluator.evaluate("//div", document.documentElement, null,
                 XPathResult.FIRST_ORDERED_NODE_TYPE, null);
alert("First div ID is " + result.singleNodeValue.id);

在 Firefox、Safari、Chrome 和 Opera 中,Document 的所有實例 也實現 XPathEvaluator 接口,表示可以訪問document.evaluate() 如果要查詢 HTML 頁面。如果您通過 XMLHttpRequest 加載 XML 文檔 或其他機制,evaluate() 方法也可以。例如:

//get first div
var result = document.evaluate("//div", document.documentElement, null,
                 XPathResult.FIRST_ORDERED_NODE_TYPE, null);
alert("First div ID is " + result.singleNodeValue.id);

請注意,您不能使用 document.evaluate() document 之外;您可以使用 XPathEvaluator 的實例 任何文件。

有兩種方法可以返回多個節點,通過迭代器或快照。迭代器結果仍然與文檔相關聯,因此所做的任何更改都將自動反映在結果集中。另一方面,快照結果會在該時間點獲取結果,並且不受進一步文檔擴充的影響。這兩種結果類型都要求您對結果進行迭代。對於迭代器結果,您需要使用 iterateNext() 方法,它將返回一個節點或 null (這適用於有序和無序的迭代器結果):

//get all divs - iterator style
var result = document.evaluate("//div", document.documentElement, null,
                 XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);
if (result){
    var node = result.iterateNext();
    while(node) {
        alert(node.id);
        node = result.iterateNext();
    }
}

對於快照結果,您可以使用 snapshotLength 屬性來確定返回了多少結果以及 snapshotItem() 方法來檢索特定位置的結果。示例(這適用於有序和無序的快照結果):

//get all divs - iterator style
var result = document.evaluate("//div", document.documentElement, null,
                 XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
if (result){
    for (var i=0, len=result.snapshotLength; i < len; i++) {
        alert(result.snapshotItem(i).id);
    }
}</code>

在大多數情況下,快照結果比迭代器結果更可取,因為與文檔的連接已被切斷;每次調用 iterateNext() 對文檔重新執行 XPath 查詢,因此速度要慢得多。簡而言之,迭代器結果與使用 HTMLCollection 具有相同的性能影響 對象,它們也會重複查詢文檔。

與手動遍歷 DOM 相比,XPath 查詢速度非常快,因此在幾個基於 JavaScript 的 CSS 查詢引擎中使用它們來加速它們的執行。每當您在尋找隱藏在文檔中的特定節點或節點集時,請考慮使用 XPath 來加快 Firefox、Safari、Chrome 和 Opera 中的進程(Internet Explorer 不支持 DOM 3 XPath)。


Tutorial JavaScript 教程
  1. removeEventListener 不工作。

  2. 默認安全,您不安全

  3. 10 個新的 jQuery 插件 2014 年 1 月

  4. 如何使用 Auth0 驗證 Firebase 和 Angular:第 2 部分 - 異步和實時

  5. 我的第一次黑客馬拉松(一次很棒的經歷)

  6. 如何使用 Github 作為 Web 開發的雲存儲

  7. Angular 中的 Nx 入門

  1. React-Native 提取,網絡請求失敗。不使用本地主機

  2. Firebase 雲函數:調用可調用函數時無法提取參數

  3. 記憶一個咖哩函數

  4. Netflix 克隆

  5. React 面向鉤子的 Redux 編碼模式,沒有 thunk 和動作創建者

  6. Highcharts 日期時間軸,如何禁用時間部分(僅顯示日期)?

  7. 飛揚的小鳥遊戲| 高分辨率照片| CLIPARTO javascipt |畫布 |html |css

  1. Fastify 演示進入生產階段

  2. 防止 Bootstrap .table-responsive 樣式裁剪工具提示

  3. 我從參加虛擬黑客馬拉松中學到了什麼

  4. 觀察交叉口觀察者