咨询：getElementsByClassName返回数组部分成员为undefined的原因

Hey, let's walk through the most likely reasons you're hitting this issue, especially since you suspect the checkboxes are in closed (invisible) dropdowns:

• 动态HTMLCollection的遍历陷阱
  document.getElementsByClassName()返回的是一个实时更新的HTMLCollection，而非静态数组。这意味着如果你在操作这个集合的过程中DOM发生了变化（比如下拉菜单关闭时移除了内部元素），集合会实时更新。举个例子：如果你用for循环遍历它，循环条件依赖当前集合长度，而中途有元素被移除，集合长度会缩小，后续循环就可能访问到不存在的索引，结果就是undefined。

  解决办法是先把实时集合转成静态数组，这样就不会随DOM变化而改变：

  // 转成静态数组方式一
  const patterns = Array.from(document.getElementsByClassName('pattern-checkbox'));
  // 转成静态数组方式二
  const patterns = [...document.getElementsByClassName('pattern-checkbox')];
  

• 条件渲染导致元素未挂载
  如果你的下拉菜单是用React、Vue这类框架构建的，关闭下拉菜单可能会触发条件渲染，直接卸载掉内部的复选框元素（不是单纯隐藏）。所以当你的代码在下拉菜单关闭时执行，这些复选框其实根本不在DOM里——只有当下拉菜单打开时才会被渲染出来。这就解释了为什么你在DevTools里打开下拉菜单能看到复选框，但代码执行时却拿到undefined。

  这种情况要注意代码执行时机：要么在下拉菜单打开、元素渲染完成后再执行，要么用框架提供的生命周期方法/钩子，在元素挂载后再去访问。

• 元素被替换而非单纯隐藏
  有些UI库处理隐藏内容的方式不是切换display: none这类CSS属性，而是直接替换元素。比如关闭下拉菜单时，会把内部内容换成占位符，或者直接把复选框元素从DOM中移除，直到下拉菜单被激活。这种情况下，只有下拉菜单可见时复选框才存在于DOM中，关闭状态下你的代码自然会拿到undefined。

• Shadow DOM的封装隔离
  如果复选框是在Shadow DOM（常见于Web Component）内部，document.getElementsByClassName()无法直接访问到它们——因为Shadow DOM有自己独立的DOM树，外部无法直接穿透。不过如果你能在DevTools的主DOM面板里看到这个复选框，那这个原因的可能性就很低了。

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