LXML如何移除img标签外层父元素并保留其在article内原位置

核心思路是找到img元素在article下的最顶层包裹节点，直接用img替换该顶层节点，即可保留原有位置，无需移动元素到article末尾。

原生JavaScript实现代码 #

const article = document.querySelector('article');
// 获取article下所有img标签
const allImgs = article.querySelectorAll('img');

allImgs.forEach(img => {
  let topWrapper = img;
  // 向上遍历祖先节点，直到找到父级为article的顶层包裹元素
  while (topWrapper.parentElement !== article) {
    topWrapper = topWrapper.parentElement;
  }
  // 仅当img存在外层包裹时执行替换操作
  if (topWrapper !== img) {
    // replaceChild会直接让img占据topWrapper的原有位置，不改变前后元素顺序
    article.replaceChild(img, topWrapper);
  }
});

方案说明 #

• replaceChild是DOM原生API，调用该方法时新节点会完全替换旧节点的位置，不会打乱原有文档流顺序，避免了append方法把元素放到最后的问题
• 无需提前知道img的嵌套层级和父标签类型，向上遍历逻辑会自动匹配到最顶层的包裹元素
• 已兼容img本身就是article直接子元素的场景，不会执行多余操作

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