core dom: Add get_parents to return all parent elements from a given DOM node.

Author: thet

CHANGES.md

@@ -48,6 +48,7 @@
 -   Allow overriding the public path from outside via the definition of a ``window.__patternslib_public_path__`` global variable.
 -   Introduce new ``core/dom`` module for DOM manipulation and traversing.
     ``core/dom`` includes methods which help transition from jQuery to the JavaScript DOM API.
+-   core dom: Add ``get_parents`` to return all parent elements from a given DOM node.
 -   core dom: Add ``toNodeArray`` to return an array of DOM nodes if a NodeList, single DOM node or a jQuery object was passed.
 -   core dom: Add ``querySelectorAllAndMe`` to do a querySelectorAll including the starter element.
 -   core dom: Add ``wrap`` wrap an element with a wrapper element.

src/core/dom.js

@@ -75,6 +75,19 @@ const find_scoped = (el, selector) => {
     );
 };
 
+const get_parents = (el) => {
+    // Return all HTMLElement parents of el, starting from the direct parent of el.
+    // The document itself is excluded because it's not a real DOM node.
+    const parents = [];
+    let parent = el?.parentNode;
+    while (parent) {
+        parents.push(parent);
+        parent = parent?.parentNode;
+        parent = parent instanceof HTMLElement ? parent : null;
+    }
+    return parents;
+};
+
 const is_visible = (el) => {
     // Check, if element is visible in DOM.
     // https://stackoverflow.com/a/19808107/1337474
@@ -96,6 +109,7 @@ const dom = {
     show: show,
     find_parents: find_parents,
     find_scoped: find_scoped,
+    get_parents: get_parents,
     is_visible: is_visible,
     create_from_string: create_from_string,
 };

src/core/dom.test.js

@@ -184,7 +184,6 @@ describe("core.dom tests", () => {
         it("don't break with DocumentFragment without a parent.", (done) => {
             const el = new DocumentFragment();
             el.innerHTML = `<div class="starthere"></div>`;
-            console.log(el.parentNode);
             const res = dom.find_parents(
                 el.querySelector(".starthere"),
                 ".findme"
@@ -242,6 +241,46 @@ describe("core.dom tests", () => {
         });
     });
 
+    describe("get_parents", () => {
+        it("it finds all parents of an element except document itself.", (done) => {
+            document.body.innerHTML = `
+                <div class="level1">
+                    <div class="level2">
+                        <div class="level3">
+                            <div class="level4">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            `;
+            const res = dom.get_parents(document.querySelector(".level4"));
+
+            expect(res.length).toEqual(5);
+            expect(res[0]).toEqual(document.querySelector(".level3"));
+            expect(res[1]).toEqual(document.querySelector(".level2"));
+            expect(res[2]).toEqual(document.querySelector(".level1"));
+            expect(res[3]).toEqual(document.body);
+            expect(res[4]).toEqual(document.body.parentNode); // html
+
+            done();
+        });
+        it("don't break with no element.", (done) => {
+            const res = dom.get_parents(null);
+            expect(res.length).toEqual(0);
+
+            done();
+        });
+        it("don't break with DocumentFragment without a parent.", (done) => {
+            const el = new DocumentFragment();
+            el.innerHTML = `<div class="starthere"></div>`;
+            console.log(el.parentNode);
+            const res = dom.get_parents(el.querySelector(".starthere"));
+            expect(res.length).toEqual(0);
+
+            done();
+        });
+    });
+
     describe("is_visible", () => {
         it.skip("checks, if an element is visible or not.", (done) => {
             const div1 = document.createElement("div");