從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>
</body>添加一個簡單的樣式
<style>
.box
{
background-color: Red;
}
</style>加一個jQuery的腳本
<script src="js/jquery-1.7.1.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 = "";
}
);
//本次匹配的元素加入樣式
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來輔助就可以了。
