javascript - Trying to remove jQuery -

this question has answer here:

• using queryselectorall retrieve direct children 8 answers

there site : http://youmightnotneedjquery.com/ : , angularjs application, remove jquery. reason still need jquery , can't use jqlite angularjs comes because jqlite not support selectors based on classes.

the issue queryselectorall() when try run this:

el.queryselectorall('> .content')

i this:

syntaxerror: failed execute query: '> span' not valid selector.

is there way write selector native dom methods?

if forced use jquery find .content first level childs, use xpath instead, exact same thing:

var xpathquery = "./*[@class='content'"; xpathquery += " or starts-with(@class,'content ')"; xpathquery += " or contains(@class,' content ')"; xpathquery += " or substring(@class, string-length(@class)-6)=' content']"; var iterator=document.evaluate(xpathquery , el, null, xpathresult.any_type, null ); var contentnode = iterator.iteratenext(); 

just careful using ./ instead of .// using '>' instead of space ' ' in jquery selectors.

i managed create general function use:

function findbyclassname(el, classname, firstlevel) {     var xpathquery = firstlevel ? "./" : ".//";     xpathquery += "*[@class='" + classname + "'";     xpathquery += " or starts-with(@class,'" + classname + " ')";     xpathquery += " or contains(@class,' " + classname + " ')";     xpathquery += " or substring(@class, string-length(@class)-" + (classname.length) + ")=' " + classname + "']";      var iterator = document.evaluate(xpathquery, el, null, xpathresult.any_type, null);     var nodes = [];     var node;     while (node = iterator.iteratenext()) {         nodes.push(node);     }     return nodes; } 

for use case should use like:

var contentnodes = findbyclassname(el, 'content', true); 

and working jsfiddle demo.