从IE9开始DOM开始支持支持CSS的选择器了，DOM提供了两个接口
querySelector 得到一个DOM
querySelectorAll 得到一组DOM
一个个的解释这些选择器也没有必要，我们结合前面的数组知识，写一段代码来说明。页面上有一组元素，然后会依据我们数组中的预订选择值选择相应元素，并将背景变红色，同时提示选择器的含义。这样的代码便于运行理解和扩展。
html的结构部分
<body> <div> <input type="button" value="开始测试" /> <span></span><span></span> </div> <ol> <li title="abc1"> <h2 title="abc"> Hello</h2> </li> <li title="abc2"> <input type="checkbox" checked="checked" /> <input type="checkbox" /> <input type="checkbox" /> </li> <li title="abc3"></li> <li title="abc4"> <ul> <li title="41abc"> <input type="text" readonly="true" /> <input type="text" /> </li> <li title="42abc"> <input type="button" value="disabled" disabled="disabled" /> </li> <li title="43abc4"></li> <li title="44abc4"> <input type="radio" checked="checked" /> <input type="radio" /> <input type="radio" checked="checked" /> </li> </ul> </li> <li title="abc5"></li> <li title="abc6"></li> <li title="abc7"></li> <li title="abc8"><a href="#">go</a></li> <li title="abc9"></li> </ol> <p> text</p> <a href="http://hovertree.com/">何问起</a> </body>
添加一个简单的样式
<style> .box { background-color: Red; } </style> <!-- hovertree.com -->
加一个jQuery的脚本
<script src="http://down.hovertree.com/jquery/jquery-1.12.3.min.js" type="text/javascript"></script>
然后就是我们的测试代码了
<script type="text/javascript"> var tip = ["指定元素名称", "属性中包含", "属性开始", "属性结束", "属性等于", "html部分", "元素内容为空白", "锚", "子元素", "兄弟元素", "第一个", "最后一个元素", "第2个", "倒数第2个", "奇数", "偶数", "类型一致的奇数", "类型一致的偶数", "从第3个算起， 每隔2个（包含第2个）", "只有一个子元素", "可用状态", "不可用状态", "只读", "非只读", "选取状", "非选取状态", "一半状态", "不包含" ]; var selectors = ["ol", "[title*=abc]", "[title^=abc]", "[title$=abc]", "[title=abc]", ":root", ":empty", ":target", "ol li", "ol~p", "ol li:first-child", "ol li:last-child", "ol li:nth-child(2)", "ol li:nth-last-child(2)", "ol li:nth-child(odd)", "ol li:nth-child(even)", "ol li:nth-of-type(odd)", "ol li:nth-of-type(even)", "li:nth-child(2n+3)", "ol li:only-child", ":enabled", ":disabled", ":read-only", ":read-write", ":default", ":checked", ":indeterminate", "ol li:not(:first-child)" ]; $( function() { $(":button").click( function() { selectors.forEach( function(item, index) { //把上次有box样式的元素清空下 Array.prototype.slice.call(document.querySelectorAll(".box")).forEach( function(e, i) { e.className = ""; } ); //本次匹配的元素加入样式 hovertree.com Array.prototype.slice.call(document.querySelectorAll(item)).forEach( function(e, i) { e.className = "box"; } ); $("span:eq(0)").html(item); $("span:eq(1)").html(tip[index]); alert("next"); } ); } ); } ); </script>
我们准备了两个数组，一个存放选择器，一个存放选择器的说明。对selectors数组多forEach便利，根据选择器对元素进行添加样式，以可以看到样式结果。
需要说明下的是
document.querySelectorAll(".box")得到的不是数组，是nodelist，虽然可以类似数组的for，但真的不是数组，不能直接对其使用数组的方法forEach，如果我们需要转换为数组，我们可以用Array.prototype.slice.call来辅助就可以了。