1. 程式人生 > >js原生遞迴獲取一個節點的所有父級節點

js原生遞迴獲取一個節點的所有父級節點

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div class="a">
      一級
      <div class="b">
        二級
        <div class="c">
          三級
          <div id="start" class="">
            目標
          </div>
        </div>
      </div>
    </div>
  </body>
  <script type="text/javascript">

    let startTag = document.querySelector('#start')

    /**
     * getParentTag - 獲取傳入標籤的所有父級標籤
     *
     * @param  { HTMLElement } startTag 初始dom節點
     * @param  {Array} parentTagList 初始dom節點的所有父級節點
     * @return {type} 遞迴/初始dom節點的所有父級節點
     */
    function getParentTag(startTag, parentTagList = []) {
      // 傳入標籤是否是DOM物件
      if (!(startTag instanceof HTMLElement)) return console.error('receive only HTMLElement');
      // 父級標籤是否是body,是著停止返回集合,反之繼續
      if ('BODY' !== startTag.parentElement.nodeName) {
        // 放入集合
        parentTagList.push(startTag.parentElement)
        // 再上一層尋找
        return getParentTag(startTag.parentElement, parentTagList)
      }
      // 返回集合,結束
      else return parentTagList;

    }

    console.log(getParentTag(startTag));
  </script>
</html>

原文地址:https://segmentfault.com/a/1190000017162973?utm_source=tag-newest