本文介绍在 dom 中精准定位并依次触发多个 `role="button"` 的 `.wbloks_1` 元素点击行为的可靠方案，解决因动态渲染、事件绑定时机或 `pointer-events: none` 导致的直接遍历点击失败问题。
在 Instagram 等基于 Bloks 架构的 Web 应用中，常见一类视觉上为复选框、语义上为按钮（role="button"）、但实际由
实现且带有 pointer-events: none 样式的交互元素（如“隐藏故事来源”设置页中的切换控件）。此时，简单使用 getElementsByClassName('wbloks_1') 并循环调用 .click() 往往无效——原因包括：
- getElementsByClassName 返回的是实时 HTMLCollection，遍历时若 DOM 变化（如点击后元素重排/移除），索引易越界或指向失效节点；
- 目标元素本身设置了 pointer-events: none，但 .click() 方法不依赖 CSS 交互属性，只要元素存在于 DOM 且具备可点击语义（如 role="button" 或 tabindex），原生 click() 即可触发其绑定的事件处理器；
- 更关键的是：原始代码试图为每个元素添加监听器（addEventListener），而非触发点击，逻辑目标与实现严重错位。
✅ 正确做法是：筛选出真正承担按钮功能的元素 → 转为静态数组 → 按序触发 .click() → 控制节奏避免请求过载。
以下为推荐的健壮实现：
const autoClickRoleButtons = () => {
// 精准选取：仅匹配 role="button" 且含 .wbloks_1 类的元素（排除容器）
const buttons = Array.from(
document.querySelectorAll('.wbloks_1[role="button"]')
);
if (buttons.length === 0) {
console.warn('⚠️ 未找到任何 role="button" 的 .wbloks_1 元素');
return;
}
const triggerNext = () => {
const btn = buttons.shift();
if (!btn) return;
try {
btn.click(); // 触发原生点击事件
console.log(`✅ 已点击第 ${buttons.length + 1} 个按钮`);
} catch (err) {
console.error(`❌ 点击失败：`, err);
}
// 递归调用，间隔 6 秒（适配 Instagram 后端防刷策略）
if (buttons.length > 0) {
setTimeout(triggerNext, 6000);
}
};
triggerNext();
};
// 执行批量点击
autoClickRoleButtons();? 关键优化说明：
- 使用 document.querySelectorAll('.wbloks_1[role="button"]') 确保只选取语义为按钮的目标元素，避免误操作父容器；
- Array.from() 将 NodeList 转为不可变数组，防止 DOM 更新导致遍历异常；
- setTimeout 替代同步循环，既规避浏览器阻塞，又符合 Instagram 对频繁操作的风控要求（实测 6s 间隔稳定有效）；
- 内置错误捕获与日志，便于调试定位失效节点。
? 注意事项：
- 请在 Instagram 设置页「Hide Story From」完全加载后执行脚本（建议手动滚动到底部确保所有项渲染完成）；
- 避免在 DevTools Console 中重复运行，否则可能对已点击项重复触发；
- 此方法适用于前端自动化场景（如辅助无障碍操作），不适用于绕过平台安全机制，请遵守 Instagram 的《开发者政策》与《服务条款》。
掌握这一模式后，你可轻松迁移至其他类似架构（如 Meta 系列 App、React/Bloks 渲染的管理后台），核心始终是：语义优先、静态快照、节制触发、可观测反馈。
