如何通过自定义事件监听器程序化点击元素？Chase网站mds元素访问问题

问题根源 #

你遇到的document.querySelector()/document.getElementById()返回null的情况，是因为mds-button这类元素是Web Components自定义组件，它们大概率被封装在Shadow DOM内部。普通DOM选择器无法直接穿透Shadow DOM访问内部元素；而你之前触发自定义事件无响应，可能是因为事件绑定的目标不是window，或者事件名称、触发方式不正确。

可行解决方案 #

1. 穿透Shadow DOM查找目标元素 #

先写一个递归函数，遍历所有Shadow DOM节点，定位目标的mds-button：

// 递归查找Shadow DOM内的元素
function getShadowElement(selector, root = document) {
  // 先在当前根节点查找
  let el = root.querySelector(selector);
  if (el) return el;
  // 遍历所有带ShadowRoot的宿主元素
  const shadowHosts = root.querySelectorAll('*');
  for (const host of shadowHosts) {
    if (host.shadowRoot) {
      el = getShadowElement(selector, host.shadowRoot);
      if (el) return el;
    }
  }
  return null;
}

2. 等待元素加载完成 #

Chase页面多为异步加载，需要轮询等待元素出现后再操作：

function waitAndTriggerMenu() {
  // 替换成你观察到的汉堡菜单按钮的准确选择器，比如带aria-label标识的
  const hamburgerBtn = getShadowElement('mds-button[aria-label="打开菜单"]');
  if (hamburgerBtn) {
    // 触发真实点击事件
    hamburgerBtn.click();
    return;
  }
  // 未找到则100ms后重试
  setTimeout(waitAndTriggerMenu, 100);
}

// 启动触发逻辑
waitAndTriggerMenu();

3. 备选事件触发方式 #

如果click()方法无效，尝试构造标准鼠标事件触发：

const clickEvent = new MouseEvent('click', {
  bubbles: true,
  cancelable: true,
  view: window
});
hamburgerBtn.dispatchEvent(clickEvent);

额外注意事项 #

• 在Tampermonkey脚本头部设置@run-at document-idle，确保脚本在页面大部分资源加载完成后执行。
• 可通过Chrome DevTools的Elements面板（需开启Settings > Elements > Show user agent shadow DOM）展开Shadow DOM节点，确认按钮的准确选择器。
• 查看按钮的事件监听器，确认绑定的事件类型（比如是否是click而非自定义事件），避免用错事件名。

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