适用场景:需要网页中的某个页面中选择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】