從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來輔助就可以了。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
