Question

有没有人知道在没有关闭浏览器的情况下在整个dom中运行[class ^ ='xyz-'] css选择器搜索vanilla js，没有任何库的可靠方法？

基本上是$（'[class ^ =“xyz - ”]'）。长度检查而不使用jQuery ...它只需要找到一个事件并且可以中断;之后。

谢谢！

编辑：应该是跨浏览器＆amp;移动，可能是ie7 +

Answer 1

您可以将其与querySelector结合使用。

document.querySelector("[class^='xyz-']");

如果您需要多个元素，也可以使用querySelectorAll执行此操作。

这是一个JSFiddle，它会将项目记录到控制台中。

Answer 2

使用XPath很容易。也更快。

var xpathResult = document.evaluate(
  'count(//div[starts-with(@class, "xyz-")])',
  document,
  null,
  XPathResult.ANY_TYPE, null);
snippet.log(xpathResult.numberValue);

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
 
<div></div>
<div class="xyz-foo"></div>
<div class="bar"></div>
<div></div>

慢选项（我相信IE6 +）：

function getElementsByClassNamePrefix(prefix) {
  var els = document.getElementsByTagName("*");
  var result = [];
  for (var i = 0; i < els.length; i++) {
    if (els[i].className.substr(0, prefix.length) == prefix) {
      result.push(els[i]);
    }
  }
  return result;
}
snippet.log(getElementsByClassNamePrefix('xyz-').length);

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
 
<div></div>
<div class="xyz-foo"></div>
<div class="bar"></div>
<div></div>

vanilla javascript前缀以css选择器开头

2 个答案: