美文网首页让前端飞typescriptweb前端技术分享
js 查找dom节点指定的父节点代码 ts版本

js 查找dom节点指定的父节点代码 ts版本

作者: 阿巳交不起水电费 | 来源:发表于2023-09-07 17:12 被阅读0次

    说明:

    支持类选择器(如:.app)查找。
    支持id选择器(如:#app)查找。
    支持元素节点名称如(h1)进行查找。
    支持从当前节点查找,即可选择是否要包含当前节点。

    代码如下:

      /**
       * js查找指定节点【包含|不包含】往上的节点,可根据类选择器(如:.app)、id选择器(如:#app)、元素节点名称如(h1)进行查找
       * 换句话就是,查找当前节点的指定父节点,可以选择是否是包含当前节点
       * @param ele 子节点
       * @param flag 父节点类或id选择器或者元素节点名称,eg: 类:.app | id: #app | 元素节点名称 body
       * @param includeCurrent 是否包含当前节点,默认false,查找的父节点
       * @returns {HTMLElement | null} 指定的第一个父节点
       */
      function findNodeFromCurrent(ele: HTMLElement, flag: string, includeCurrent = false) {
        if (!flag || flag === "body") {
          // 默认body
          flag = "body";
          return document.getElementsByTagName(flag)[0];
        }
        if (!ele) return null;
    
        // 判断是否是这个节点
        let judgeFn = (_node: HTMLElement) => {
          if (!_node) return false;
          if (flag.startsWith(".")) {
            // 类
            let reg = new RegExp(`^\.`, 'i')
            let classNameStr = flag.replace(reg, '')
            return classNameStr === _node.className || ~_node.className.indexOf(classNameStr)
          } else if (flag.startsWith("#")) {
            // id
            let reg = new RegExp(`^\#`, "i");
            return flag.replace(reg, "") === _node.id;
          } else {
            // 节点名
            return flag === _node.nodeName.toLowerCase();
          }
        };
    
        let parent: HTMLElement | null = null;
        if (includeCurrent) {
          // 包含当前节点 - 从当前节点开始
          parent = ele;
        } else {
          // 从父节点开始
          parent = ele.parentNode as HTMLElement;
        }
    
        while (
          parent &&
          !judgeFn(parent) &&
          parent.nodeName !== "BODY" &&
          parent.nodeName !== "HTML"
        ) {
          parent = parent.parentNode as HTMLElement;
        }
    
        return !parent || parent.nodeName === "BODY" || parent.nodeName === "HTML"
          ? null
          : parent;
      },
    

    调用方式如:

    findNodeFromCurrent(document.getElementById('myBox'), '#app')
    findNodeFromCurrent(document.getElementById('myBox'), '.app')
    findNodeFromCurrent(document.getElementById('myBox'), 'h1')
    

    若对你有帮助,请点个赞吧,若能打赏不胜感激,谢谢支持!
    本文地址:https://www.jianshu.com/p/5080209dc725?v=1694164379111,转载请注明出处,谢谢。

    相关文章

      网友评论

        本文标题:js 查找dom节点指定的父节点代码 ts版本

        本文链接:https://www.haomeiwen.com/subject/omcrvdtx.html