获取父级元素

您可以使用 Element.parentNode 属性来获取元素的父级。

您还可以将它们串在一起以提升几个级别。

您可以使用 Element.closest() 方法获取与选择器匹配的 DOM 树上最近的父级。

Element.closest() 方法从元素本身开始。您可以通过将第一个父元素与 Node.parentNode 属性配对来开始。

可能最常用的是使用 Element.closest() 方法来检查元素是否在某个父元素中。

它与事件侦听器的事件委托配合时特别有用。

例如，假设您有一些按钮，其中包含一些嵌套的 HTML，如下所示。

你的 JavaScript 监听这些按钮的点击看起来像这样。

这将永远不会运行，因为点击事件的目标几乎总是 .text-large 或 .text-small 元素。仅当您单击按钮中的文本之外时才有效。

为了解决这个问题，我们可以使用 Element.closest() 方法。

Element.closest() 方法有很多用途 ，这只是其中之一。

使用 closest 和 matches 方法来检测元素是否存在某选择器

1、打开编辑工具editplus，点击editplus菜单栏上的【File】-->New -->HTML page。

2、新建好html页面后，editplus自动帮助我们生成了框架，先把title修改下，然后保存。

3、在body区域里添加了子，父，祖父三级div，代码如下。

4、演示代码写好后，打开浏览器，在浏览器上运行看看效果。

5、下面在head区域里添加实现js获取最高父级的代码，代码具体如下，这样利用了while循环来判断的。

6、实现好后，保存代码，此时再到浏览器上刷新访问，看下，此时d出对话框告诉最后父级是zufu。

miniui可以使用getParent方法来获取父元素，该方法可以接受可选参数，以指定获取指定类型的父元素。例如，如果要获取某一元素的父panel，则可以调用getParent('panel')。

---