XPath表达式//h1[2]和(//h1)[2]的区别

先说结论:

xpath 说明
//h1[2] 将文档中的h1根据兄弟节点关系进行分组,取每组的第2个h1
(//h1)[2] 将文档中所有h1作为一个组,取第2个h1

我们针对如下html测试一下

<html>
    <body>
        <h1>1</h1>
        <h1>2</h1>
        <div>
            <h1>3</h1>
            <h1>4</h1>
        </div>
        <h1>5</h1>
    </body>
</html>

为了方便演示,我用Chrome浏览器控制台来测试xpath。F12打开控制台,在Elements选项卡下按Ctrl+F打开搜索框,然后就可以直接输入xpath表达式并实时看到匹配结果了。


Chrome浏览器控制台xpath测试输入框

我们分析以下以下几个xpath表达式的测试结果

//h1[2]匹配下图高亮节点

//h1[2]匹配结果

//h1[3]匹配下图高亮节点

h1[3]匹配结果

(//h1)[3]匹配下图高亮节点
(//h1)[3]匹配结果

我们画出如下dom树,就能比较清楚的理解。可以看出1,2,5三个h1节点是在同在body下的兄弟节点,作为一个组,3,4两个同在div下作为另一个组。
//h1[2]分别匹配到[1,2,5]这个组中的2,和[3,4]这个组中的4,//h1[3]只能匹配[1,2,5]组中的5,而[3,4]这个组没有第3个节点,未能匹配上。
(//h1)[3]匹配的是文档中所有h1组成的组中第3个h1,这里的括号表示将文档中所有的h1算作一个组(以在文档中出现的次序为顺序)
dom树.PNG

希望以上对你有所帮助。

推荐阅读更多精彩内容