如何按类型查找HTML元素？是否存在对应实现机制？

当然有，原生JS里就有几种直接按元素类型获取DOM元素的实用机制，常用的有这两个：

• getElementsByTagName()：这是老牌的原生方法，直接传入元素标签名就能获取对应类型的所有元素，返回一个动态的HTMLCollection——意思是后续DOM结构变化时，这个集合会自动同步更新。
  示例代码：

  // 获取页面所有div元素
  const allDivs = document.getElementsByTagName('div');
  // 遍历处理元素
  for (let elem of allDivs) {
    elem.style.border = '1px solid #ccc';
  }
  

• querySelectorAll()：这个方法灵活性更高，支持完整的CSS选择器语法，不仅能按标签名筛选，还能结合属性、类名等做精准匹配，返回的是静态的NodeList，也就是当前DOM状态的快照，后续DOM变化不会影响这个集合。
  示例代码：

  // 获取所有button元素
  const allButtons = document.querySelectorAll('button');
  // 直接用forEach遍历绑定事件
  allButtons.forEach(btn => btn.addEventListener('click', () => alert('按钮被点击')));
  
  // 进阶用法：获取所有类型为checkbox的input元素
  const checkboxes = document.querySelectorAll('input[type="checkbox"]');
  

两者的核心差异：如果业务需要实时同步DOM的动态变化，getElementsByTagName()更适配；如果只需要一次性获取当前状态的元素，querySelectorAll()的遍历体验更友好（原生支持forEach）。

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