JavaScript DOM節(jié)點下XPath查詢：如何從指定節(jié)點開始查找元素？

JavaScript dom 節(jié)點 xpath 查詢：精準(zhǔn)定位子元素

本文介紹如何在 JavaScript 中，利用 XPath 表達(dá)式從指定的 DOM 節(jié)點開始查找元素。 許多開發(fā)者在使用 document.evaluate() 方法時，常常遇到從根節(jié)點而非指定節(jié)點開始查找的問題。

例如，開發(fā)者希望在一個 class 為 “menu” 的 div 元素下，查找所有 input 元素，或者更精確地，查找 class 為 “tInput” 且 value 為 “100” 的 input 元素。 直接使用 //input 會從整個文檔根節(jié)點開始搜索，而非從指定的 “menu” 節(jié)點開始。

關(guān)鍵在于理解 XPath 表達(dá)式的相對路徑。 //input 表示查找文檔中所有 input 元素。要從特定節(jié)點（例如，menu 節(jié)點）開始查找，需要使用相對路徑表達(dá)式。

正確的 XPath 表達(dá)式

立即學(xué)習(xí)“Java免費(fèi)學(xué)習(xí)筆記（深入）”；

要從當(dāng)前節(jié)點開始查找所有 input 子孫節(jié)點，應(yīng)使用 .//input。 點號 (.) 代表當(dāng)前節(jié)點。 因此，document.evaluate(‘.//input’, menu, NULL, XPathResult.ANY_TYPE, null); 將從 menu 節(jié)點開始遞歸搜索所有 input 子節(jié)點。

更復(fù)雜的條件查找

對于更復(fù)雜的條件，例如查找 class 為 “tInput” 且 value 為 “100” 的 input 元素，可以使用以下 XPath 表達(dá)式：

.//input[@class=’tInput’ and @value=’100′]

此表達(dá)式結(jié)合了屬性選擇器，精確地定位目標(biāo)元素。 注意屬性值需要用單引號或雙引號括起來。 將此表達(dá)式與 document.evaluate 方法結(jié)合使用，即可在 menu 節(jié)點下進(jìn)行精準(zhǔn)查找。 通過這種方法，您可以有效地從任何指定的 DOM 節(jié)點開始，使用 XPath 表達(dá)式進(jìn)行精確的元素查找。