利用瀏覽器console控制檯實現JS網頁點選

RecordInLife 2020-10-13 16:35:16 3086 收藏 9
文章標籤： JavaScript
版權
適用場景：需要網頁中的某個頁面中選擇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();

效果圖：

例如：

document.getElementById('fm-login-id').value = "user使用者名稱";
document.getElementById('fm-login-password').value = "mm123456";

如果複雜的

//     $(document.getElementsByTagName("iframe")[2]).contents().find("#s_filter_frame")[0].contentWindow.document.getElementById("o_id").value = "設定的input值"

————————————————
版權宣告：本文為CSDN博主「RecordInLife」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處連結及本宣告。
原文連結：https://blog.csdn.net/itzhengmaolin/article/details/109052454