如何在 JavaScript 中获取父元素

JavaScript 是一种强大的脚本语言，使程序员能够创建动态、交互式的网站。在处理文档对象模型 (DOM) 时，查找特定元素的父元素是一项常见操作。

在这里，我们将探讨各种基于 JavaScript 的方法来实现这一点。

查找 HTML 元素父元素最简单的方法是使用 parentNode 属性。当提供一个元素时，此属性返回该元素在 DOM 树中的父节点。以下示例说明了如何使用此属性：

上述代码片段中，首先使用 getElementById 方法通过 ID 选择子元素。之后，我们使用 parentNode 属性将父元素赋值给 parentElement 变量。

使用 parentElement 属性： DOM 提供了一个有用的 parentElement 属性，除了 parentNode 属性之外，它还可以用来获取 HTML 元素的父元素。其应用与前面的技术非常相似：

通过一种更具说明性和可理解性的方法，我们可以通过使用 parentElement 属性实现相同的结果。

使用 closest() 方法： closest() 方法是现代浏览器提供的另一个有效工具。

通过使用此技术，您可以确定 CSS 选择器树中哪个元素是元素的直接祖先。以下示例演示了 nearest() 技术的使用：

在上述代码中，在使用 getElementById 方法选择子元素之后，调用 nearest() 函数，并提供 CSS 选择器作为参数。closest() 函数返回匹配指定选择的元素的第一个祖先。

在这种情况下，我们试图找到的是具有“parent-class”类的元素，它是子元素最近的祖先。

使用遍历方法： JavaScript 提供了许多遍历方法，您可以使用它们来遍历 DOM 树。其中包括 parentNode、previousSibling、nextSibling、firstChild 和 lastChild 方法。您可以结合使用这些技术来转到特定元素的父元素。例如，请考虑以下内容：

在这行代码中，我们首先使用 getElementById 选择子元素，然后使用 parentNode 属性获取其父元素。这些遍历技术使您可以在 DOM 树中上下导航以找到所需的父元素或子元素。

将 parentElement 属性用于事件处理： 在使用 JavaScript 事件处理程序时，可能需要访问事件目标的父元素。例如，如果您有一系列按钮，并且希望在单击父元素上的按钮时执行某些操作，则可以使用事件处理程序中的 parentElement 属性。

这是一个示例：

在上面的代码示例中，我们使用 querySelectorAll 选择所有具有“button”类的组件。然后，每个按钮都使用 forEach 函数附加一个点击事件监听器。

我们在事件处理程序内部使用 event.target.parentElement 来访问父元素。因此，当单击按钮时，我们能够对父元素执行操作。

使用动态元素的父元素属性

如果您在 Web 应用程序中使用动态生成的元素，您可能会遇到需要访问新创建元素的父元素的情况。

在将元素添加到 DOM 之后，您可以在某些情况下使用 parentElement 属性。

例如，请考虑以下内容：

在这行代码中，我们首先使用 getElementById 选择父元素。然后，在 createNewElement 函数内部使用 appendChild 函数，我们创建一个新元素，根据需要修改它，并将其添加到父元素中。

使用 parentElement 属性，我们可以在将新元素添加到 DOM 之后获取其父元素。

使用 offsetParent 属性

在某些情况下，您可能希望找到特定元素的最近定位祖先元素。您可以使用 offsetParent 属性来实现此目的。它返回具有非静态位置（默认位置）的最近祖先元素。

这是一个示例

在前面提到的代码片段中，我们首先使用 getElementById 方法选择子元素，然后使用 offsetParent 属性将最近的定位祖先元素指定给名为 positionedAncestor 的变量。

将 parentNode 属性与不同节点类型一起使用

除了获取 HTML 元素的父元素之外，您还可以遍历 DOM 树并获取多种节点类型（例如文本节点和注释节点）的父元素。

您可以使用 parentNode 属性更轻松地遍历 DOM 树，该属性适用于不同的节点类型。例如，请考虑以下内容：

在此示例中，我们使用 createTextNode 函数生成一个文本节点。然后使用 parentNode 属性检索父元素。在处理包含各种节点的复杂 DOM 结构时，此策略会很有帮助。

将 parentElement 属性与 Shadow DOM 一起使用

如果您正在使用 Shadow DOM（一种支持 DOM 树和 CSS 样式封装的 Web 技术），您可能需要访问 Shadow DOM 边界内的父元素。

在这种情况下，parentElement 属性也适用。

例如，请考虑以下内容：

上述代码中使用 host 元素的 shadowRoot 属性来首先获取 shadow root。然后，使用 getElementById 函数，我们根据其 ID 选择 shadow root 中的子元素。

使用 parentElement 属性，我们最终可以检索父元素。这使您即使在 Shadow DOM 内部也可以访问父元素。

使用 offsetParent 属性定位元素

如果您明确需要定位给定元素的最近定位祖先元素，则可以将 offsetParent 属性与 offsetLeft 和 offsetTop 属性结合使用。

这是一个示例：

在这行代码中，我们首先使用 getElementById 选择目标元素。之后，目标元素的 offsetParent 用于初始化 positionedAncestor 变量。

下一步是使用 while 循环确定当前 positionedAncestor 的计算位置是否为“static”。

如果是，则将 positionedAncestor 更新为当前 positionedAncestor 的 offsetParent。

此过程一直持续到我们找到最接近当前位置的祖先或到达 DOM 树的顶部。

通过使用这些额外的策略和方法，您可以进一步提高在 JavaScript 中检索父元素的能力。这些方法为各种问题提供了解决方案，包括处理 Shadow DOM、处理不同的节点类型以及定位最近的祖先。

选择一种符合您独特要求并提高您的 DOM 操作技能的技术。

如果您正在使用较新的方法或功能，请不要忘记在各种浏览器中彻底测试您的代码以验证兼容性。

一旦您牢牢掌握了这些概念，您将掌握在 JavaScript 中使用父元素并构建动态交互式在线体验所需的知识和技能。

您现在可以在 JavaScript 中使用额外的方法来访问父元素。

了解这些技术将提高您正确修改 DOM 和与其交互的能力，无论您是处理事件处理、动态元素，还是需要查找最近的定位祖先。

始终选择最适合您独特用例的方法，同时牢记浏览器兼容性和项目具体需求。掌握这些方法后，您将具备轻松探索和使用 JavaScript 中父组件所需的技能。