【官方】【新手必看】常用querySelector语法举例

智友RPA-技术支持

分类：chrome自动化

帖子标题：【官方】【新手必看】常用querySelector语法举例

帖子内容：

一个HTML（网页）元素由标签、属性名、属性值三部分组成，如下图所示。

querySelector和XPath

querySelector是定位网页元素的另外一种方式。

大部分XPath语法都有对应的querySelector写法。

快速获取元素querySelector

querySelector语法说明

场景	querySelector语法	querySelector举例	使用优先级
按id属性查找	#id的值	#kw	高
按name属性查找	标签名称[name="name的值"]	input[name="username"]	高
按class属性查找	.class的值	.btn-submit	中
按其他属性查找	标签名称[属性名称="属性值"]	input[placeholder="	高
多个条件同时满足	标签名[属性名称=“属性值”][ 属性名称=“属性值”]	div  [name="city"][size="4"]	中
多个条件任意满足一个	标签名[属性名称=“属性值”],[  属性名称=“属性值”]	div[name="city"],[title="abc"]	中
属性值模糊匹配	某个属性以"value"开头：    标签名称[属性名称^= “value”]    某个属性以“value”结尾：    标签名称[属性名称$= “value”]    某个属性包含“value”：    标签名称[属性名称*= value]	a[src  ^= "https"]    a[src  $= ".pdf"]    a[src  *= "runoob"]	中

querySelector最佳实践

1、  先按当前元素的特征定位元素，id、name、特殊的class、placeholder等属性

2、  如果当前元素没有固定的特征

2.1  定位该元素有固定特征的父亲级元素、祖先级元素，然后再向下查找该元素，例如：

querySelector写法	说明
div[id='J_login_form’]  > input	从div[id='J_login_form’]向下查找子节点input
div[id='J_login_form’]  input	从div[id='J_login_form’]向下查找子、孙节点input

querySelector举例

l  根据父亲元素定位目标元素

通用写法：div[id=’aid’] > div[class=’b’]

简单的写法：#aid > .b

l  根据祖先元素定位目标元素

通用写法：div[id=’aid’] div[class=’e’]

简单写法：#aid .e