聊一聊js中元素定位的方法

闻一文 · 发表于 2023-2-6 16:20:40

在做selenium web自动化的时候，有时通过selenium定位不到，或无法操作元素，这个时候就需要通过js来
定位/操作元素，然后通过selenium自带的execute_script()方法去执行js语句。下面介绍几种js的定位方法。
一.ID

id的值都是唯一的，所以当存在id字段时可优先使用

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button style="display: none" id="button_id">隐藏</button>
<button onclick="a()">点击</button>
</body>
</html>

复制代码

二.NAME

name值定位元素的话返回的为list，用下标取值即可。如下通过name定位并执行点击事件。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button style="display: none" id="button_id">隐藏</button>
<button onclick="a()">点击</button>
</body>
</html>

复制代码

三.TAG_NAME

tag_name对应的便是标签名称，返回的也是list集合。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input>
<button onclick="a()">点击</button>
</body>
</html>

复制代码

四.CLASS_NAME

class_name对应的值是class，返回list集合

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h2 class="h2_class" style="display: block; background-image: url('https://static.geetest.com/captcha_v3/batch/v3/25173/2023-01-3')"></h2>
<button onclick="a()">点击</button>
</body>
</html>

复制代码

五.CSS

css定位有两个方法，下面一一演示看下。
1.querySelectorAll()：返回所有匹配的结果，list集合。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input name="2">
<input name="2">
<button onclick="a()">点击</button>
</body>
</html>

复制代码

2.querySelector()：不管匹配结果有多少个，只返回第一个。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input name="2">
<input name="2">
<button onclick="a()">点击</button>
</body>
</html>

复制代码

文章来源：<a id="blog_url" href="https://www.cnblogs.com/lihongtaoya/" rel="noopener" target="_blank">https://www.cnblogs.com/lihongtaoya/</a> ，请勿转载

复制代码

来源:https://www.cnblogs.com/lihongtaoya/p/17089330.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】我们会及时删除侵权内容，谢谢合作！