链式调用getElementsByClassName报not a function错误如何解决

• getElementsByClassName 方法的返回值是 类数组结构的HTMLCollection对象，会匹配页面中所有符合类名的DOM元素，而不是单个DOM节点。只有单个DOM节点才拥有getElementsByClassName等DOM操作方法，集合对象本身没有该方法，因此链式调用直接抛出函数未定义错误。
• 其余隐藏错误：后续获取的element变量同样是HTMLCollection集合，而removeChild方法要求传入单个DOM节点作为参数，直接传集合也会触发报错。

推荐优先使用querySelector方法直接获取单个DOM元素，写法更简洁不易出错：

方案1：直接删除目标元素（兼容现代浏览器） #

const targetElement = document.querySelector('.element_i_want_to_access')
// 判空避免元素不存在时报错
if (targetElement) {
  targetElement.remove()
}

方案2：通过父节点删除（兼容旧版本浏览器） #

const targetElement = document.querySelector('.element_i_want_to_access')
if (targetElement) {
  targetElement.parentNode.removeChild(targetElement)
}

方案3：如果必须使用getElementsByClassName实现 #

需要通过索引从集合中取出单个DOM元素再操作：

// 取第一个匹配类名的container-xl元素
const container = document.getElementsByClassName('container-xl')[0]
// 从container下取第一个匹配类名的row元素
const parentRow = container.getElementsByClassName('row')[0]
// 取第一个匹配的目标元素
const targetElement = document.getElementsByClassName('element_i_want_to_access')[0]
if (parentRow && targetElement) {
  parentRow.removeChild(targetElement)
}

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