JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li menuid="1"> <span class="arrow collapsible expand">&nbsp;</span>
 <span><a href="#" name="basenode">ML034</a></span>

        <ul>
            <li menuid="338"> <span class="arrow collapsible expand">&nbsp;</span>
 <span><a href="#" name="basenode">DRUM RACK</a></span>

                <ul>
                    <li menuid="339"><span class="arrow">&nbsp;</span>
 <span><a href="#" name="basenode">000000001615</a></span>

                    </li>
                </ul>
            </li>
        </ul>

JavaScript

(function searchAndApply(node, fun) {
    if(!node) {
        return;
    }

    searchAndApply(node.nextSibling, fun);
    searchAndApply(node.firstChild, fun);
    
    if(node.nodeType === 3) {
        return skipSpace(node.nodeValue) && fun(node.parentNode);
    }
})(document.querySelector("ul:first-child"), function (node) {
    node.style.color = "red";
});

function skipSpace(str) {
    var index = str.search(/^[\S]/);
    if (index === -1) {
        return "";
    }
    return str.slice(index);
}