JavaScript：HTMLCollection节点拼接失效原因及解决方法

嘿，这个问题我之前也碰到过！咱们先搞清楚为啥你的代码会出问题，再给你几个靠谱的解决办法。

首先得明确：document.getElementsByClassName() 返回的是 HTMLCollection——这是一个实时的类数组对象，既不是字符串，也不是普通的JS数组。

当你用 += 操作符的时候，JavaScript会自动把两边的操作数转换成字符串来执行拼接。所以你的第二行代码本质上是把两个HTMLCollection都转成了类似 [object HTMLCollection] 的字符串，然后拼在一起。结果就是nodes从原本的节点集合变成了一段毫无用处的字符串，自然就出现了“损坏”的情况。

方法1：转成普通数组后合并（非实时） #

如果不需要集合实时同步DOM的变化，最直接的方式是把HTMLCollection转换成普通数组，再用数组的concat方法合并，或者用ES6的扩展运算符简化写法：

// 方式A：用Array.from转成数组再concat
const abcNodes = Array.from(document.getElementsByClassName("abc"));
const xyzNodes = Array.from(document.getElementsByClassName("xyz"));
const combinedNodes = abcNodes.concat(xyzNodes);

// 方式B：用扩展运算符一步到位
const combinedNodes = [...document.getElementsByClassName("abc"), ...document.getElementsByClassName("xyz")];

这样得到的combinedNodes是一个普通数组，包含了所有.abc和.xyz的元素。缺点是它是静态的——如果之后DOM里新增/删除了对应类的元素，这个数组不会自动更新。

方法2：用querySelectorAll一次性获取（静态NodeList） #

如果你只是想一次性获取所有.abc和.xyz的元素，完全可以用querySelectorAll，它支持用逗号分隔多个选择器：

const combinedNodes = document.querySelectorAll(".abc, .xyz");

这个方法返回的是NodeList（也是类数组对象），和HTMLCollection的区别是：querySelectorAll返回的是静态集合，不会随DOM变化自动更新；而getElementsByClassName返回的是实时集合。如果你的场景不需要实时更新，这个写法最简洁。

方法3：实现实时合并的集合（进阶） #

如果确实需要一个实时的合并集合（DOM变化时自动更新），原生没有直接的方法，但可以自己封装一个简单的逻辑：

function getCombinedLiveNodes() {
  const abc = document.getElementsByClassName("abc");
  const xyz = document.getElementsByClassName("xyz");
  // 每次调用都会重新获取最新的节点并合并
  return [...abc, ...xyz];
}

// 每次需要使用最新的合并结果时，调用这个函数即可
const currentCombined = getCombinedLiveNodes();

这样每次调用getCombinedLiveNodes()都会拿到当前DOM中最新的.abc和.xyz节点，相当于模拟了实时集合的效果。

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