document.adoptNode & document.importNode & node.ownerDocument All In One

将外部文档的节点插入当前文档之前，你必须使用 document.importNode() 从外部文档导入源节点，或者使用 document.adoptNode() 导入源节点

注意事项

注意: 使用 adoptNode() 方法从一个外部文档中获取一个节点, 节点下的所有子节点都会获取到, 拷贝后在外部文档中的节点及其子节点会被删除。

注意: 使用 document.importNode() 方法从外部文档中来拷贝节点，拷贝后在外部文档中的节点不会被删除。

注意: 使用 node.cloneNode() 方法从当前文档中来拷贝节点，拷贝后在当前文档中的节点不会被删除。

https://iframe.xgqfrms.xyz/dom-api/iframe.html

https://iframe.xgqfrms.xyz/dom-api/adoptNode.html

https://iframe.xgqfrms.xyz/dom-api/importNode.html

https://iframe.xgqfrms.xyz/dom-api/cloneNode.html

document.adoptNode

adoptNode(externalNode)

  const adoptNode = () => {
    // const frame = document.getElementsByTagName("iframe")[0];
    // const h1 = frame.contentWindow.document.getElementsByTagName("h1")[0];
    const frame = document.querySelector('#iframe');
    // const h1 = frame.contentWindow.document.querySelector("h1");
    const h1 = iframe.contentDocument.querySelector("h1");
    // ✅ deep = false 不包含 text
    // const dom = document.adoptNode(h1);
    // const dom = document.adoptNode(h1, false);
    // 从 iframe 文档中提取出 DOM tree，并从 iframe 文档中删除该 DOM tree
    const dom = document.adoptNode(h1, true);
    // 把 DOM tree 添加到当前文档中
    // document.body.appendChild(dom);
    const app = document.querySelector(`#app`);
    app.appendChild(dom);
  };

https://developer.mozilla.org/en-US/docs/Web/API/Document/adoptNode

document.importNode

importNode(externalNode)
importNode(externalNode, deep)

<iframe id="iframe" src="https://iframe.xgqfrms.xyz/webview-checker/index.html"></iframe>

<div id="app">App</app>

  // iframe CORS limit ⚠️
  const importNode = () => {
    // const iframe = document.getElementsByTagName("iframe")[0];
    // const h1 = iframe.contentWindow.document.getElementsByTagName("h1")[0];
    const iframe = document.querySelector('#iframe');
    // const h1 = iframe.contentWindow.document.querySelector("h1");
    const h1 = iframe.contentDocument.querySelector("h1");
    // 从 iframe 文档中提取出 DOM tree
    // ✅ deep = false 不包含 text
    // const dom = document.importNode(h1);
    // const dom = document.importNode(h1, false);
    const dom = document.importNode(h1, true);
    // 把 DOM tree 添加到当前文档中
    // document.body.appendChild(dom);
    const app = document.querySelector(`#app`);
    app.appendChild(dom);
  };

CORS

https://cdn.xgqfrms.xyz/iframe/same-origin-iframe.html ✅

https://cdn.xgqfrms.xyz/iframe/iframe-single-testing.html ❌

const iframe = document.querySelector(`#iframe`);

const externalNode = iframe. contentDocument.querySelector(`[data-dom="pre"]`);
// document.querySelector(`[data-dom="pre"]`);


const app = document.querySelector(`#app`);

// only clone tree
// const newApp = aapp.importNode(externalNode, false);

// clone both tree and subtree
const newApp = app.importNode(externalNode, true);

// node.appendChild() 
document.body.appendChild(newApp);

https://developer.mozilla.org/en-US/docs/Web/API/Document/importNode

node.cloneNode

⚠️ Warning: cloneNode() may lead to duplicate element IDs in a document!

cloneNode();
cloneNode(deep);

<div id="app">App</app>

const app = document.querySelector(`#app`);

// only clone tree
// const newApp = app.cloneNode(false);

// clone both tree and subtree
const newApp = app.cloneNode(true);

// node.appendChild() 
document.body.appendChild(newApp);

https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode

node.ownerDocument

如果在本身是文档的节点上使用此属性，则值为 null

// Given a node "div", get the top-level HTML child of the document object

const div = document.querySelector('div');

const documentRoot = div.ownerDocument;
// #document
const html = documentRoot.documentElement;
// <html>...</html>

// document self object ❓iframe

const dom = document.querySelector('html');

const documentRoot = dom.ownerDocument;
// <html>...</html> ✅
// null ❌

// document self object

document;
// #document
document.ownerDocument;
// null ✅

https://developer.mozilla.org/en-US/docs/Web/API/Node/ownerDocument

Web Components

adoptedCallback

class MyElement extends HTMLElement {
  constructor() {
    super();
    // 元素在这里创建
  }

  connectedCallback() {
    // 在元素被添加到文档之后，浏览器会调用这个方法
    //（如果一个元素被反复添加到文档／移除文档，那么这个方法会被多次调用）
  }

  disconnectedCallback() {
    // 在元素从文档移除的时候，浏览器会调用这个方法
    // （如果一个元素被反复添加到文档／移除文档，那么这个方法会被多次调用）
  }

  static get observedAttributes() {
    return [/* 属性数组，这些属性的变化会被监视 */];
  }

  attributeChangedCallback(name, oldValue, newValue) {
    // 当上面数组中的属性发生变化的时候，这个方法会被调用
  }

  adoptedCallback() {
    // 在元素被移动到新的文档的时候，这个方法会被调用
    // （document.adoptNode 会用到, 非常少见）
  }

  // 还可以添加更多的元素方法和属性
}

https://zh.javascript.info/custom-elements