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

Question

我怎么能测试CSS1-3选择器来检查它们是否得到了正确的元素,例如使用JavaScript(也许是jQuery)？

Answer 1

到目前为止,最简单的传统方法是根本不使用JavaScript,只需手动设置测试页面,您可以根据自己的内容测试选择器.您在Web上看到的测试用例(如着名的CSS3.info选择器测试)实际上只是在线托管的加强版本.

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

(对于没有实现Selectors API的浏览器,你必须依赖jQuery,但请记住,它提供了对浏览器支持的不同选择器集的支持,以及它自己的非标准扩展.在Selectors规范中找到了.可以在此处找到使用jQuery与Chrome的JavaScript控制台测试选择器的示例.)

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

• 如果找到匹配,则前一个方法返回第一个Element匹配,而后一个返回匹配为a的所有元素NodeList.

• 如果没有找到,前者返回,null而后者返回空NodeList.

• 如果选择器无效,将抛出一个您可以捕获的异常.

以下是Firefox 10上Firebug控制台中命令编辑器(多行)的一些示例,在此问题上进行了测试:

• 找到第一个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