vanilla javascript前缀以css选择器开头答案

【问题标题】：vanilla javascript prefix begins with css selectorvanilla javascript前缀以css选择器开头
【发布时间】：2015-10-11 16:30:05
【问题描述】：

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

基本上是$('[class^="xyz-"]').length检查，不使用jQuery...它只需要找到一个出现并且可以中断；紧接着。

谢谢！

编辑：应该是跨浏览器和移动设备，可能是 ie7+

【问题讨论】：

我可以，但我也可以在社区驱动的问答网站上询问是否有人已经知道这样做的好方法，而无需花 3 天的时间来解决问题，并且可能最终得到一个半有效的解决方案。
寻找超薄库，太大了——然后是上面解释的后者。
我投票关闭这个过于广泛 - 如果有一个可重用的解决方案足够简单，可以跨浏览器可靠地运行 stackoverflow 答案，你真的认为人们会使用 jQuery 及其同类吗？如果你想要一个线索而不是查看document.querySelectorAll 和它的各种 polyfills - 比如 Sizzle。

标签： javascript dom css-selectors vendor-prefix

【解决方案1】：

使用 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>

【讨论】：

hmm... 看起来很整洁...stackoverflow.com/questions/4681968/… 说不支持 IE :/ 我还需要让它在任何浏览器上运行得差不多...包括。移动
确实如此。如果是这样，您几乎要么仅限于 Sizzle/jQuery，要么自己遍历 DOM 并手动计数（无论如何，这都是 Sizzle 会做的）。
如果 HTML 在您的控制之下，您也可以在设置 xyz-foo 类时设置 xyz 类。然后找到所有.xyz 元素就更容易了，现有的polyfills 可以定位它。

【解决方案2】：

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

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

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

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

【讨论】：

需要它在几乎所有浏览器上运行 - 有没有简单的方法可以在不加载大量库的情况下进行简单的回退？
@Tobias 你问它是否在每个浏览器上运行？
正确 - 我不确定这是否支持旧版浏览器
我很确定这将适用于较旧的浏览器，基本上任何支持querySelector的浏览器
@Tobias 我已经在几个较旧的浏览器上进行了测试，它对所有浏览器都有效。它应该适合您的需求