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

How do I test CSS selectors in JavaScript?

提问by Poru

How could I test CSS1-3 selectors to check that they get the correct elements, e.g. with JavaScript (maybe jQuery)?

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

回答by BoltClock

The simplest traditional way by far is to not use JavaScript at all, and just set up a test page by hand where you can test selectors to your heart's content. The test cases you see on the Web (like the well-known CSS3.info Selectors Test) are really just souped-up versions hosted online.

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

But if you're looking for a JavaScript method, you can try the Selectors API. It's available in modern DOM implementations (IE8+ and others) and it provides a JavaScript frontend for querying the DOM for element nodes using CSS selectors, as well as testing CSS selectors natively supported by a given browser.

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

(For browsers that don't implement the Selectors API, you'll have to rely on jQuery, but remember that it provides support for a different set of selectors than what a browser supports as well as its own non-standard extensions which aren't found in the Selectors spec. An example of using jQuery with Chrome's JavaScript console to test a selector can be found here.)

（对于未实现 Selectors API 的浏览器，您将不得不依赖 jQuery，但请记住，它提供对一组不同的选择器的支持，而不是浏览器支持的选择器以及它自己的非标准扩展t 在Selectors 规范中找到。可以在此处找到使用 jQuery 和 Chrome 的 JavaScript 控制台来测试选择器的示例。）

Call querySelector()or querySelectorAll()depending on what you want to test, and check the return value (preferably in your browser's developer tools since you're just testing):

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

• If matches are found, the former method returns the first Elementmatched while the latter returns all elements matched as a NodeList.

• If nothing is found, the former returns nullwhile the latter returns an empty NodeList.

• If the selector is invalid, an exception will be thrown which you can catch.

• 如果找到匹配项，前一种方法返回第一个Element匹配的元素，而后一种方法返回所有匹配的元素作为 a NodeList。

• 如果什么也没找到，前者返回，null而后者返回一个空的NodeList。

• 如果选择器无效，则会抛出一个异常，您可以捕获该异常。

Here are some examples with the command editor (multiline) in Firebug's console on Firefox 10, tested on this very question:

以下是 Firefox 10 上 Firebug 控制台中命令编辑器（多行）的一些示例，针对这个问题进行了测试：

• Finding the first h1in body:

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

  <h1 itemprop="name">
  

• Querying descendants of that h1element we just found:

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

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

• Testing the :-moz-any()pseudo-class in Firefox (:-webkit-any()in Safari/Chrome):

  // 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]
  

• Testing a nonexistent selector (that 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
  

• 找到第一个h1在body：

  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">
  

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

  // 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]
  

• 测试一个不存在的选择器（也许我们很多人希望确实存在）：

  // :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
  

回答by Konstantin Spirin

http://selectorgadget.comis quite nice to test and build CSS selectors. Just drag and drop a piece of JavaScript they provide into your bookmarks bar and click it whenever you need.

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