• 使用xpath的轴(Axis)进行元素定位


    使用xpath的轴(Axis)进行元素定位

    使用Xpath轴方式可依据在文档数中的元素的相对位置来进行定位,先找到一个相对好定位的元素,在根据与它相对位置来定位其他元素,可以解决一些元素难以定位的问题。今天学习了,写下笔记加深下印象

    如家HTML页面:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>在此处插入标题</title>
    </head>
    <body>
        <div id="div1">
            <input alt="div1-input1" id="iv1-input1" value="" /> <a
                href="http://www.baidu.com">test</a> <img alt="div1-img1" src="">
            <input type="button" id="div1-button1" name="div1-button" />
        </div>
        <div id="div2">
            <input alt="div2-input2" id="div2-input2" value="" /> <a
                href="http://www.sogou.com">test</a> <img alt="div2-img2" src="">
        </div>
     
    </body>
    </html>

     画出树状图如下所示:

     

    Xpath轴关键字 轴的定义说明 定位表达式实例 表达式解释
    parent 选取当前节点的父节点 //img[@alt='div2-img2']/parent::div 查找到alt属性为div2-img2的img元素,并基于图片找到其上一级的div元素
    child 选取当前节点的子节点 //div[@id='div1']/child::img 查找id为div1的div标签,基于当前div查找标签为img的子节点
    ancestor 选取当前节点的所有上层节点 //img[@alt='div2-img2']/ancestor::div 查找alt属性为div2-img2的图片,基于当前图片找到其上级的div页面元素
    descendant 选取当前节点所有下层节点 //div[@id='div2']/descendant::img 查找id属性为div2的div元素,在查找其下级所有节点中的img元素
    following 选取当前节点之后显示的所有节点 //div[@id='div1']/following::img 查找到ID属性为div1的div元素,并基于div的位置找到它后面节点中的img元素
    following-sibling 选取当前节点所有的平级节点 //img[@alt='div1-img1']/following-sibling::input 查找到alt属性为div1-img1的img页面元素,并基于img的位置找到后续节点中的input元素
    preceding 选取当前节点前面所有的节点 //img[@alt='div2-img2']/preceding::div 查找到alt属性为div2-img2的图片页面元素,并基于图片的位置找到它前面节点中的div元素
    preceding-sibling 选取当前节点前面所有平级的节点 //img[@alt='div2-img2']/preceding-sibling::a[1] 查找到alt属性值为div2-img2的图片元素,基于图片位置找到它前面同级节点的第二个链接页面元素

    下面是例子:

  • 相关阅读:
    js 生成m位随机数入门实例
    解决JS浮点数(小数)计算加减乘除的BUG
    JS 用sort方法排序字符串
    CSS3 transform rotate(旋转)锯齿的解决办法
    常用JS正则表达式
    Javascript 利用a标签自动解析URL分析网址实例
    移动前端头部标签(HTML5 head meta)
    JavaScript判断移动端及pc端访问不同的网站
    mysql 按日期分组
    css hover控制其他元素
  • 原文地址:https://www.cnblogs.com/yanzi-meng/p/8871089.html
Copyright © 2020-2023  润新知