xpath用例

原创已于 2022-09-13 14:02:10 修改 · 518 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端 #html #javascript

于 2022-09-13 11:50:15 首次发布

javascript 专栏收录该内容

5 篇文章

订阅专栏

本文详细讲解了如何使用HTML和CSS选择器进行高级筛选，包括省略多级路径、指定元素位置、根据子元素与兄弟关系筛选，以及文本内容匹配。掌握这些技巧，能更有效地处理前端开发中的DOM操作。

文章目录

一、省略多级路径
二、指定筛选结果里的第N个元素
三、根据子孙/兄弟元素进行筛选
四、根据文本内容进行筛选

一、省略多级路径

html：

<html>
    <body>
        <div id="main">
            <div>
                <ul>
                    <li>
                        text1
                    </li>
                    <li class="select-el select-ui">
                        <span class="badge">!</span>
                        text2
                    </li>
                </ul>
            </div>
        </div>
    </body>
</html>

获取main div：

/html/body/div[@id='main']
//div[@id='main']

获取main div下的li：

//div[@id='main']//li

二、指定筛选结果里的第N个元素

获取第二个li元素：

//div[@id='main']//li[2]
//div[@id='main']//li[position()=2]

三、根据子孙/兄弟元素进行筛选

包含span子元素的li：

//div[@id='main']//li[span]

包含文本元素的li：

//div[@id='main']//li[text()]

既包含span子元素，class属性又包含badge的li元素：

//li[span and contains(@class, "select-el")]

本身是li元素，且兄弟元素也是li并且包含span：

//li[../li/span]

四、根据文本内容进行筛选

文本内容包含"text1"的li：

//li[contains(text(), "text1")]

文本内容包含"text2"的li：

//li[contains(text()[2], "text2")]

PS：因为第二个li下既包含span又包含文本，所以text()匹配的文本节点其实有两个，既子span的前后各一个；第二个文本节点才有实质内容