在瀏覽器環(huán)境下，一些強(qiáng)大的xpath標(biāo)準(zhǔn)方法沒(méi)有被支持（如正則匹配方法matches()），只能利用有限的方法做抽取，下面是列出我常用的一些查找技巧、經(jīng)驗(yàn)；不定時(shí)更新。

常用

以下面的分頁(yè)組件節(jié)點(diǎn)結(jié)構(gòu)為例：

<div class="pageList">
    <span data-span style="display:none">.</span>
    <span class="disabled">?</span>
    <span class="current" data-span>1</span>
    <a href="" style="display:none"></a>
    <a href="/Program/n-d-2-a-2">2</a>
    <a href="/Program/n-d-2-a-3">3</a>
    <a href="/Program/n-d-2-a-4">4</a>
    <a href="/Program/n-d-2-a-5">5</a>
    <a href="/Program/n-d-2-a-2">?</a>
    <a href="/Program/n-d-2-a-30" class="last">... 30</a>
</div>
<div class="ad">
    <a href='xxx'></a>
    <a href="xxx"><img src="xxx" /></a>
</div>

"或"條件

選取"上一頁(yè)"、"下一頁(yè)"節(jié)點(diǎn):

//div[@class="pageList"]/span[@class="current" and @data-span]

"與"條件

選取"上一頁(yè)"、"下一頁(yè)"節(jié)點(diǎn):

//div[@class="pageList"]/*[text()="?" or text()="?" ]

"非"條件

選取不含href屬性的a節(jié)點(diǎn):

//div[@class="pageList"]/a[not(@href)]

包含

選取href屬性包含‘Program’的a節(jié)點(diǎn)：

//div[@class="pageList"]/a[contains(@href,'Program')]

選取href屬性不包含‘Program’的a節(jié)點(diǎn)：

//div[@class="pageList"]/a[not(contains(@href,'Program'))]

判斷是否數(shù)字

選取文本是數(shù)字的a節(jié)點(diǎn)：

//div[@class="pageList"]/a[string(number(text())) != 'NaN'];

父節(jié)點(diǎn)

選取ad中的包含img的a節(jié)點(diǎn)：

//div[@class="ad"]/a/img/parent::a

相鄰兄弟節(jié)點(diǎn)

選取第4頁(yè)a節(jié)點(diǎn)前面的第一個(gè)相鄰節(jié)點(diǎn)（即第3頁(yè)a節(jié)點(diǎn)）：

//div[@class="pageList"]/a[text()="4"]/preceding-sibling::a[1]

選取第4頁(yè)a節(jié)點(diǎn)后面的第一個(gè)相鄰節(jié)點(diǎn)（即第5頁(yè)a節(jié)點(diǎn)）：

//div[@class="pageList"]/a[text()="4"]/following-sibling::a[1]

以特定字符開(kāi)頭或結(jié)尾

選取href屬性以“/Program”開(kāi)頭的a節(jié)點(diǎn)（結(jié)尾使用的方法是ends-with）：

//div[@class="pageList"]/a[starts-with(@href,"/Program")]

上下文

選取前三個(gè)a：

//div[@class="pageList"]/a[position()<=3]

選取最后一個(gè)a：

//div[@class="pageList"]/a[last()]

js 實(shí)現(xiàn)Xpath方法

function getElementsByXpath(xpathToExecute, element) {
        element = (element === undefined)? document:element;
        var result = [];
        var nodesSnapshot = document.evaluate(xpathToExecute, element, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
        for (var i = 0; i < nodesSnapshot.snapshotLength; i++) {
            result.push(nodesSnapshot.snapshotItem(i));
        }
        return result;
}

//調(diào)用示例
getElementsByXpath('//div')
getElementsByXpath('//div', document.body)

下面是標(biāo)準(zhǔn)軸和運(yùn)算符，方便查看，這部分內(nèi)容原文來(lái)自http://www.runoob.com/xpath/xpath-tutorial.html

XPath 運(yùn)算符

XPath 表達(dá)式可返回節(jié)點(diǎn)集、字符串、邏輯值以及數(shù)字。

image.png

Xpath 軸

image.png