如何用原生JavaScript替换DOM元素并保留所有数据与事件监听器？

是的，存在可行方法实现完整保留原元素的所有属性、事件监听器及自定义数据，以下分两种场景给出解决方案：

场景1：可提前拦截事件绑定（页面加载时注入代码） #

如果能在页面其他脚本执行前注入代码，我们可以重写原生的事件绑定方法，记录所有绑定的事件，替换元素时就能将这些事件转移到新元素上。

实现代码： #

// 用WeakMap记录元素的所有事件监听器，避免内存泄漏
const eventRegistry = new WeakMap();

// 重写addEventListener，记录事件
const originalAdd = Element.prototype.addEventListener;
Element.prototype.addEventListener = function(type, listener, options) {
    if (!eventRegistry.has(this)) {
        eventRegistry.set(this, new Map());
    }
    const events = eventRegistry.get(this);
    if (!events.has(type)) {
        events.set(type, []);
    }
    events.get(type).push({ listener, options });
    originalAdd.call(this, type, listener, options);
};

// 重写removeEventListener，同步更新记录
const originalRemove = Element.prototype.removeEventListener;
Element.prototype.removeEventListener = function(type, listener, options) {
    if (!eventRegistry.has(this)) return;
    const events = eventRegistry.get(this);
    if (!events.has(type)) return;
    const targetIndex = events.get(type).findIndex(item => 
        item.listener === listener && JSON.stringify(item.options) === JSON.stringify(options)
    );
    if (targetIndex !== -1) {
        events.get(type).splice(targetIndex, 1);
    }
    originalRemove.call(this, type, listener, options);
};

// 自定义替换函数，完整转移所有数据
function replaceElement(originalEl, newEl) {
    // 复制HTML属性
    for (const attr of originalEl.attributes) {
        newEl.setAttribute(attr.name, attr.value);
    }

    // 复制dataset自定义数据
    Object.assign(newEl.dataset, originalEl.dataset);

    // 复制直接挂载的自定义属性（非原型链方法）
    for (const key of Object.keys(originalEl)) {
        if (!newEl.hasOwnProperty(key) && typeof originalEl[key] !== 'function') {
            newEl[key] = originalEl[key];
        }
    }

    // 复制on*类型的事件（如onkeyup）
    for (const key of Object.getOwnPropertyNames(originalEl)) {
        if (key.startsWith('on') && typeof originalEl[key] === 'function') {
            newEl[key] = originalEl[key];
        }
    }

    // 转移addEventListener绑定的事件
    if (eventRegistry.has(originalEl)) {
        const events = eventRegistry.get(originalEl);
        for (const [type, listeners] of events) {
            for (const { listener, options } of listeners) {
                newEl.addEventListener(type, listener, options);
            }
        }
    }

    // 转移子节点
    while (originalEl.firstChild) {
        newEl.appendChild(originalEl.firstChild);
    }

    // 替换元素
    originalEl.replaceWith(newEl);
    return newEl;
}

// 测试代码
let el = document.querySelector('#elem');

function changeElem() {
    const newEl = document.createElement('textarea');
    el = replaceElement(el, newEl);
}

// 绑定测试事件
el.addEventListener('keyup', evt => {
    if(evt.code=='KeyM')alert('Key M pressed!');
});

Try to press <b>M</b> to check if event listeners are attached:
<br>
<input id="elem" type="text" value="Some value">
<br>
<button onclick="changeElem()">Click to replace</button>

场景2：无法提前拦截事件绑定（仅替换时处理） #

如果无法提前注入代码拦截事件绑定，标准JS没有办法直接获取元素上通过addEventListener绑定的所有事件（getEventListeners是浏览器开发者工具私有API，不能用于生产环境）。这种情况下，事件委托是更可靠的替代方案：

实现思路： #

1. 不在目标元素上直接绑定事件，而是在其共同父元素上绑定事件，利用事件冒泡机制处理。
2. 替换元素时，只要新元素的选择器和原元素匹配，事件就会自动生效。

示例代码： #

// 在父元素上绑定事件委托
document.body.addEventListener('keyup', evt => {
    if (evt.target.matches('#elem') && evt.code == 'KeyM') {
        alert('Key M pressed!');
    }
});

let el = document.querySelector('#elem');

function changeElem() {
    const newEl = document.createElement('textarea');
    // 复制属性
    for (const attr of el.attributes) {
        newEl.setAttribute(attr.name, attr.value);
    }
    el.replaceWith(newEl);
    el = newEl;
}

关键说明 #

• 第一种方法可以完美保留所有属性、事件和自定义数据，但需要提前注入代码拦截事件绑定。
• 第二种方法无需提前拦截，兼容性更好，但需要将原元素的直接事件绑定改为事件委托模式。

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