DOM node tree walker

index.md

A general-purpose DOM tree walker based on https://stackoverflow.com/questions/10730309/find-all-text-nodes-in-html-page (Phrogz' answer and its comments).

The textNodesUnder() function would then look like this:

function textNodesUnder(el) {
    return walkNodeTree(el, {
        inspect: n => !['STYLE', 'SCRIPT'].includes(n.nodeName),
        collect: n => (n.nodeType === Node.TEXT_NODE),
        //callback: n => console.log(n.nodeName, n),
    });
}

walkNodeTree.js

//https://stackoverflow.com/questions/10730309/find-all-text-nodes-in-html-page
function walkNodeTree(root, options) {
    options = options || {};

    const inspect = options.inspect || (n => true),
          collect = options.collect || (n => true);
    const walker = document.createTreeWalker(
        root,
        NodeFilter.SHOW_ALL,
        {
            acceptNode: function(node) {
                if(!inspect(node)) { return NodeFilter.FILTER_REJECT; }
                if(!collect(node)) { return NodeFilter.FILTER_SKIP; }
                return NodeFilter.FILTER_ACCEPT;
            }
        }
    );

    const nodes = []; let n;
    while(n = walker.nextNode()) {
        options.callback && options.callback(n);
        nodes.push(n);
    }

    return nodes;
}

For reference, this is probably how I'd write it (with some unnecessary modern syntax thrown in):

function walkNodeTree(root, whatToShow = NodeFilter.SHOW_ALL, { inspect, collect, callback } = {}) {

    const walker = document.createTreeWalker(
        root,
        whatToShow,
        {
            acceptNode(node) {
                if (inspect && !inspect(node)) { return NodeFilter.FILTER_REJECT; }
                if (collect && !collect(node)) { return NodeFilter.FILTER_SKIP; }
                return NodeFilter.FILTER_ACCEPT;
            }
        }
    );

    const nodes = [];
    let n;
    while (n = walker.nextNode()) {
        callback?.(n);
        nodes.push(n);
    }

    return nodes;
}

const PARENT_TAGS_TO_EXCLUDE = ['STYLE', 'SCRIPT', 'TITLE'];

function textNodesUnder(el) {
    return walkNodeTree(el, NodeFilter.SHOW_TEXT, {
        inspect: textNode => !PARENT_TAGS_TO_EXCLUDE.includes(textNode.parentElement?.nodeName)
    });
}

It seems to be faster from my amateur benchmarks (at least in Chrome). If I use NodeFilter.SHOW_ALL with my version it shows similar results to the original, so using NodeFilter.SHOW_TEXT is what seems to make the biggest difference (rather than the other little changes).

Of course if any of the elements you wanted to filter out were able to contain nested elements, the original would handle those cases by just adding the tags to the array, while this version would need extra work. style/script/title can only contain text nodes though, as far I know. Wrong again, they can have elements inserted into them programmatically.

It seems you're using constants, and that's good for clarity and legibility, but you forgot one:
Change n.nodeType === 3 to n.nodeType === Node.TEXT_NODE

@netizen-ais Thanks!