时间戳

首页 > 解决方案 > 有效地覆盖特定元素的本机 appendChild

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

问题描述

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

标签： javascript

解决方案

一种选择是创建一个递归函数，为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受到影响。（还要注意divs 和sections 不应该是spans 的孩子）

推荐阅读