1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 利用浏览器console控制台实现JS网页点击

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

时间:2022-06-13 20:12:46

相关推荐

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

适用场景:需要网页中的某个页面中选择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、为找到的元素实现点击事件

# 原生jsvar 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怎么根据自定义属性的值来查找元素【/kerryqpw/article/details/103558324】HTML DOM querySelector() 方法【/jsref/met-document-queryselector.html】利用Chrome的Console功能实现JS网页自动点击【/article/0a52e3f41c0b0abf63ed726d.html】Chrome 控制台console的用法【/article/6dad507505f714a123e36e8a.html】Chrome控制台console的各种用法(方便调试)【/couragehope/article/details/81866955】MDN中的"window.console"用法【/zh-CN/docs/Web/API/Window/console】模拟网页活动倒计时【/Acoolerman/article/details/82887255】

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。