jsparent全面介紹

一、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操作代碼，提高了開發效率。