使用forEach替换span为input时出现replaceChild DOMException错误求助

错误原因 #

你通过tarifAModifier.getElementsByTagName("span")获取了容器内所有层级的span元素，但调用tarifAModifier.replaceChild()时，要求被替换的element必须是tarifAModifier的直接子节点。如果遍历到的span是嵌套在其他元素内部的后代节点，就会触发这个DOM错误。

修复代码 #

将替换逻辑改为使用当前span的父节点执行替换操作，修改后的代码如下：

test({params:{idtarif}}){
   
    let tarifAModifier = document.getElementById('tarif-'+idtarif)
    let listeSpans = Array.from(tarifAModifier.getElementsByTagName("span"))

    listeSpans.forEach(element => {
        let classEl = element.classList.value
        if(classEl){
            let contenuEl = element.textContent
            let inputToDisplay = document.createElement('input')
            inputToDisplay.type = 'text'
            inputToDisplay.maxLength = 50
            inputToDisplay.setAttribute('value', contenuEl)
            inputToDisplay.classList.add(classEl)

            // 关键修改：用element的父节点执行替换
            element.parentNode.replaceChild(inputToDisplay, element)
        }

    });

}

补充说明 #

如果你的需求是只替换容器的直接子节点span，也可以调整获取元素的方式，只获取直接子节点：

// 替换原获取span的代码
let listeSpans = Array.from(tarifAModifier.querySelectorAll(':scope > span'));

这种情况下，继续使用tarifAModifier.replaceChild()也不会报错，因为所有span都是容器的直接子节点。

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