JavaScript中如何用XPath在指定DOM節點下精確查找元素？

在 JavaScript 中，精確地在指定 dom 節點下使用 xpath 查找元素，需要巧妙地運用 xpath 表達式。本文將演示如何利用 document.evaluate 函數結合 xpath 表達式，在給定 dom 節點的子樹中進行精準查找，避免全局搜索帶來的誤差。

問題： 許多開發者在使用 document.evaluate 函數時，容易犯一個錯誤：使用 //element 這樣的表達式，這會在整個 DOM 樹中查找元素，而非僅限于目標節點的子樹。

解決方案： 關鍵在于 XPath 表達式的起始點。為了限制搜索范圍，我們需要在 XPath 表達式前添加一個點 (. )。 . 代表當前節點。因此，.//element 表示從當前節點開始，向下遞歸搜索所有 element 元素。

示例： 假設我們想在名為 menu 的 div 節點下查找所有 input 元素。錯誤的代碼如下：

var menu = document.querySelector('.menu'); var xpath = '//input'; // 錯誤：全局搜索 // ... (其余代碼)

正確的代碼應該這樣寫：

立即學習“Java免費學習筆記（深入）”；

var menu = document.querySelector('.menu'); var xpath = './/input'; // 正確：從 menu 節點開始搜索 var arr = []; var result = document.evaluate(xpath, menu, null, XPathResult.ANY_TYPE, null); var nodes = result.iterateNext(); while (nodes) {     arr.push(nodes);     nodes = result.iterateNext(); } console.assert(arr.length === 2); // 斷言應該通過

通過將 XPath 表達式修改為 .//input，我們確保了搜索只在 menu 節點及其子節點內進行。

更復雜的查詢： 對于更復雜的場景，例如查找 class 為 “tInput” 且 value 為 “100” 的 input 元素，可以使用更精細的 XPath 表達式：

var xpath = './/input[@class="tInput" and @value="100"]';

記住，. 是限制 XPath 搜索范圍的關鍵。 它明確指定了搜索的起始節點，避免了在整個 DOM 樹中進行不必要的全局搜索，從而提高了查找效率和準確性。