Vanilla Javascript equivalent of jQuery not()

Question

This is what I'm doing in jQuery:

var text2 = $(node).not("span").text();
console.log(text2);

How do I do this same thing in pure javascript?

I know how to get elements in javascript, but not how to ignore elements and select the rest

var spans = node.getElementsByTagName('span');

I need to get every elements within node that does not contain a <span>

Here is my HTML

                     <tr>
                            <td>
                                <span>Farley</span>
                                <div class="table-row__expanded-content">
                                    <data-key>Sex: </data-key> <data-value>Male</data-value><br />
                                    <data-key>DOB: </data-key> <data-value>12/08/2010</data-value> <br />
                                    <data-key>Weight: </data-key> <data-value>20 lbs</data-value> <br />
                                    <data-key>Location: </data-key> <data-value>Kennel 2B</data-value> <br />
                                    <data-key>Temperament: </data-key> <data-value>Aggresive</data-value> <br />
                                    <data-key>Allergies: </data-key> <data-value>Sulfa, Penicillin, Peanuts</data-value>
                                </div>
                            </td>
                            <td>Cunningham, Stephanie</td>
                            <td>Dog</td>
                            <td>Pomeranian</td>
                            <td>PQRST1234567</td>
                        </tr>

Answer 1

Try querySelectorAll

 var notSpans = document.getElementsByTagName('div')[0].querySelectorAll(':not(span)'); for (var i = 0; i < notSpans.length; i++) { notSpans[i].style.color = 'green'; }

 <div> <p>not a span</p> <span>a span</span> </div>

Answer 2

Or a quick example that runs in a console on this page:

var startNode = jQuery("li.related-site").get(0); // quick jQ to get a testable node.
var spanLess = [];
var child = startNode.firstChild;
while(child){
   if(child.nodeType == 1){
       var anySpans = child.getElementsByTagName('span');
       if(!anySpans.length) spanLess.push(child);
   } 
   child = child.nextSibling;
}
spanLess;

Based on your comment that you are trying to extract values for use with tablesorter what you might also find useful is a function to extract the text values from a node regardless of markup:

function extractText(node){
    if(node.nodeType == 3) return node.nodeValue.trim();
    if(node.nodeType == 1){
        var buf = [];
        var child = node.firstChild;
        while(child){
            var val = extractText(child);
            if(val) buf.push(val);
            child = child.nextSibling;
        }
        return buf.join(' ');
    }
    return '';
}

Answer 3

Thanks to bknights, I was able to modify his answer to work for my needs.

My full fuction is as follows:

    var myTextExtraction = function (node) {
    //console.log(node);

    var child = node.firstChild;
    while (child) {
        if (node.getElementsByTagName('span').length) {
            childValue = child.nextSibling.innerHTML;
            console.log(childValue);
        }
        else {
            childValue = child.nodeValue
            console.log(childValue);
        }
        return childValue;
    }
}

Then I create the node object with the tablesorter plugin:

// Load the table sorter
$(".table").tablesorter(
    {
        textExtraction: myTextExtraction
    }
);

This loops through and outputs the text inside <td><span>mytext</span></td> as well as the text in <td>myothertext<td> . I'm using this for the jquery TableSorter plugin to work with complex data inside <td> s