获取父 HTML JS

在编写 Web 应用程序时，经常需要从子文档中访问父文档元素或执行与父文档交互的操作。在这篇文章中，我们将介绍如何使用 JavaScript 获取父 HTML 元素。

如何获取父元素

通过使用 parent 属性可以获取父元素。parent 属性返回当前文档所在的父级文档。如下示例代码，从子文档中获取 body 元素。

var parentBody = parent.document.querySelector('body');

在子文档中，我们可以使用 parent.document 访问父文档。在这个对象下有很多方法和属性可以被使用。

如何从父元素获取数据

从父文档获取数据是有必要的，因为它可以使 Web 应用程序更加高效。下面是一些方法：

1. 使用 window.parent.document.getElementById()

var parentElem = window.parent.document.getElementById('parent-elem');

2. 使用 window.opener.document.getElementById()

var parentElem = window.opener.document.getElementById('parent-elem');

其中，window.opener 表示打开当前窗口的窗口

如何访问父文档的 JavaScript 函数

如果父文档有公共的方法，我们可以通过子文档调用父文档的函数。下面是一些方法：

1. 使用 parent.fun()

parent.fun();

2. 使用 window.parent.fun()

window.parent.fun();

结论

在 Web 应用程序开发中，我们经常需要通过 JavaScript 访问父元素和调用在父元素中定义的函数。在本文中，我们介绍了如何在 JavaScript 中获取父元素，从父元素中读取和设置数据，以及如何通过子文档调用父元素的函数。