获取父级元素.md

获取父级元素

Element.parentNode 属性

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

<div id="app">
  <h1>Hello, world!</h1>
</div>

let h1 = document.querySelector('h1')

// 获取 #app 元素
let parent = h1.parentNode // div#app{}

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

let levelUpParent = h1.parentNode.parentNode // body

Element.closest() 方法

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

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

<main>
  <div class="hero">
    <div id="app">
      <h1 data-sandwich>Hello, world!</h1>
    </div>
  </div>
</main>

let h1 = document.querySelector('h1')

// 返回 .hero 元素
let hero = h1.closest('.hero') // div.hero

// 返回 h1 元素本身
let sandwich = h1.closest('[data-sandwich]') // h1

// 从元素的父元素开始检查是否存在 data-sandwich 属性
let sandwich2 = h1.parentNode.closest('[data-sandwich]') // null

Element.closest() 方法的用途

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

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

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

<button class="click-me">
  <span class="text-large">点击我！</span>
  <br />
  <span class="text-small">(限时优惠)</span>
</button>

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

document.addEventListener('click', (e) => {
  if (!e.target.matches('.click-me')) return
  alert('想屁吃')
})

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

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

document.addEventListener('click', e => { if (!e.target.closest('.click-me'))
return alert('想屁吃') })

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

更多资料

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