HTML DOM ownerDocument 属性

什么是 ownerDocument 属性？

ownerDocument 属性是 DOM 元素节点的一个属性，它返回包含当前节点的顶层文档对象。在一个 HTML 文档中，每个节点都有一个 ownerDocument 属性，它指向包含该节点的文档对象。

如何使用 ownerDocument 属性？

要访问一个节点的 ownerDocument 属性，只需简单地使用该节点的 ownerDocument 属性即可。例如，我们有一个 div 元素节点，我们可以通过以下方式获取其 ownerDocument：

const div = document.getElementById('myDiv');
const doc = div.ownerDocument;

在上面的示例中，我们首先通过 getElementById 方法获取了 id 为 myDiv 的 div 元素节点，然后通过 ownerDocument 属性获取了该节点所属的文档对象。

ownerDocument 属性的作用

ownerDocument 属性通常用于在不同文档对象之间进行操作。例如，当我们需要在一个 iframe 中操作其内部的文档对象时，就可以使用 ownerDocument 属性来获取 iframe 元素节点所属的文档对象。

下面是一个示例代码，演示如何使用 ownerDocument 属性来获取 iframe 中的文档对象并操作其中的元素：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
    <title>iframe demo</title>
</head>
<body>
    <iframe id="myIframe" src="https://www.example.com"></iframe>

    <script>
        const iframe = document.getElementById('myIframe');
        const doc = iframe.ownerDocument;
        
        const p = doc.createElement('p');
        p.textContent = 'Hello from iframe!';
        doc.body.appendChild(p);
    </script>
</body>
</html>

在上面的示例中，我们首先获取了 id 为 myIframe 的 iframe 元素节点，然后通过 ownerDocument 属性获取了该 iframe 所属的文档对象。接着，我们创建了一个 p 元素节点，并将其添加到 iframe 的文档对象中，从而在 iframe 中显示一段文本。

总结

ownerDocument 属性是一个非常有用的属性，它可以帮助我们在不同文档对象之间进行操作，实现更加灵活和丰富的功能。在实际开发中，我们可以根据需要灵活运用 ownerDocument 属性，从而更好地处理 DOM 操作。