如何解决JavaScript中getElementsByClassName获取元素返回undefined的问题？

架构老林

2026-5-8

为什么获取元素时返回undefined或空HTMLCollection？

我来帮你捋捋你遇到的这个问题，大概率是下面这几个常见原因导致的：

代码执行时机过早
这是最容易踩的坑！如果你的JavaScript代码在页面DOM还没完全加载解析的时候就运行了，浏览器此时还没读到那个带js-ticket-count类的<div>，自然就获取不到元素。比如你把JS代码放在<head>标签里，或者页面最顶部，这时候DOM树还没构建完成，getElementsByClassName会返回一个空的HTMLCollection，取索引[0]当然就是undefined。
解决办法很简单：把JS代码移到<body>标签的末尾，或者用事件监听等待DOM加载完成后再执行代码，示例如下：
```
document.addEventListener('DOMContentLoaded', function() {
  var x1 = document.getElementsByClassName('js-ticket-count')[0];
  console.log(x1); // 现在应该能正常获取到元素了
});
```
HTML标签未正确闭合
看你提供的HTML代码，存在明显的标签闭合问题：
- 所有的<p>标签都没写闭合标签</p>，你写的是<p id='style-1'>test<p>，正确的应该是<p id='style-1'>test</p>
- 外层的<div class='js-ticket-count'>虽然最后有</div>，但前面未闭合的<p>会导致浏览器的DOM解析器出现异常，可能把原本的结构打乱，使得js-ticket-count类对应的元素没有被正确识别，最终导致获取不到。
修复这些未闭合的标签后，浏览器才能正确构建DOM树，你也就能正常获取到目标元素了。
类名拼写/格式问题（排查项）
虽然你代码里的类名看起来一致，但还是可以确认下有没有大小写错误、多余空格或者符号差异——比如HTML里是js-ticket-count，JS里是不是误写成了Js-Ticket-Count或者js ticket count之类的，不过这个可能性比较小，但排查的时候可以留意下。