/

如何檢查一個元素是否是另一個元素的子元素

如何檢查一個元素是否是另一個元素的子元素

我有需要在 click 事件中檢查一個元素是否是特定父元素的子元素。

我給這個父元素分配了一個 id，然後我使用以下迴圈檢查被點擊的元素是否屬於其子元素：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
const isDescendant = (el, parentId) => {
  let isChild = false

  if (el.id === parentId) { // 是否為元素本身？
    isChild = true
  }

  while (el = el.parentNode) {
    if (el.id == parentId) {
      isChild = true
    }
  }
  
  return isChild
}

document.addEventListener('click', event => {
  const parentId = 'mycontainer'

  if (isDescendant(event.target, parentId)) {
    // 是子元素，在這裡處理這種情況
  } else {
    // 不是子元素，在這裡處理這種情況
  }
})

在 while 迴圈中，我們使用賦值運算符 = 進行迭代，直到沒有父節點為止，此時 el.parentNode 返回 null，while 迴圈結束。

這是一種向上遍歷元素樹的方式，直到完成為止。