JAVASCRIPT

JavaScript Document Object (DOM) Helpers

The Document object represents the root node of the HTML document. The nodes are organized in a tree structure, called the DOM tree. Objects in the DOM tree may be addressed and manipulated by using methods on the objects.

elementIndex

export function elementIndex(el) {
    var index = 0;
    while ((el = el.previousElementSibling)) {
        index++;
    }
    return index;
}

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;
}

indexOfParent

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

matches

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
}

Element.matches for modern browsers.

closest

For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.

Depends on 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;

Importing the above that’s in a file set up for tree shaking, e.g., helpers.js

import { closest } from 'js/helpers';

Example Usage

const element = document.querySelector('.myclass');

const parentEl = closest(element, '.mytargetclass')

Element.closest for modern browsers.

offset top

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

next

Get the immediately following sibling of each element in the set of matched elements.

Depends on matches, prev;

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

    return false;
}

Example Usage

const element = document.querySelector('.myclass');

const nextEl = closest(element, '.mytargetclass')

prev

Get the immediately preceding sibling of each element in the set of matched elements.

Depends on matches;

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

    return false;
}

Example Usage

const element = document.querySelector('.myclass');

const prevEl = closest(element, '.mytargetclass')

siblings

Get the siblings of each element in the set of matched elements.

Depends on matches;

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

Example Usage

const element = document.querySelector('.myclass');

const siblingsList = closest(element, '.mytargetclass')

Resources

comments powered by Disqus