说明:
支持类选择器(如:.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,转载请注明出处,谢谢。
网友评论