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

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值