从IE9开始DOM开始支持支持CSS的选择器了，DOM提供了两个接口

querySelector 得到一个DOM

 

querySelectorAll 得到一组DOM

 

一个个的解释这些选择器也没有必要，我们结合前面的数组知识，写一段代码来说明。页面上有一组元素，然后会依据我们数组中的预订选择值选择相应元素，并将背景变红色，同时提示选择器的含义。这样的代码便于运行理解和扩展。

html的结构部分

 
    
     
         
  1. <body> 
    2.  
         
  2.     <div> 
    3.  
         
  3.         <input type="button" value="开始测试" /> 
    4.  
         
  4.         <span></span><span></span> 
    5.  
         
  5.     </div> 
    6.  
         
  6.     <ol> 
    7.  
         
  7.         <li title="abc1"> 
    8.  
         
  8.             <h2 title="abc"> 
    9.  
         
  9.                 Hello</h2> 
    10.  
         
  10.         </li> 
    11.  
         
  11.         <li title="abc2"> 
    12.  
         
  12.             <input type="checkbox" checked="checked" /> 
    13.  
         
  13.             <input type="checkbox" /> 
    14.  
         
  14.             <input type="checkbox" /> 
    15.  
         
  15.         </li> 
    16.  
         
  16.         <li title="abc3"></li> 
    17.  
         
  17.         <li title="abc4"> 
    18.  
         
  18.             <ul> 
    19.  
         
  19.                 <li title="41abc"> 
    20.  
         
  20.                     <input type="text" readonly="true" /> 
    21.  
         
  21.                     <input type="text" /> 
    22.  
         
  22.                 </li> 
    23.  
         
  23.                 <li title="42abc"> 
    24.  
         
  24.                     <input type="button" value="disabled" disabled="disabled" /> 
    25.  
         
  25.                 </li> 
    26.  
         
  26.                 <li title="43abc4"></li> 
    27.  
         
  27.                 <li title="44abc4"> 
    28.  
         
  28.                     <input type="radio" checked="checked" /> 
    29.  
         
  29.                     <input type="radio" /> 
    30.  
         
  30.                     <input type="radio" checked="checked" /> 
    31.  
         
  31.                 </li> 
    32.  
         
  32.             </ul> 
    33.  
         
  33.         </li> 
    34.  
         
  34.         <li title="abc5"></li> 
    35.  
         
  35.         <li title="abc6"></li> 
    36.  
         
  36.         <li title="abc7"></li> 
    37.  
         
  37.         <li title="abc8"><a href="#">go</a></li> 
    38.  
         
  38.         <li title="abc9"></li> 
    39.  
         
  39.     </ol> 
    40.  
         
  40.     <p> 
    41.  
         
  41.         text</p> 
    42.  
         
  42. </body> 
    43.  
        
 
    
添加一个简单的样式
 
    
 
    
     
         
  1. <style>  
    2.  
         
  2.     .box  
    3.  
         
  3.     {  
    4.  
         
  4.         background-color: Red;  
    5.  
         
  5.     }  
    6.  
         
  6. </style> 
    7.  
        
 
    
加一个jQuery的脚本
 
    
 
    
     
         
  1. <script src="js/jquery-1.7.1.min.js" type="text/javascript"></script> 
    2.  
        
 
    
然后就是我们的测试代码了
 
    
 
    
     
         
  1. <script type="text/javascript">  
    2.  
         
  2.  
    3.  
         
  3.     var tip = ["指定元素名称", "属性中包含", "属性开始", "属性结束", "属性等于",  
    4.  
         
  4.             "html部分", "元素内容为空白", "锚",  
    5.  
         
  5.             "子元素", "兄弟元素", "第一个", "最后一个元素", "第2个", "倒数第2个",  
    6.  
         
  6.             "奇数", "偶数", "类型一致的奇数", "类型一致的偶数",  
    7.  
         
  7.             "从第3个算起，   每隔2个（包含第2个）", "只有一个子元素",  
    8.  
         
  8.             "可用状态", "不可用状态", "只读", "非只读", "选取状", "非选取状态", "一半状态", "不包含" 
    9.  
         
  9.             ];  
    10.  
         
  10.  
    11.  
         
  11.     var selectors = ["ol",  
    12.  
         
  12.                     "[title*=abc]", "[title^=abc]", "[title$=abc]", "[title=abc]",  
    13.  
         
  13.                     ":root",  
    14.  
         
  14.                     ":empty",  
    15.  
         
  15.                     ":target",  
    16.  
         
  16.                     "ol li",  
    17.  
         
  17.                     "ol~p",  
    18.  
         
  18.                     "ol li:first-child", "ol li:last-child", "ol li:nth-child(2)", "ol li:nth-last-child(2)",  
    19.  
         
  19.                     "ol li:nth-child(odd)", "ol li:nth-child(even)", "ol li:nth-of-type(odd)", "ol li:nth-of-type(even)",  
    20.  
         
  20.                     "li:nth-child(2n+3)",  
    21.  
         
  21.                     "ol li:only-child",  
    22.  
         
  22.                     ":enabled", ":disabled", ":read-only", ":read-write",  
    23.  
         
  23.                     ":default", ":checked", ":indeterminate",  
    24.  
         
  24.                     "ol li:not(:first-child)" 
    25.  
         
  25.                     ];  
    26.  
         
  26.  
    27.  
         
  27.  
    28.  
         
  28.     $(  
    29.  
         
  29.     function() {  
    30.  
         
  30.         $(":button").click(  
    31.  
         
  31.         function() {  
    32.  
         
  32.             selectors.forEach(  
    33.  
         
  33.             function(item, index) {  
    34.  
         
  34.                 //把上次有box样式的元素清空下  
    35.  
         
  35.                 Array.prototype.slice.call(document.querySelectorAll(".box")).forEach(  
    36.  
         
  36.                 function(e, i) {  
    37.  
         
  37.                     e.className = "";  
    38.  
         
  38.                 }  
    39.  
         
  39.                 );  
    40.  
         
  40.                 //本次匹配的元素加入样式  
    41.  
         
  41.                 Array.prototype.slice.call(document.querySelectorAll(item)).forEach(  
    42.  
         
  42.                 function(e, i) {  
    43.  
         
  43.                     e.className = "box";  
    44.  
         
  44.                 }  
    45.  
         
  45.                 );  
    46.  
         
  46.                 $("span:eq(0)").html(item);  
    47.  
         
  47.                 $("span:eq(1)").html(tip[index]);  
    48.  
         
  48.                 alert("next");  
    49.  
         
  49.             }  
    50.  
         
  50.             );  
    51.  
         
  51.         }  
    52.  
         
  52.         );  
    53.  
         
  53.     }  
    54.  
         
  54.     );  
    55.  
         
  55. </script> 
    56.  
        
 
    
我们准备了两个数组，一个存放选择器，一个存放选择器的说明。对selectors数组多forEach便利，根据选择器对元素进行添加样式，以可以看到样式结果。
 
    
 
 
    
需要说明下的是
 
    
document.querySelectorAll(".box")得到的不是数组，是nodelist，虽然可以类似数组的for，但真的不是数组，不能直接对其使用数组的方法forEach，如果我们需要转换为数组，我们可以用Array.prototype.slice.call来辅助就可以了。