tech(core dom): querySelectorAllAndMe - Support multiple root nodes.

querySelectorAllAndMe supports now multiple root nodes. All of them are searched for a selector match.

Author: thet

src/core/dom.js

@@ -70,20 +70,21 @@ const to_element_array = (nodes) => {
  * Like querySelectorAll but including the element where it starts from.
  * Returns an Array, not a NodeList
  *
- * @param {Node} el - The DOM node to start the search from.
+ * @param {Element|NodeList|Array} el - The DOM element, NodeList or array of elements to start the search from.
  *
- * @returns {Array} - The DOM nodes found.
+ * @returns {Array} - The DOM elements found.
  */
 const querySelectorAllAndMe = (el, selector) => {
-    if (!el || !el.querySelectorAll) {
-        return [];
-    }
-
-    const all = [...el.querySelectorAll(selector)];
-    if (el.matches(selector)) {
-        all.unshift(el); // start element should be first.
+    // Ensure we have a list of DOM elements.
+    const roots = to_element_array(el);
+    const all = [];
+    for (const root of roots) {
+        all.push(...root.querySelectorAll(selector));
+        if (root.matches(selector)) {
+            all.unshift(root); // root element should be first.
+        }
     }
-    return all;
+    return [... new Set(all)];
 };
 
 /**

src/core/dom.test.js

@@ -272,6 +272,54 @@ describe("core.dom tests", () => {
             done();
         });
 
+        it("Support multiple root nodes", (done) => {
+            const el1 = document.createElement("div");
+            el1.className = "el1";
+            const el2 = document.createElement("span");
+            el2.className = "el2";
+            const el3 = document.createElement("div");
+            el3.className = "el3";
+
+            const ret = dom.querySelectorAllAndMe([el1, el2, el3], "div");
+            const ids = ret.map(el => el.className).sort().join(" ");
+
+            expect(ret.length).toBe(2);
+            expect(ids).toBe("el1 el3");
+
+            done();
+        });
+
+        it("Support nesting", (done) => {
+            const el1 = document.createElement("div");
+            el1.className = "el1";
+            el1.innerHTML = '<div class="el11"></div>';
+            const el2 = document.createElement("span");
+            el2.className = "el2";
+            const el3 = document.createElement("div");
+            el3.className = "el3";
+
+            const ret = dom.querySelectorAllAndMe([el1, el2, el3], "div");
+            const ids = ret.map(el => el.className).sort().join(" ");
+
+            expect(ret.length).toBe(3);
+            expect(ids).toBe("el1 el11 el3");
+
+            done();
+        });
+
+        it("Does not return the same element twice", (done) => {
+            const el1 = document.createElement("div");
+            el1.className = "el1";
+
+            const ret = dom.querySelectorAllAndMe([el1, el1, el1], "div");
+            const ids = ret.map(el => el.className).sort().join(" ");
+
+            expect(ret.length).toBe(1);
+            expect(ids).toBe("el1");
+
+            done();
+        });
+
         it("return empty list, if no element is passed.", (done) => {
             const res = dom.querySelectorAllAndMe();
             expect(Array.isArray(res)).toBe(true);