页面加载完成5秒后如何点击无ID属性的HTML按钮

这个需求完全可以实现，不需要强制给按钮添加id属性，有多种成熟方案可选。

首先先指出你找到的参考代码本身存在两个明显问题，直接用会失效：

• setTimeout 第一个参数需要传入函数引用，你参考代码里直接写document.getElementByID('button').click()属于立即执行语句，页面加载后会立刻触发点击，不会等待5秒
• getElementById 方法只能匹配设置了对应id属性的元素，且方法名最后一个字母是小写d，参考代码里写的大写D的getElementByID本身就会抛出语法错误。

下面是三种可直接落地的实现方案：

方案1：按按钮文本精准匹配（无需修改现有HTML） #

这个方案不需要改动你现有的HTML代码，通过匹配按钮内的「Select all」文本定位元素，不会误点到旁边的「Clear selection」按钮，适配性最好：

// 等待页面DOM结构加载完成后再执行逻辑
document.addEventListener('DOMContentLoaded', () => {
  setTimeout(() => {
    // 先拿到所有同样式类的按钮，筛选出文本匹配的全选按钮
    const allBtns = document.querySelectorAll('button.btn.btn-light-alt.btn-sm');
    const selectAllBtn = Array.from(allBtns).find(btn => btn.textContent.trim() === 'Select all');
    // 找到按钮后触发点击，可选链?.避免找不到元素时报错
    selectAllBtn?.click();
  }, 5000);
});

方案2：按元素位置匹配（无需修改现有HTML） #

你的全选按钮是容器<div class="col mt-2">下的第一个按钮元素，可以直接通过CSS选择器按位置取元素，代码更简洁：

document.addEventListener('DOMContentLoaded', () => {
  setTimeout(() => {
    // 取对应容器下的第一个按钮
    const selectAllBtn = document.querySelector('.col.mt-2 button:first-of-type');
    selectAllBtn?.click();
  }, 5000);
});

注意：这个方案的缺点是如果后续你调整按钮顺序，比如把清空按钮放到全选按钮前面，就会点错。

方案3：添加专属行为类（工程化推荐方案） #

最稳妥、可维护性最高的方案是给需要JS交互的按钮加一个专门用于选择的行为类（不需要加id），不会因为按钮文本修改、顺序调整导致JS失效。
首先修改你的全选按钮HTML，加一个专属类比如js-select-all（类名前加js-前缀是前端通用约定，标识这个类是给JS用的，不要随便绑定样式）：

<div class="col mt-2">
  <button @click="selected = Array.from(header); render()" class="btn btn-light-alt btn-sm js-select-all">Select all</button>
  <button @click="selected = []" class="btn btn-light-alt btn-sm">Clear selection</button>
</div>

对应的JS逻辑非常简单，容错率最高：

document.addEventListener('DOMContentLoaded', () => {
  setTimeout(() => {
    document.querySelector('.js-select-all')?.click();
  }, 5000);
});

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