在前端开发中，经常需要获取某个元素的父级容器（div），以实现各种功能。本文将介绍如何使用 JavaScript 获取元素的父div，并提供相关示例代码和指导意义。
1. 使用 parentNode 属性
每个 HTML 元素都有一个 parentNode 属性，可以通过该属性获取其父级节点。例如，以下代码将返回某个元素的父div：
--- --------- - --------------------------------- --- ---------- - ---------------------
2. 使用 parentElement 属性
除了 parentNode 属性外，还可以使用 parentElement 属性获取元素的父div。与 parentNode 不同的是，parentElement 只会返回 Element 类型，而不会返回其他类型的节点。以下是相应的示例代码：
--- --------- - --------------------------------- --- ------------- - ------------------------
3. 使用 closest 方法
如果要查找元素的最近的某个类型的祖先元素（比如，查找最近的 div 元素），可以使用 Element.closest() 方法。该方法接受一个选择器字符串作为参数，并从当前元素开始在 DOM 树上向上遍历，直到找到符合选择器字符串的祖先元素为止。以下是相应的示例代码：
--- --------- - --------------------------------- --- ----------- - -------------------------
4. 案例应用
假设某个网页上有一组图片，每张图片都包含在一个 div 元素中。当用户点击某张图片时，需要弹出该图片所在的 div 元素。可以使用以下代码实现：
---- ------------------------ ---- ---------------- ----------------------------------- ------ ---- ------------------------ ---- ---------------- ----------------------------------- ------ ---- ------------------------ ---- ---------------- ----------------------------------- ------
-------- ------------------------- - --- -------------- - ---------------------------------- -------------------------------- -
5. 总结
本文介绍了如何使用 JavaScript 获取元素的父div，分别使用了 parentNode 属性、parentElement 属性和 closest 方法。对于常见的前端开发需求，了解这些方法将非常有帮助。同时，本文还提供了一个案例应用，帮助读者更好地理解如何在实际项目中使用这些技巧。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/9826