javascript如何选取HTML元素?【教程】

JavaScript选取HTML元素应优先用document.getElementById()(最快,需id唯一)、querySelector()(灵活支持CSS选择器,只返首个)、querySelectorAll()(返全部匹配节点,返回静态NodeList);慎用getElementsByTagName等动态集合方法。

JavaScript 选取 HTML 元素的核心方法就那几个,但选错会导致 undefinednull 报错,或取到错误的节点。关键不是“会写”,而是“知道该用哪个、什么时候用、为什么失败”。

document.getElementById() 取单个带 id 的元素

这是最快、最直接的方式,浏览器内部做了优化,性能最好。但前提是目标元素有 id 属性,且全局唯一(重复 id 时只返回第一个)。

常见错误:

  • 拼错 id 字符串(大小写敏感、多空格、少字符)
  • 脚本执行时

    DOM 还没加载完,导致返回 null
  • 误以为它能匹配 class 或标签名(它不能)

确保执行时机安全的做法是放在 DOMContentLoaded 事件里,或者把 放在