importNode函数deep参数的特殊场景及使用疑问

问题描述 #

第一次接触importNode函数，对其中的deep参数不太理解。MDN文档描述如下：

一个布尔值标志，默认值为false，用于控制导入externalNode时是否包含其整个DOM子树。若deep设为true，则复制externalNode及其所有后代；若设为false，则仅导入externalNode本身——新节点不包含子元素。

测试时，设置deep=true可以正常复制整个父元素，但设置deep=false时似乎没有效果。这让我意识到自己并未真正理解文档内容，想请教：为什么需要设置deep=false？

代码示例 #

JavaScript #

const btn1 = document.querySelector(".deep-true");
const btn2 = document.querySelector(".deep-false");
btn1.addEventListener("click", appendElement_1.bind())
btn2.addEventListener("click", appendElement_2.bind())

function appendElement_1() {
  const parent = document.querySelector("div .parent");
  const node = document.importNode(parent, true);
  document.body.appendChild(node);
}

function appendElement_2() {
  const parent = document.querySelector("div .parent");
  const node = document.importNode(parent, false);
  document.body.appendChild(node);
}

CSS #

span {
  color: green;
}
.parent {
  background: green;
  height:20px;
  border: 1px solid red;
}

HTML #

<div id="app">
  
  <div class="parent">
    <div class="child">
      <p>hello <span>World</span></p>
      <h1>Bye</h1>      
    </div>

  </div>

  <button class="deep-true">ImportNode (deep: true)</button>
  <button class="deep-false">ImportNode (deep: false)</button>
</div>

解答 #

你觉得deep=false没效果，是因为你的.parent元素设置了固定高度和边框样式——即使它的子节点没被复制，这个空的.parent元素依然会显示出绿色背景、红色边框的20px高度块，看起来和原节点的视觉差别不大，但实际上它内部的.child、<p>、<h1>这些子元素都没有被导入。

设置deep=false的核心场景是只需要复制节点本身，不需要连带复制它的子树，常见的使用场景包括：

• 复用某个节点的样式或属性，但需要清空内容重新填充新子元素。比如复制一个卡片容器，替换里面的文本和图片，用deep=false就不用手动删除原有子节点。
• 处理<input>、<img>这类本身不包含子节点的元素，此时deep=false是默认且合理的选择。
• 性能优化：当目标节点的子树非常庞大，但你只需要节点本身时，deep=false可以避免不必要的DOM节点复制，提升操作效率。

如果你的.parent没有设置固定高度，点击deep=false按钮后，导入的节点高度会变成0（没有子元素撑高），就能明显看出和deep=true的区别。

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