如何通过data-tutorial-selector-id属性点击动态ID的按钮？

我需要一段JavaScript代码来点击以下按钮：

<div tabindex="0" role="button" id="id_72229384732282" class="collapsed focus-visible" data-tutorial-selector-id="filterButton" aria-label="Filter rows">

该按钮的id（id_72229384732282）是动态的，页面刷新后会改变，无法直接使用该id定位。我希望通过data-tutorial-selector-id="filterButton"来实现点击操作，但尝试了以下方法均未成功：

document.getElementsByClassName('filterButton').click();

document.getElementById("filterButton");

恳请提供可行的解决方案。

可行解决方案 #

你之前的方法失效原因是选择器用错了：

• getElementsByClassName是按类名查找，但filterButton是data-tutorial-selector-id的属性值，不是类名
• getElementById是按id查找，而按钮的id是动态生成的，filterButton并非它的id

以下是几种正确的实现方式：

方法1：属性选择器 + querySelector #

适合页面中只有一个目标按钮的场景，直接匹配第一个符合条件的元素：

const filterBtn = document.querySelector('[data-tutorial-selector-id="filterButton"]');
if (filterBtn) {
  filterBtn.click();
}

方法2：属性选择器 + querySelectorAll（处理多元素） #

如果页面存在多个符合条件的按钮，可以遍历所有匹配元素并点击：

const filterBtns = document.querySelectorAll('[data-tutorial-selector-id="filterButton"]');
filterBtns.forEach(btn => btn.click());

方法3：确保元素已加载 #

如果代码执行时按钮还未渲染完成，会出现找不到元素的情况，可通过以下方式处理：

• 等待DOM加载完成后执行：

document.addEventListener('DOMContentLoaded', () => {
  const filterBtn = document.querySelector('[data-tutorial-selector-id="filterButton"]');
  if (filterBtn) {
    filterBtn.click();
  }
});

• 针对异步加载的按钮（如AJAX渲染），用轮询方式直到找到元素：

const checkAndClickBtn = setInterval(() => {
  const filterBtn = document.querySelector('[data-tutorial-selector-id="filterButton"]');
  if (filterBtn) {
    filterBtn.click();
    clearInterval(checkAndClickBtn); // 找到后停止轮询
  }
}, 500); // 每500毫秒检查一次

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