如何在 JavaScript 中测试 CSS 选择器？答案

【问题标题】：How do I test CSS selectors in JavaScript?如何在 JavaScript 中测试 CSS 选择器？
【发布时间】：2012-02-28 06:24:49
【问题描述】：

我如何测试 CSS1-3 选择器以检查它们是否获得了正确的元素，例如使用 JavaScript（可能是 jQuery）？

【问题讨论】：

我建议您阅读this 博客文章，该文章讨论了您的确切问题并提供了一些解决方案。

标签： javascript css dom css-selectors selectors-api

【解决方案1】：

到目前为止，最简单的传统方法是根本不使用 JavaScript，而只需手动设置一个测试页面，您可以在其中测试选择器是否符合您的喜好。您在 Web 上看到的测试用例（如著名的 CSS3.info Selectors Test）实际上只是在线托管的增强版本。

但是，如果您正在寻找 JavaScript 方法，您可以尝试Selectors API。它在现代 DOM 实现（IE8+ 和其他）中可用，它提供了一个 JavaScript 前端，用于使用 CSS 选择器查询 DOM 中的元素节点，以及测试给定浏览器原生支持的 CSS 选择器。

（对于没有实现 Selectors API 的浏览器，您将不得不依赖 jQuery，但请记住，它提供对不同选择器集的支持，而不是浏览器所支持的以及它自己的非-在Selectors spec 中找不到的标准扩展。可以在here 找到使用jQuery 和Chrome 的JavaScript 控制台测试选择器的示例。）

根据您要测试的内容调用querySelector() 或querySelectorAll()，并检查返回值（最好在浏览器的开发人员工具中，因为您只是在测试）：

如果找到匹配项，前一种方法返回第一个匹配的Element，而后者返回所有匹配为NodeList的元素。
如果没有找到，前者返回null，而后者返回一个空的NodeList。
如果选择器无效，则会抛出异常，您可以捕获该异常。

以下是 Firefox 10 上 Firebug 控制台中的命令编辑器（多行）的一些示例，在 this very question 上进行了测试：

在body中找到第一个h1：

var h1 = document.body.querySelector('h1');
console.log(h1);

<h1 itemprop="name">

查询我们刚刚找到的 h1 元素的后代：

var subnodes = h1.querySelectorAll('*');
console.log(subnodes[0]);

<a class="question-hyperlink" href="/questions/9165859/how-do-i-test-css-selectors-in-javascript">

在 Firefox 中测试 :-moz-any() 伪类（在 Safari/Chrome 中为 :-webkit-any()）：

// This selector works identically to h1 > a, li > a
var hyperlinks = document.querySelectorAll(':-moz-any(h1, li) > a');
console.log(hyperlinks);

[a#nav-questions /questions, a#nav-tags /tags, a#nav-users /users, a#nav-badges /badges, a#nav-unanswered /unanswered, a#nav-askquestion /questions/ask, a.question-hyperlink /questio...vascript]

测试一个不存在的选择器（perhaps many of us wish did exist）：

// :first-of-class doesn't exist!
var selector = 'div.answer:first-of-class';

try {
    var firstAnswer = document.querySelector(selector);
    console.log(firstAnswer);
} catch (e) {
    console.log('Invalid selector: ' + selector);
}

Invalid selector: div.answer:first-of-class

【讨论】：

【解决方案2】：

http://selectorgadget.com 非常适合测试和构建 CSS 选择器。只需将他们提供的一段 JavaScript 拖放到您的书签栏中，并在需要时单击它。

【讨论】：