js实现unwrap
实现 unwrap 功能
在 JavaScript 中，unwrap 通常指从 DOM 中移除元素的父节点，同时保留其子节点。以下是实现方法：
方法一：使用 replaceWith 和展开操作符
function unwrap(element) {
const parent = element.parentNode;
if (!parent || parent === document.body) return;
parent.replaceWith(...parent.childNodes);
}方法二：遍历子节点并重新插入
function unwrap(element) {
const parent = element.parentNode;
if (!parent || parent === document.body) return;
while (parent.firstChild) {
parent.parentNode.insertBefore(parent.firstChild, parent);
}
parent.remove();
}使用示例
<div id="wrapper">
<p>This paragraph will be unwrapped</p>
</div>
<script>
const wrapper = document.getElementById('wrapper');
unwrap(wrapper);
</script>注意事项
- 该方法会保留所有子节点的原始位置和属性
- 如果父节点是
document.body，则不会执行操作以防止破坏页面结构 - 事件监听器和数据属性会随子节点一起保留
扩展功能
需要处理特定选择器时：
function unwrap(selector) {
document.querySelectorAll(selector).forEach(element => {
const parent = element.parentNode;
if (!parent || parent === document.body) return;
parent.replaceWith(...parent.childNodes);
});
}兼容性说明
replaceWith方法在现代浏览器中都支持- 如果需要支持旧版浏览器，可采用方法二的实现方式
- 操作前建议检查父节点是否存在
