如何查找包含指定属性的父元素（非jQuery实现）

要从指定子元素出发，向上遍历所有父元素并找到带有目标属性的元素，可以用纯JavaScript实现，核心思路是循环向上遍历父节点，逐个检查属性是否存在。

实现函数 #

function findParentWithAttribute(element, attributeName) {
  let currentElement = element.parentElement;
  
  while (currentElement) {
    if (currentElement.hasAttribute(attributeName)) {
      return currentElement;
    }
    currentElement = currentElement.parentElement;
  }
  
  return null;
}

结合示例使用 #

针对你给出的HTML结构：

<div custom-attribute>
  <div>
    <div>
      <div>
        <div><p>some text</p></div>
      </div>
    </div>
  </div>
</div>

可以这样调用函数找到目标父元素：

const targetElement = document.querySelector('p');
const parentWithAttr = findParentWithAttribute(targetElement, 'custom-attribute');

if (parentWithAttr) {
  console.log('找到目标父元素:', parentWithAttr);
} else {
  console.log('未找到带有指定属性的父元素');
}

关键说明 #

• 使用parentElement确保只遍历元素节点，跳过文本节点等非元素节点
• hasAttribute()方法用于检查元素是否存在指定属性，不管属性有没有值都能检测到
• 循环终止条件是currentElement为null，即到达文档根节点的父节点

内容的提问来源于stack exchange，提问作者Dmitry