如何获取创建HTML元素的源文档引用？非ownerDocument属性

嘿，我完全懂你的需求——你要的是元素被创建时所在的原始文档引用，而不是它现在所处的ownerDocument（毕竟把A iframe里创建的元素移到B里，ownerDocument就变成B了，这确实不是你要的目标）。

可惜的是，原生DOM并没有内置类似creatorDocument这样的属性，因为DOM的设计逻辑更关注元素当前的归属，而非它的“出身”。不过我们可以自己实现这个追踪功能，下面给你两种靠谱的方案：

方案一：用WeakMap手动绑定创建文档 #

WeakMap是个绝佳的选择，因为它不会阻止垃圾回收（避免内存泄漏），而且能安全地把元素和它的创建文档关联起来。我们可以封装一个创建元素的工具函数，自动记录元素的“出生地”：

// 全局WeakMap，存储元素与创建文档的映射
const elementCreatorMap = new WeakMap();

// 封装创建元素的方法，自动绑定创建文档
function createElementWithCreator(doc, tagName, options = {}) {
  const element = doc.createElement(tagName, options);
  elementCreatorMap.set(element, doc);
  return element;
}

// 使用示例
// 假设iframeA是页面中的A iframe元素
const docA = iframeA.contentDocument;
// 用封装函数在A的文档里创建元素
const myDiv = createElementWithCreator(docA, 'div');

// 把元素移到B iframe的文档中
const docB = iframeB.contentDocument;
docB.body.appendChild(myDiv);

// 获取原始创建文档
const originalDoc = elementCreatorMap.get(myDiv); // 这里得到的是docA，不是docB！

这种方式的好处是可控性强，你只需要确保所有需要追踪的元素都通过这个封装函数创建即可。

方案二：代理文档的createElement方法 #

如果你不想每次都调用自定义函数，也可以直接包装目标文档的createElement方法，让它自动记录创建文档：

const elementCreatorMap = new WeakMap();

// 包装指定文档的createElement方法
function wrapDocumentCreate(doc) {
  // 保存原始方法的引用
  const originalCreate = doc.createElement.bind(doc);
  // 重写createElement
  doc.createElement = function(tagName, options) {
    const element = originalCreate(tagName, options);
    elementCreatorMap.set(element, doc);
    return element;
  };
}

// 给A iframe的文档绑定包装逻辑（要在创建元素前执行！）
wrapDocumentCreate(iframeA.contentDocument);

// 之后直接用原生方法创建的元素也会被追踪
const myBtn = iframeA.contentDocument.createElement('button');
elementCreatorMap.get(myBtn); // 得到docA

注意：这个包装操作必须在该文档开始创建元素之前执行，否则之前创建的元素不会被记录。

补充说明 #

• 如果你需要追踪innerHTML、insertAdjacentHTML这类方法创建的元素，情况会复杂一点——因为这些方法是在当前文档上下文创建元素的。这时候可以结合MutationObserver，监听元素被添加到DOM的事件，当元素第一次出现在DOM中时，记录它当时的ownerDocument作为创建文档（前提是元素创建后没有被立刻移动到其他文档）。
• 为什么原生没有这个属性？因为DOM的核心设计是围绕元素的当前状态展开的，元素的归属是动态可变的，而原始创建文档并不是大多数场景下的必要信息，所以没有内置支持。

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