JavaScript DOM(문서 개체) 도우미

jQuery에서 바닐라 JavaScript로의 전환을 지원하는 몇 가지 DOM 도우미.

indexInParent

export function indexInParent(el) {
    let children = el.parentNode.childNodes;
    let num = 0;

    for (let i = 0; i < children.length; i++) {
        if (children[i] == el) return num;
        if (children[i].nodeType == 1) num++;
    }
    return -1;
}

indexOf 부모

export function indexOfParent(el) {
    return [].indexOf.call(el.parentElement.children, el);
}

성냥

export function matches(elem, selector) {
    const isMsMatch = 'msMatchesSelector' in elem && elem.msMatchesSelector(selector);
    const isMatchSelector = 'matchesSelector' in elem && elem.matchesSelector(selector)
    const isMatch = 'matches' in elem && elem.matches(selector);
    // Test the element to see if it matches the provided selector
    // use different methods for compatibility
    return isMsMatch || isMatchSelector || isMatch;
    // Return the result of the test
    // If any of the above variables is true, the return value will be true
}

가장 가까운

집합의 각 요소에 대해 요소 자체를 테스트하고 DOM 트리의 조상을 통해 위로 이동하여 선택기와 일치하는 첫 번째 요소를 가져옵니다.
matches에 따라 다름 ;

export function getClosest(elem, selector) {
    // This allows for matching based on any selector, not just a single class.
    for (; elem && elem !== document; elem = elem.parentNode) {
        // Traverse up the dom until document is reached
        if (matches(elem, selector)) {
            // Test each element to see if it matches. If it does, return it.
            return elem
        }
    }
    return null;
}

export const closest = getClosest;

tree shaking에 대해 설정된 파일에 있는 위의 사용법, 예: helpers.js

import { closest } from 'js/helpers';

오프셋 탑

export function getOffsetTop(el) {
    let offsetTop = 0;
    do {
        if (!isNaN(el.offsetTop)) {
            offsetTop += el.offsetTop;
        }
    } while (el = el.offsetParent);
    return offsetTop;
}

다음

일치하는 요소 집합에서 각 요소의 바로 다음 형제를 가져옵니다.
matches , prev 에 따라 다름 ;

export function next(el, selector) {
    if (el.nextElementSibling) {
        if (matches(el.nextElementSibling, selector)) {
            return el.nextElementSibling;
        } else {
            return prev(el.nextElementSibling, selector);
        }
    }

    return false;
}

이전

일치하는 요소 집합에서 각 요소의 바로 앞 형제를 가져옵니다.
matches에 따라 다름 ;

export function prev(el, selector) {
    if (el.previousElementSibling) {
        if (matches(el.previousElementSibling, selector)) {
            return el.previousElementSibling;
        } else {
            return prev(el.previousElementSibling, selector);
        }
    }

    return false;
}

형제

일치하는 요소 집합에서 각 요소의 형제를 가져옵니다.
matches에 따라 다름 ;

export function siblings(el, selector) {
    return Array.prototype.filter.call(el.parentNode.children, function (child) {
        return matches(child, selector);
    }) || [];
}

jimfrenette.com/javascript/document에 원래 게시됨