Javascript Function Find Element by Traversing Parent Elements

Javascript Function Code that Allows you to Find a Parent Element, Relative to the Current Element the Mouse has Passed over or Clicked. The Return of this JS Function is the Element Object, if Found, and an Array of the Parent Elements

The simple Javascript function code below allows you to start with an element and traverse up the parent nodes until you hit the first element with a tagname that matches the parent element you are looking for.

/* --------------------------------------------------------------- PURPOSE: get parent element that meets desired conditions [desiredAttribute] usually 'tagName' or 'id' or 'className' [desiredElemVal] the value the element must have for the function to return the matching element [ignoreCase] if we are ignoring captialization. NOTE: if [desiredAttribute] is 'tagName' [ignoreCase] must = true or no matching element will be found RETURN VALUE: 2 part array, [0] will be the matching element found. if no matching elem found this will be null [1] array of the parent elements traversed leading up to the matching element found [0] ---------------------------------------------------------------- */ function getParent ( desiredAttribute, desiredElemVal, ignoreCase ) { if(ignoreCase){ desiredElemVal = desiredElemVal.toLowerCase().trim(); } let el = event.target, foundEl = null, arrParents = []; // store the current element in parents array arrParents.push(el); // Run while loop until the element has a parent node while(el.parentNode){ // if we are ignoring case or not let curEl = ignoreCase ? el[desiredAttribute].toLowerCase() : el[desiredAttribute]; // if this current element does not match [desiredElemVal] if(curEl != desiredElemVal){ // Go one level up in the DOM tree el = el.parentNode; // add this elem to parents array arrParents.push(el); }else{ // we found desired element, exit foundEl = el; break; } // if(curEl != desiredElemVal) } // while(element.parentNode) //console.log(foundEl, arrParents); return [foundEl, arrParents]; } // function getParent

Example #1:

// starting with the element clicked, travel up the parent tree // until we get to a div element and return the div [0] and // array of parents [1] document.onclick =()=> { let arr2 = getParent('tagName', 'div', true); let foundEl = arr2[0]; let arrParents = arr2[1]; console.log(foundEl, arrParents); }

Example #2:

// starting with the element the mouse moves over, travel up the // parent tree until we get to an element with the className of // [clsexample] ignoring case and return the element with the // className of [clsexample] [0] and the array of parents [1] document.onmouseover =()=> { let arr2 = getParent('className', 'clsexample', false); let foundEl = arr2[0]; let arrParents = arr2[1]; console.log(foundEl, arrParents); }