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;
}

The textNodesUnder example function currently has a mistake: text inside style/script tags won't be filtered out because you should be checking the node's parent, not the text node itself.

Edit: I'm wrong, see below.

It does work (ignores <script>/<style>) because with NodeFilter.FILTER_REJECT those nodes are ignored completely, and we never reach the text nodes inside:

https://developer.mozilla.org/en-US/docs/Web/API/NodeFilter/acceptNode

(...) this value is treated as "skip this node and all its children".

You're right. I got conflated for a couple of reasons:

1. When I tested it I specified the style/script element as the root, which will return its text node since the root isn't included in the nodes being iterated over. I should have known better, but it might be good to have an extra check for that case regardless.
2. If NodeFilter.SHOW_TEXT was used instead of NodeFilter.SHOW_ALL for the 2nd argument when creating the TreeWalker (to make a manual nodeType check unnecessary), then the issue would occur.

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!