时间戳

首页 > 解决方案 > 使用 JavaScript 获取 DOM 元素的父级

javascript - 使用 JavaScript 获取 DOM 元素的父级

问题描述

我想检查 DOM 元素是否是特定 DIV 类的子元素，而不管元素与父 DIV 之间的 DIV/HTML 数量如何。我需要使用 JavaScript（不是 jQuery）。因此，如果我有一些这样的 HTML：

<div class="header grid-12">
  <!-- many levels of divs/html -->  
  <div class="section">
     <span id="id1">hello</span>
  </div>
</div>
<div class="footer">
  <!-- many levels of divs/html -->
  <span id="id2">goodbye</span>
</div>

我想做这样的事情（逻辑上是这样）：

var domID = document.getElementById("id1");
if (domID a child of 'header grid-12') {
 console.log('header grid-12 found');
}

我查看了允许您获取所有子节点的 parentNode 子节点，但我需要反向循环（如果您愿意，则为父节点父节点）。我认为从孩子开始并上升要快得多，而不是从“header grid-12”开始并循环通过数百/数千个节点。

谢谢

标签： javascript

解决方案

该Element.closest()方法返回与参数中给出的选择器匹配的当前元素（或当前元素本身）的最近祖先。如果没有这样的祖先，则返回 null。

资源

尝试这个，

let parent = !!document.getElementById('id1').closest('.header.grid-12');
if(parent)
{
    console.log('parent found');
}

domElement.closest('selector')反过来并返回最近的匹配父元素。这将使您免于遍历所有domChildElements.

推荐阅读