复制含display:none类的DOM元素后如何修改样式/类？及优化DOM获取方式

现有JS代码通过e.target.parentElement.children[1].children[1].outerHTML获取目标div的outerHTML，赋值给imgText的outerHTML后，虽然完成了元素复制，但因为原div带有的img-text类（CSS为display:none）被一并复制，导致新位置的元素无法显示。目标div结构如下：

<div class="img-text row">
  <div class="col-6">
    <p class="img-text">
      test2
    </p>
  </div>
  <div class="col-6">
    <p class="img-text">
      test
    </p>
  </div>
</div>

需要解决两个问题：

1. 如何修改复制后的元素，让它正常显示？
2. 有没有比当前parentElement.children链式调用更靠谱的DOM元素获取方式？

一、让复制后的元素正常显示 #

1. 移除img-text类（推荐） #

别直接用outerHTML赋值，先克隆DOM节点再操作类名：

// 获取目标DOM节点（不要转成HTML字符串）
const targetDiv = e.target.parentElement.children[1].children[1];
// 深克隆元素（包含所有子节点）
const clonedDiv = targetDiv.cloneNode(true);
// 移除隐藏类
clonedDiv.classList.remove('img-text');
// 插入到目标位置
imgText.innerHTML = '';
imgText.appendChild(clonedDiv);

2. 强制设置显示样式 #

如果不想移除类，直接给克隆元素加行内样式覆盖CSS规则：

const clonedDiv = targetDiv.cloneNode(true);
// 根据你的布局需求选display值，比如block、flex等
clonedDiv.style.display = 'block';
imgText.appendChild(clonedDiv);

3. 修改HTML字符串（不推荐） #

如果一定要用outerHTML，可以先替换掉类名再赋值：

let htmlStr = e.target.parentElement.children[1].children[1].outerHTML;
// 替换掉img-text类（注意如果有多个类要处理好空格）
htmlStr = htmlStr.replace('img-text ', '');
imgText.outerHTML = htmlStr;

二、更健壮的DOM元素获取方式 #

当前用parentElement.children[1].children[1]完全依赖DOM结构顺序，只要页面结构微调，代码就会失效，推荐以下几种方式：

1. 用closest()向上查找 #

给目标元素加一个唯一标识类（比如target-img-container），然后通过点击元素向上找：

const targetDiv = e.target.closest('.target-img-container');

如果不能加新类，也可以用现有类组合：

const targetDiv = e.target.closest('.img-text.row');

2. 用querySelector()直接定位 #

如果目标元素在页面中有唯一的上下文，直接用选择器获取：

// 比如通过父容器定位
const targetDiv = document.querySelector('.parent-container .img-text.row');

3. 自定义属性标记 #

给目标div加data-target="img-text-box"，然后通过属性选择器获取：

const targetDiv = document.querySelector('[data-target="img-text-box"]');

这些方式都比硬写索引灵活得多，DOM结构小改动不会影响代码运行。

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