A simplified implementation of `document.querySelector()` and `document.querySelectorAll()`, during a workshop on data structures.

dsa-query-selector.js

/**
 * Run a callback over all children of a given element using depth-first
 * traversal.
 *
 * @param {HTMLElement} element
 * @param {Function}    callback
 */
function iterateDOM(element, callback) {
    const nodes = [];

    nodes.push(element);

    do {
        element = nodes.shift();

        callback(element);

        nodes.unshift(element.children);
    } while (nodes.length > 0);
}

/**
 * Determine if an element matches a given string query.
 *
 * @param {HTMLElement} element
 * @param {string}      query
 *
 * @return {bool}
 */
function matchElement(element, query) {
    return element.tagName === query.toUpperCase() ||
        element.classList.contains(query);
}

/**
 * Return the first element matching the given query.
 *
 * @param {string} query
 *
 * @return {HTMLElement}
 */
function querySelector(query) {
    return querySelectorAll(query)[0];
}

/**
 * Return all elements matching the given query.
 *
 * @param {string} query
 *
 * @return {HTMLElement[]}
 */
function querySelectorAll(query) {
    const elements = [];

    iterateDOM(this, function(element) {
        if (matchElement(element, query)) {
            elements.push(element);
        }
    });

    return elements;
}

Hello, is there a video of this workshop

Hi @Bensigo! Unfortunately there is no recording. This was a while ago at my previous company and wasn't run by me.

As you loop elements in each level, it should be Breadth-First rather then Depth-First right?
I think you can implement the Depth-First with recursion.