Dom supports CSS selectors since ie9. Dom provides two interfaces.
Queryselector
Queryselectorall gets a set of DOM
There is no need to explain these selectors one by one. Let's write a piece of code based on the previous array knowledge. There is a group of elements on the page, and then select the corresponding element based on the Reservation Selection value in our array, and the background is changed to red, and the meaning of the selector is prompted. This code is easy to understand and expand.
HTML Structure
<Body> <div> <input type = "button" value = "Start test"/> <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>
Add a simple style
<style> .box { background-color: Red; }</style>
Add a jquery script
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
And then our test code.
<SCRIPT type = "text/JavaScript"> var tip = ["specify element name", "attributes include", "attribute start", "attribute end ", "attribute equals", "HTML part", "element content blank", "anchor", "sub-element", "Brother element", "first ", "Last element", "2nd", "2nd", "odd number", "even number", "odd number of consistent types", "even number of consistent types ", "counted from 3rd, every two (including 2nd)", "only one sub-element", "available status", "unavailable status", "read-only ", "Non-read-only", "selected", "not selected", "Half status", "not included"]; var selectors = ["ol ", "[Title * = ABC]", "[Title ^ = ABC]", "[Title $ = ABC]", "[Title = ABC]", ": Root ", ": empty", ": Tar Get "," 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) {// clears array from the last element with a box style. prototype. slice. call (document. queryselectorall (". box ")). foreach (function (E, I) {e. classname = "" ;}); // Add the matched element to the style array. prototype. slice. call (document. queryselectorall (item )). foreach (function (E, I) {e. classname = "box" ;}); $ ("span: eq (0)" example .html (item); $ ("span: eq (1) "Tip [Index]); alert (" Next ") ;}); </SCRIPT>
We have prepared two Arrays: A storage selector and a description of the storage selector. Multiple foreach operations are convenient for selectors arrays. You can add a style to the element based on the selector to see the style result.
It must be noted that
Document. queryselectorall (". box ") is not an array, It is a nodelist, although it can be similar to an array for, but it is really not an array, you cannot directly use the array method foreach for it, if we need to convert to an array, we can use 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
