在做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>

<script>

    function a(){

        alert(document.getElementById("button_id").style.display='block')  //id定位

    }

</script>

<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>

<script>

    function a(){

        document.getElementsByName("button_name")[0].click()  //name定位

    }

    function b(){

        alert("word")

    }

</script>

<body>

<span name="button_name" onclick="b()">隐藏</span>

<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>

<script>

    function a(){

        document.getElementsByTagName("input")[0].value="请输入内容"  //输入内容

    }

</script>

<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>

<script>

    function a(){

        alert(document.getElementsByClassName("h2_class")[0].style.backgroundImage)  //classname定位

    }

</script>

<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>

<script>

    function a(){

        document.querySelectorAll("input[name='2']")[1].value="123"  //返回全部

    }

</script>

<body>

<div class="liming">

    <div>

        <input name="2">

    </div>

    <div>

        <input name="2">

    </div>

</div>

<button onclick="a()">点击</button>

</body>

</html>

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<script>

    function a(){

        alert(document.querySelector("div[class='liming']>div:nth-child(2)>input").getAttribute("name"))

    }

</script>

<body>

<div class="liming">

    <div>

        <input name="1">

    </div>

    <div>

        <input name="2">

    </div>

</div>

<button onclick="a()">点击</button>

</body>

</html>
文章来源：https://www.cnblogs.com/lihongtaoya/ ，请勿转载

聊一聊js中元素定位的方法的更多相关文章

  1. 【基础】selenium中元素定位的常用方法（三）

    一.Selenium中元素定位共有八种 id name className tagName linkText partialLinkText xpath cssSelector 其中前六种都比较简单, ...

  2. javascript 获取iframe里页面中元素值的方法 关于contentWindow和contentDocumen

    javascript 获取iframe里页面中元素值的方法 IE方法:document.frames['myFrame'].document.getElementById('test').value; ...

  3. 【测试方法】Web测试中bug定位基本方法

    知识总结:Web测试中bug定位基本方法 涉及知识点:测试方法 在web测试过程中,经常会遇到页面中内容或数据显示错误,甚至不显示,第一反应就是BUG,没错,确实是BUG.进一步了解这个BUG的问题出 ...

  4. node.js中的url.parse方法使用说明

    node.js中的url.parse方法使用说明:https://blog.csdn.net/swimming_in_it_/article/details/77439975 版权声明:本文为博主原创 ...

  5. selenium8中元素定位方式

    Selenium对网页的控制是基于各种前端元素的,在使用过程中,对于元素的定位是基础,只有准去抓取到对应元素才能进行后续的自动化控制,我在这里将对各种元素定位方式进行总结归纳一下. 这里将统一使用百度 ...

  6. 聊一聊js中的null、undefined与NaN

    零.寒暄 翻翻自己的博客,上一篇竟然是六月26号的,说好的更新呢?回顾刚刚过去的这个七月,整天都是公司的入职培训加上自己的小论文,每天奋战到凌晨1点多,这是要挂的节奏啊!但是不论怎么说,自己的时间管理 ...

  7. js中push和join方法使用介绍

    push和join方法想必大家并不陌生吧,在本文将为大家详细介绍下js中的push和join方法的使用.代码: <script type="text/javascript"& ...

  8. prototype.js中Function.prototype.bind方法浅解

    prototype.js中的Function.prototype.bind方法: Function.prototype.bind = function() { var __method = this; ...

  9. JS中的对象和方法简单剖析

    众所周知,在js中对象就是精髓,不理解对象就是不理解js. 那么什么事js中的对象呢? 在js中,几乎一切皆对象: Boolean ,String,Number可以是对象(或者说原生数据被认作对象): ...

  10. Webdriver元素定位的方法

    webdriver提供了8种元素定位方法: 1.id 2.name 3.tag name 4.class name 5.link text 6.partial link text 7.xpath 8. ...

随机推荐

  1. Golang 和Python 几个小时前 几分钟 几天前的处理

    在用golang爬虫的时候 总会遇到 10天前 10分钟前 刚刚这种很影响我们爬取正常事件 所以我写了个方法 来格式化这种事件 golang 版本 package utils import ( &qu ...

  2. Sql Server性能排查和优化懒人攻略

    转载自作者zhang502219048的微信公众号[SQL数据库编程]:Sql Server性能排查和优化懒人攻略 很多年前,笔者那时刚从广东技术师范学院(现为广东技术师范大学,以前为广东民族学院)的 ...

  3. Go语言核心36讲17

    在前面的文章中,我们已经提到过很多次"指针"了,你应该已经比较熟悉了.不过,我们那时大多指的是指针类型及其对应的指针值,今天我们讲的则是更为深入的内容. 让我们先来复习一下. ty ...

  4. qt quick工程升级，qmake工程升级至cmake

    升级原因 由于音视频工作需要,qt6比qt5的video相关更看重效率. 升级中遇到的问题 在开发的过程中,为了更快速的进行开发,对业务其他不需要代码运行效率的地方使用qml+js的方式进行编写.在升 ...

  5. Seata 1.5.2 源码学习（事务执行）

    关于全局事务的执行,虽然之前的文章中也有所涉及,但不够细致,今天再深入的看一下事务的整个执行过程是怎样的. 1. TransactionManager io.seata.core.model.Tran ...

  6. 2.9：数据交换-csv、Excel、json、爬虫、Tushare获取数据

    〇.任务 1. 使用Python基础文件读写函数完成CSV文件的处理: 2. 使用标准CSV库完成CSV文件的处理: 3. 使用Excel库完成Excel文件的处理: 4. Python数据结构和Js ...

  7. go-dongle 0.2.0 版本发布了，一个轻量级、语义化的 golang 编码解码、加密解密库

    dongle 是一个轻量级.语义化.对开发者友好的 Golang 编码解码和加密解密库 Dongle 已被 awesome-go 收录, 如果您觉得不错,请给个 star 吧 github.com/g ...

  8. Rust 学习之旅（7）：Package，Crate，Module

    Rust 学习之旅(7):Package,Crate,Module 这是第 7 章的读书笔记,Cargo Workspace 在第 14 章. Packages and Crates As a pro ...

  9. 如何使用ChatGPT来自动化Python任务

    1.概述 最近,比较火热的ChatGPT很受欢迎.今天,笔者为大家来介绍一下ChatGPT能做哪些事情. 2.内容 ChatGPT是一款由OpenAI开发的专门从事对话的AI聊天机器人.它的目标是让A ...

  10. Java基础类String学习分析

    目录 1 String不可变性 2 不可变的好处 3 String+和StringBuilder效率差异 4 String, StringBuffer and StringBuilder 5 Stri ...