如何编写用户脚本点击匹配指定数组的DOM元素？

可运行代码（优化版） #

$(document).ready(function searchAndGet() {
    // 获取所有带.class-name类的元素
    const elements = document.querySelectorAll('.class-name');
    // 目标匹配的data-name值数组
    const toMatch = ["Example1", "Example2", "Example3"];
    // 筛选出第一个data-name匹配的元素
    const matchedElement = Array.from(elements).find(element => toMatch.includes(element.dataset.name));
    
    console.log('找到的匹配元素:', matchedElement);

    // 生成700-1900毫秒的随机延迟（模拟人工操作）
    const getRandomNumber = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
    const delay = getRandomNumber(700, 1900);

    // 如果找到匹配元素，延迟后执行点击
    if (matchedElement) {
        setTimeout(() => {
            matchedElement.click();
        }, delay);
    }
});

关键逻辑说明 #

• DOM加载时机：用$(document).ready()确保页面DOM完全渲染后再执行操作，避免出现找不到元素的情况。
• 元素选择与匹配：
  • 用document.querySelectorAll('.class-name')一次性获取所有目标元素；
  • 用Array.from()把NodeList转为数组，再用find()方法快速定位第一个data-name在目标数组中的元素（find()比filter().at(0)更高效，找到匹配项就停止遍历）。
• 随机延迟：直接生成毫秒级的随机数，省去单位转换步骤，模拟人工点击的随机性。
• 单次执行：使用setTimeout替代原代码的setInterval，确保点击操作仅执行一次，避免重复触发。

原代码的问题修正 #

1. 未定义变量：原代码中items变量未声明，导致items.each()无法执行，直接选择所有.class-name元素即可完成遍历。
2. 冗余逻辑：原代码嵌套查找.class-name元素，属于多余操作，直接选择目标元素更简洁。
3. 定时器误用：setInterval会周期性重复执行代码，不符合"仅点击一次"的需求，改用setTimeout更合理。

内容的提问来源于stack exchange，提问作者user26839name