實作 DOM 的 closest 方法

1月 21 2022 JavaScript

看到遞迴就想記下來。

簡述

element.closest 是一個 DOM 的方法，用來找第一個符合「選取器」的父元素。

思路大概是這樣子：

找到上層父元素
如果父元素符合搜尋的 class 名稱，就把父元素回傳
如果上層還有元素，重複上面兩個步驟

備註：只要是 DOM 中的「元素節點」都會有 classList 屬性，所以 node.classList 是在檢查「是不是元素節點」，只要不符合就表示找到底了（最後會找到 <html> 的父層 -> 也就是 undefined）

迴圈迭代法

function closest(node, className) {
  // 如果節點存在 AND 有 classList 屬性
  while (node && node.classList) {
    // 檢查 class 名稱有沒有符合，有的話就回傳節點
    if (node.classList.contains(className)) {
      return node
    }
    // 更新節點（上一層父元素）
    node = node.parentNode
  }
}

遞迴法

function closestRecursive(node, className) {
  // 如果節點不存在 or 不包含 class
  // 回傳 null 代表找到底了
  if (!node || !node.classList) {
    return null
  } 
  // 如果符合 className，代表找到了
  if (node.classList.contains(className)) {
    return node
  }
  // 還沒找完，繼續往上一層找
  return closestRecursive(node.parentNode, className)
}

實作 DOM 的 closest 方法

簡述

迴圈迭代法

遞迴法

Your browser is out-of-date!