调用JS的replaceChild替换h2元素报错，转数组也不生效是什么原因？

核心报错原因 #

你遇到的类型错误本质是replaceChild方法的入参类型不匹配：
Node.replaceChild(newNode, oldNode)方法要求第二个参数oldNode必须是一个存在于DOM树中的单个Node类型节点，而你代码里传入的prevHeading不是单个节点，因此抛出parameter 2 is not of type 'Node'的错误。 #

具体细节说明 #

• document.getElementsByClassName的返回值是HTMLCollection类型，这是一种类数组的节点集合对象，无论页面匹配到多少个符合类名的元素，都以该集合结构返回。哪怕页面只有1个匹配的h2元素，这个元素也只会存放在集合的[0]下标位置，集合本身不属于Node类型。
• 你尝试将获取的元素转为数组也不生效的原因：就算把HTMLCollection转为普通数组，得到的依然是「由Node节点组成的数组」，不是单个Node节点，传入replaceChild依然不符合参数类型要求，必须取出集合/数组中对应的单个节点才可以正常调用方法。

对应代码逻辑验证 #

你的代码里const prevHeading = document.getElementsByClassName('my-title')拿到的是包含目标h2节点的集合，不是h2节点本身：

• 改为prevHeading[0]就是取出集合中第一个匹配的单个Node节点，符合replaceChild的入参要求
• 改为document.querySelector('.my-title')也可以正常运行，是因为querySelectorAPI本身返回的就是匹配到的第一个单个DOM节点，直接符合入参要求。

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