Question

我正在尝试为本地的appendChild插入一些特殊方法方法，但我想覆盖特定元素的appendChild而不是覆盖所有元素的Element.prototype.appendChild。我可以创建一个将我的appendChild添加到每个元素的方法，但是它将为大量元素创建不必要的开销。我目前正在使用element.clone(true)从dom（可以有多个子级）中克隆某些元素，并且我想将对克隆的元素上的appendChild的所有调用“代理”到原始元素。是否可以更高效地完成而不一次覆盖每个元素？

Answer 1

一种选择是制作一个递归函数，以在每个孩子上创建自定义appendChild属性：

function customAppendChild(elm) {
  elm.appendChild = function() {
    console.log('insert custom logic here');
  };
  [...elm.children].forEach(customAppendChild);
  return elm;
}
const clone = elm => customAppendChild(elm.cloneNode(true));

const cloned = clone(document.getElementById("test1"));
console.log(Element.prototype.appendChild);
console.log(cloned.appendChild);
console.log(cloned.children[0].appendChild)

<div id="test1">
  <span id="test2">
  <section id="test3">
    <div id="test4">
    </div>
  </section>
</span>
</div>

不是通过clone创建的元素不会受到影响。（还请注意，div和section不应是span s的子对象）

有效覆盖特定元素的本机appendChild

1 个答案: