<分区>
有网站:http://youmightnotneedjquery.com/ : 对于我的 AngularJS 应用程序，我真的很想删除 jQuery。我仍然需要 jQuery 而不能只使用 AngularJS 附带的 jQLite 的原因是因为 jQLite 不支持基于类的选择器。
querySelectorAll() 的问题是当我尝试运行它时:
el.querySelectorAll('> .content')
我明白了:
SyntaxError:无法执行查询:'> span' 不是有效的选择器。
有没有办法只用原生 DOM 方法来编写这个选择器？
最佳答案
如果您真的被迫使用 jQuery 来查找 .content 第一级子项，请改用 XPath，它会做完全相同的事情:
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();
小心使用 ./ 而不是 .// 就像使用 '>' 而不是空格 ' ' 在 jQuery 选择器中。
我设法创建了一个通用函数供您使用:
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;
}
对于您的用例，您应该像这样使用它:
var contentNodes = findByClassName(el, 'content', true);
这是工作 jsfiddle DEMO .
关于javascript - 试图删除 jQuery，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21486774/