New Queryselector method
Queryselector (): Returns the first matching element found on the page, based on the specified selection rule
Queryselectorall (): Returns all matching elements in the page according to the specified rule
Instance:
1 <HTMLxmlns= "http://www.w3.org/1999/xhtml">2 <Head>3 <Metahttp-equiv= "Content-type"content= "text/html; charset=gb2312" />4 <title>Selectors API Example</title>5 <style>6 . Green{Background-color:Green; }7 </style>8 </Head>9 <Body>Ten <DivID= "D1"> One <P><ahref= "http://www.sina.com.cn">SINA</a></P> A <inputtype= ' text 'value= ' Lingyibin 'ID= ' Test '/> - <inputtype= ' text 'value= ' jasonling 'ID= ' Test2 'Disabled/> - <spanclass= ' Testspan '>This is the site of span!</span> the <ul> - <Li>111</Li> - <Liclass= ' 2 '>222</Li> - <Li>333</Li> + </ul> - <span><label>label000</label></span> + <label>label111</label> A </Div> at <label>label222</label></BR> - <label>label333</label></BR> - <label>label444</label></BR> - - <Scripttype= "Text/javascript"> - //Alert (document.queryselector (' div a '));//-http://www.sina.com.cn/ in //Alert (document.queryselector (' div a '). InnerHTML);//-SINA - //Alert (Document.queryselectorall (' div a '). length);//-1 to //Alert (Document.queryselectorall (' div a ') [0]);//-http://www.sina.com.cn/ + //Alert (document.queryselector (' #test '). value);//-Lingyibin - //Alert (document.queryselector (' input:disabled '). value);//-Jasonling the //Alert (Document.queryselector (' span:not (label) '). InnerHTML);///Jasonling * //Alert (Document.queryselectorall (' input[id^=test] ') [1].value);///-jasonling//start with Test $ //Alert (Document.queryselectorall (' input[id$=t2] '). length);//-1//End with test, note that id$=2 will be wrong, cannot start with a numberPanax Notoginseng //Alert (Document.queryselectorall (' input[id*=est] '). length);//-2//fuzzy matching - //Alert (document.queryselector (' Testspan '). InnerHTML);//--This is the site of span! the //Alert (Document.queryselector (' ul li:nth-child (2) '). InnerHTML);///-222 + //Alert (Document.queryselectorall (' ul li:nth-child (3n) ') [0].innerhtml);//-333 A //Alert (Document.queryselectorall (' ul li:nth-child (Odd) ') [1].innerhtml];//-333 the //Alert (Document.queryselector (' ul li:first-child '). InnerHTML);///-111 + //Alert (Document.queryselector (' ul li:last-child '). InnerHTML);///-333 - //Alert (Document.queryselectorall (' li[class] ') [0].innerhtml);///-222//Li with Class attribute $ //Alert (Document.queryselectorall (' div label ') [0].innerhtml);//-label000//Get all the labels in Div $ //Alert (Document.queryselectorall (' div > label ') [0].innerhtml]///-label111//Get the direct label inside Div, in this case there is only one - //Alert (Document.queryselectorall (' div + label ') [0].innerhtml);///-label222//Note that you can only get a label here - //Alert (Document.queryselectorall (' div ~ label ') [1].innerhtml);///-label333 the </Script> - Wuyi </Body> the </HTML> HTML5
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
