利用浏览器console控制台实现JS网页点击

最新推荐文章于 2025-05-12 08:45:00 发布

RecordInLife

最新推荐文章于 2025-05-12 08:45:00 发布

阅读量1.4w

点赞数 1

文章标签： JavaScript

本文链接：https://blog.csdn.net/itzhengmaolin/article/details/109052454

版权

本文介绍了如何在网页中利用JavaScript通过浏览器控制台选取并点击特定元素。首先，根据DOM结构和自定义属性定位元素，如通过name属性选取input标签。接着，通过JavaScript实现这些元素的点击事件。参考了querySelector()方法和Chrome控制台的功能，提供了一系列教程链接，帮助开发者掌握这一技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

适用场景：需要网页中的某个页面中选择N多个特定的元素，然后对他们依次点击（比如选中）。

1、根据页面中DOM元素分析页面的结构找出共同点，方便定位元素
除了JS中常用的document.getElementById(“id值”)、document.getElementsByTagName(“标签名”)…之外，他们都比较限定，有没其他的方式根据自定义属性去获取元素？
比如：

<input type="checkbox" name="hobby1">爱好1--游泳<br/>
<input type="checkbox" name="hobby2">爱好2--唱歌<br/>
<input type="checkbox" name="hobby1">爱好1--阅读<br/>
<input type="checkbox" name="hobby1">爱好1--游戏<br/>
<input type="checkbox" name="hobby2">爱好2--编程<br/>
<input type="checkbox" name="hobby1">爱好1--write<br/>
<input type="checkbox" name="hobby3">爱好3--tik tok<br/>
<input type="checkbox" name="hobby2">爱好2--刷抖音<br/>
<input type="checkbox" name="hobby1">爱好1--呦呵<br/>

想要定位到 input标签中name属性为hobby2的标签，如何实现？

# 原生js
//document.querySelector("input[name='hobby2']")      ---这种只能查找到第一个元素
document.querySelectorAll("input[name='hobby2']")     //这能查所有
#  jquery
$("input[name='hobby2']")

2、为找到的元素实现点击事件

# 原生js
var objs = document.querySelectorAll("input[name='hobby2']");

//不使用定时器实现点击
objs[1].click();

//使用定时器实现一次点击
var o = setTimeout(objs[2].click(),5000);
//使用定时器实现连续输出
setInterval(function(){console.log(1)},1000)

# jquery
$(objs[1]).click();

效果图：
在这里插入图片描述

参考文档：

js怎么根据自定义属性的值来查找元素【https://blog.csdn.net/kerryqpw/article/details/103558324】
HTML DOM querySelector() 方法【https://www.runoob.com/jsref/met-document-queryselector.html】
利用Chrome的Console功能实现JS网页自动点击【https://jingyan.baidu.com/article/0a52e3f41c0b0abf63ed726d.html】
Chrome 控制台console的用法【https://jingyan.baidu.com/article/6dad507505f714a123e36e8a.html】
Chrome控制台console的各种用法（方便调试）【https://blog.csdn.net/couragehope/article/details/81866955】
MDN中的"window.console"用法【https://developer.mozilla.org/zh-CN/docs/Web/API/Window/console】
模拟网页活动倒计时【https://blog.csdn.net/Acoolerman/article/details/82887255】