JavaScript dom 節點 xpath 查詢：精準定位子元素
本文介紹如何在 JavaScript 中，利用 XPath 表達式從指定的 DOM 節點開始查找元素。 許多開發者在使用 document.evaluate() 方法時，常常遇到從根節點而非指定節點開始查找的問題。
例如，開發者希望在一個 class 為 “menu” 的 div 元素下，查找所有 input 元素，或者更精確地，查找 class 為 “tInput” 且 value 為 “100” 的 input 元素。 直接使用 //input 會從整個文檔根節點開始搜索，而非從指定的 “menu” 節點開始。
關鍵在于理解 XPath 表達式的相對路徑。 //input 表示查找文檔中所有 input 元素。要從特定節點（例如，menu 節點）開始查找，需要使用相對路徑表達式。
正確的 XPath 表達式
立即學習“Java免費學習筆記（深入）”；
要從當前節點開始查找所有 input 子孫節點，應使用 .//input。 點號 (.) 代表當前節點。 因此，document.evaluate(‘.//input’, menu, NULL, XPathResult.ANY_TYPE, null); 將從 menu 節點開始遞歸搜索所有 input 子節點。
更復雜的條件查找
對于更復雜的條件，例如查找 class 為 “tInput” 且 value 為 “100” 的 input 元素，可以使用以下 XPath 表達式：
.//input[@class=’tInput’ and @value=’100′]
此表達式結合了屬性選擇器，精確地定位目標元素。 注意屬性值需要用單引號或雙引號括起來。 將此表達式與 document.evaluate 方法結合使用，即可在 menu 節點下進行精準查找。 通過這種方法，您可以有效地從任何指定的 DOM 節點開始，使用 XPath 表達式進行精確的元素查找。
