Search code examples
javascriptparentselectors-api

.parents() without jquery - or querySelectorAll for parents


Possible Duplicate:
Check event.target.parentElement with matchesSelector js

I have a dom object, I'd like to match its parents, all parents, against a selector, like querySelectAll(), but for parents instead of children. Similar to jQuery's .parents('selector') method, but I do NOT need any back-wards compatibility. Also, no libraries please. I will totes take a boolean return value.

I CAN write this myself as a recursive function/for/while using matchesSelector(). I'm looking for little-known methods or more efficient code.

Saving any processing is worth it. Think tens of thousands of match checks, or more even.


Solution

  • You would want to use a while() loop since we don't know the exact number of parents we have

    jsFiddle Demo

    function getParents(el, parentSelector /* optional */) {
    
        // If no parentSelector defined will bubble up all the way to *document*
        if (parentSelector === undefined) {
            parentSelector = document;
        }
    
        var parents = [];
        var p = el.parentNode;
        
        while (p !== parentSelector) {
            var o = p;
            parents.push(o);
            p = o.parentNode;
        }
        parents.push(parentSelector); // Push that parentSelector you wanted to stop at
        
        return parents;
    }
    

    Useage: Returns an Array of "parents"

    // 2nd param optional, bubbles up to document
    getParents( document.getElementById('me') ); 
    
    // get all parents starting from -me- up to ID -outerParent-
    getParents( document.getElementById('me'), document.getElementById('outerParent') );