一、jsparents
jsparents是一个获取指定元素的所有父元素的方法。该方法返回一个数组，数组包含了指定元素的所有父元素，从最近的父元素到最远的父元素。如果指定元素本身就是根元素，那么返回一个空数组。
/**
* 获取指定元素的所有父元素
* @param {HTMLElement} el 指定元素
* @return {Array} 包含了所有父元素的数组，从最近的父元素到最远的父元素
*/
function jsparents(el) {
const parentsArr = [];
let parent = el.parentNode;
while (parent) {
parentsArr.unshift(parent);
parent = parent.parentNode;
}
return parentsArr;
}
如上述代码所示，通过循环遍历指定元素的祖先元素，最终返回一个数组，该数组包含了所有父元素。
二、jsparentsint
jsparentsint是一个获取指定元素所在的所有父元素的方法，并且仅限于包含样式属性position为absolute、relative、fixed或者sticky的父元素。该方法返回一个数组，数组包含了指定元素的所有符合条件的父元素，从最近的父元素到最远的父元素。如果指定元素本身就是根元素，那么返回一个空数组。
/**
* 获取指定元素在所有具有position: absolute/relative/fixed/sticky属性的父元素中的所有祖先元素
* @param {HTMLElement} el 指定元素
* @return {Array} 包含了所有父元素的数组，从最近的父元素到最远的父元素
*/
function jsparentsint(el) {
const intParentArr = [];
let parent = el.parentNode;
while (parent) {
const style = getComputedStyle(parent);
if (style.position === 'absolute' ||
style.position === 'relative' ||
style.position === 'fixed' ||
style.position === 'sticky') {
intParentArr.unshift(parent);
}
parent = parent.parentNode;
}
return intParentArr;
}
如上述代码所示，通过循环遍历指定元素的所有祖先元素，判断父元素是否包含指定的样式属性，最终返回一个数组，该数组包含了所有符合条件的父元素。
三、jsparentnode
jsparentnode是一个获取指定元素的所有兄弟元素的方法。该方法返回一个数组，数组包含了指定元素的所有兄弟元素，包括自身。如果指定元素本身就是唯一元素，那么返回一个只包含自身元素的数组。
/**
* 获取指定元素的所有兄弟元素
* @param {HTMLElement} el 指定元素
* @return {Array} 包含了所有兄弟元素的数组，包括自身元素
*/
function jsparentnode(el) {
const siblingsArr = [];
let sibling = el;
while (sibling) {
siblingsArr.push(sibling);
sibling = sibling.nextElementSibling;
}
sibling = el;
while (sibling) {
sibling = sibling.previousElementSibling;
if (sibling) {
siblingsArr.unshift(sibling);
}
}
return siblingsArr;
}
如上述代码所示，通过循环遍历指定元素的兄弟元素，分别获取前面的兄弟元素和后面的兄弟元素，并将自身元素加入数组中，最终返回一个包含所有兄弟元素的数组。
四、总结
通过上述介绍，我们详细了解了jsparent在获取指定元素的父元素、具有特定样式属性的父元素以及所有兄弟元素方面的表现与实现。这些方法可以使开发者更加便捷地获取DOM树中的特定元素，并且避免了冗长的DOM操作代码，提高了开发效率。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/245736.html
微信扫一扫 
支付宝扫一扫 