元素定位(d4-2)

一,元素定位①优先级:首先选择id,其次选class,再就是根据其他唯一元素,在更加层级过滤定位,根据多属性定位,②首选CSS定位,在选XPATH定位

1.xpath定位

//*   获取当前网页全部元素

//*[@id='i1']  定位id为i1的元素,@后面接属性名

//*[@placeholder='请通过ID定位元素']        页面中所有元素都可以通过标签中唯一属性名来定位

//input[@placeholder='请通过ID定位元素']       把*换为input,即可通过tagname可以缩减查找范围.

//input[@class='classname']    通过class来定位元素

//div[@class='inner'][1]    定位到多个元素的情况下 , 可以通过角标来定位到哪一个元素  定位不到元素的情况下可使用该种方式(下标),弊端是维护成本高

//div[@class='driver'][1]/div[@class='inner'][1]   第一层为//div[@class='driver'][1],第二层为div[@class='inner'][1]  ,多层之间链接用反斜杠/,逐层定位元素

//input[@class='classname' and @placeholder='请通过CLASSNAME定位元素']      多元素定位用and 连接

2.document:document obj modle   文档对象模型,把看到的HTML代码变为一个对象

JS:是一种脚本语言,给页面增加逻辑,通过dom来完成对页面的操作

JQ和DOM的区别,jq根据id获取元素简单,对dom进行封装,使用起来更加简便

xpath:通过路径解析页面,是一个缩减范围的过程,解析的是xml

三,CSS定位:css selector解析的是html,比起xpath更加快捷,不支持角标定位

定位方式和html选择器一样

#i1:定位id直接用#(#id值)

.classname:定位class用.

input:定位标签直接输入标签名

input[placeholder="请通过ID定位元素"]:单元素定位,注意和xpth的区别没有@号

select[size="4"][multiple="multiple"]:多元素定位直接加上[][]加上就行,注意也没有@号

body>div[id="basebody"]: 逐层定位使用大于好>,注意层级中必须使用属性

2.css.selector定位  略简单与xpath

#i1    直接定位到id为i1的元素位置

.classname    直接定位到class等于chassname的元素,注意前面的点

[name="name"]  单属性定位,元素中有name="name"可直接定位

[name="name"][type="text"]   多属性定位

input[name="name"]     同样可在前面加上标签缩减定位范围

input[placeholder^='请通过']   模糊开头匹配,注意上尖角号

input[placeholder$='元素']    模糊结尾匹配,注意$号

input[placeholder*='元素']    模糊全匹配,注意*号