How to use jQuery method 'not()' in pure JavaScript?

Your given code won't have the intended effect, even if you were to use jQuery.

The not method in jQuery filters the set of matched elements to exclude those which match a condition. Example $(".animal").not(".dog") originally matches any animal, and then is filtered to exclude dogs. The effective jQuery object at the end of the filtering would still include other animals, but would no longer include dogs. This does not do any DOM tree searches, and does not consider descendants. The selector is applied to each element in the original matched set, and the element is excluded if it matches.

The correct way (jsFiddle), in your example, to highlight all the child <div>s except the news, is to select all the child <div> elements, then filter:

$('#outerdiv > div').not('.news').css('background-color', 'red');

To reproduce this in (non-framework-augmented) JS, try (jsfiddle):

var divs = document.querySelectorAll('#outerdiv > div:not(.news)');

for (var i=0; i < divs.length; i++) {
    divs[i].style.backgroundColor = 'red';
}

The :not() pseudo-element selector is a CSS 3 selector which filters matched elements. It is more limited than jQuery's .not() however, and it only allows certain selectors to be nested inside it. From the MDN docs:

The negation CSS pseudo-class, :not(X), is a functional notation taking a simple selector X as an argument. It matches an element that is not represented by the argument. X must not contain another negation selector, or any pseudo-elements.

I think your example jquery might have an error, if I understood what you want ( This is probably what you meant to be your example ).

You could do something like this:

example link

Javascript:

    // Find the correct table...
var table = document.getElementById("mytable"),
    // Find all the td's inside it...
    td = table.getElementsByTagName("td");

// Loop through each td inside the table...
for ( var i=0; i < td.length; i++ ) {

    // If td has a class that is anything but .exclude...
    if ( td[i].className !== 'exclude' ) { 

        // Add class to all non-excluded elements
        td[i].className = "mark";

    }

}

Html:

<table id="mytable">
    <tr>
        <td>td-1</td>
        <td>td-2</td>
    </tr>
    <tr>
        <td class="exclude">td-3</td>
        <td>td-4</td>
    </tr>
    <tr>
        <td>td-5</td>
        <td>td-6</td>
    </tr>
</table>

Css:

.mark { color: red; }

If you want achieve same result with raw javascript you can try something like this:

[].forEach.call(document.querySelectorAll("#outerdiv div:not(.news)"), function (value, index, array) {
    value.style.backgroundColor = "red";
});

jsFiddle

Also look at:

1) Document.querySelectorAll MDN
2) The negation CSS pseudo-class :not(X)

Difference between live and non-live node list. Look at jsFiddle

Maybe you are searching for shim?

Shim

This is a function which imitates native behavior.

Try my shim for jQuery.not():

function not($list, element) {
    const list = Array.from($list);
    const index = list.indexOf(element);
    return list.slice(index);
}

Demo

https://gist.github.com/piecioshka/5a9fa52f1c3f90aed97bfb8e0caa8335