JSFiddle - React, Tailwind, and code Playground
HTML
<div id="outerParent">
<div id="parent"> This is a parent
<div id="me">
Where we START
</div>
</div>
</div>
CSS
div { padding:15px; margin:10px; color:#fff; }
#me { background:#5279a4; }
#parent { background:#888; }
#outerParent { background:#242424; }
JavaScript
var node = document.getElementById('me').parentNode;
var parentsArray = getParents(document.getElementById('me'), document.getElementById('outerParent'));
// Log the result
console.log(parentsArray);
function getParents(el, parentSelector) {
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;
}