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

说明：

支持类选择器（如：.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，转载请注明出处，谢谢。