与文档对象模型（DOM）交互是前端开发的核心，而这一切都始于获取对页面中特定元素的引用。JavaScript提供了多种方法，从经典的getElementById到现代的querySelector，每种方法都有其适用的场景。
![图片[1]-如何获取DOM元素？-速码派](http://www.sumapai.com/wp-content/uploads/2026/01/aaabfe57d4254491b0b32bd96b588594_tplv-tb4s082cfz-aigc_resize_1080_1080-1024x683.webp)
通过ID获取元素
document.getElementById('id')是最快、最直接的获取方式。它通过元素的id属性进行查找，并返回匹配的第一个元素（因为ID在文档中应该是唯一的）。如果没有找到，则返回null。
const header = document.getElementById('main-header');由于其内部优化，这个方法在性能上通常最优，是获取唯一元素时的首选。
通过CSS选择器获取元素
document.querySelector(selector)和document.querySelectorAll(selector)是更强大的现代方法。它们使用CSS选择器语法，可以非常精确地定位元素。
// 获取第一个匹配的 .button 元素
const firstButton = document.querySelector('.button');
// 获取所有匹配的 <li> 元素，返回一个 NodeList
const allListItems = document.querySelectorAll('ul.menu > li');querySelector返回第一个匹配的元素，而querySelectorAll返回一个静态的NodeList集合（类似数组，但不是真正的数组）。你可以使用任何有效的CSS选择器，这提供了极大的灵活性。
通过类名和标签名获取元素集合
document.getElementsByClassName('class')和document.getElementsByTagName('tag')用于获取具有特定类名或标签名的元素集合。
const warningBoxes = document.getElementsByClassName('warning');
const allParagraphs = document.getElementsByTagName('p');这两个方法返回的是动态的HTMLCollection。这意味着，如果文档发生变化（例如添加或删除了具有该类的元素），这个集合会自动更新以反映这些变化。这在某些场景下有用，但也可能导致意外的行为。
选择方法的考量
对于获取单一元素，getElementById（如果元素有ID）或querySelector是最常用的。querySelector因其灵活性，在需要复杂选择器时无可替代。
对于获取元素集合，querySelectorAll返回的静态NodeList更易于预测，因为你得到的是调用那一刻的快照。而getElementsByClassName和getElementsByTagName返回的动态集合在循环时修改DOM需要格外小心，以免出现索引错乱。
一个常见的陷阱是试图在元素加载到DOM之前就获取它。脚本通常应放在<body>标签的底部，或使用DOMContentLoaded事件来确保DOM已准备就绪。
document.addEventListener('DOMContentLoaded', function() {
const element = document.querySelector('.my-class');
// 现在可以安全地操作 element
});记住，获取到的元素引用是“活的”。修改这个元素对象，页面上的实际元素会立即反映这些变化。合理选择获取方法能让你的代码既高效又清晰。
暂无评论内容