从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来辅助就可以了。