JavaScript: Recursively Retrieve All Nested DOM Elements (Snippet)

Hi. 👋

Let's name the function as crawlElements.

/** * Recursively collects all nested element nodes from * a given DOM node. * * @param {Node} node - The root DOM node from which * to begin the search. * @returns {Element[]} An array of all descendant * element nodes found beneath * the input node. * * @example * const root = document.getElementById("container"); * const allElements = crawlElements(root); * console.log(allElements); // Array of nested div, span, etc. */ function crawlElements(node) { let elements = []; const isElement = node && node instanceof Element; const hasChildren = isElement && node.hasChildNodes(); if (!hasChildren) return elements; node.childNodes.forEach((child) => { if (child.nodeType === Node.ELEMENT_NODE) { elements.push(child); elements = [...elements, ...crawlElements(child)]; } }); return elements; }

The function above will return a flat array of DOM elements.

That's it then. The description and how to use it are included in the snippet.

---

What's That For?

I, personally, did it for dynamic injection of new elements into a previously rendered container. To achieve even spacing, I need to gather all of the nested elements in that container, then calculate the index position. Surely, it can be limited to a certain depth — but that's the main idea. In this, everyone categorised as DOM element inside that confinement is censused.

Other notable proper uses:

• Accessibility Audits

  Gather all elements to check for missing aria-*, alt, or role attributes. Make your page less of a chaos for screen readers.

• Analytics Instrumentation

  Recursively tag or wrap elements with data-* attributes for tracking purposes.

• Sanitising Content

  Crawl user-generated DOM trees to strip or validate elements before rendering. For example, stripping script or inline styles.

• Lazy-loading Enhancements

  Detect all img or video tags and inject lazy-loading or intersection observers.

---

Bye. 👋