Html5 Selectors API

 1 html xmlns="http://www.w3.org/1999/xhtml">
 2   head>
 3     meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 4     title>Selectors API Exampletitle>
 5     style>
 6         .green{background-color:green; }
 7     style>
 8   head>
 9   body>
10         div id="d1">
11             p>a href="http://www.sina.com.cn">SINAa>p>
12             input type=‘text‘ value=‘lingyibin‘ id=‘test‘/>
13             input type=‘text‘ value=‘jasonling‘ id=‘test2‘ disabled />
14             span class=‘testSpan‘> 这里是span的地盘！ span>
15             ul>
16                 li>111li>
17                 li class=‘2‘>222li>
18                 li>333li>
19             ul>
20             span>label>label000label>span>            
21             label>label111label>
22         div>
23         label>label222label>br>
24         label>label333label>br>
25         label>label444label>br>
26         
27         script type="text/javascript">  
28             //alert(document.querySelector(‘div a‘)); // -> http://www.sina.com.cn/
29             //alert(document.querySelector(‘div a‘).innerHTML); // -> SINA
30             //alert(document.querySelectorAll(‘div a‘).length); // -> 1 
31             //alert(document.querySelectorAll(‘div a‘)[0]); // -> http://www.sina.com.cn/
32             //alert(document.querySelector(‘#test‘).value); // -> lingyibin 
33             //alert(document.querySelector(‘input:disabled‘).value); // -> jasonling 
34             //alert(document.querySelector(‘span:not(label)‘).innerHTML); // -> jasonling 
35             //alert(document.querySelectorAll(‘input[id^=test]‘)[1].value); // -> jasonling //以test开头的
36             //alert(document.querySelectorAll(‘input[id$=t2]‘).length); // -> 1 //以test结尾的，注意，id$=2就会错，不能以数字开头
37             //alert(document.querySelectorAll(‘input[id*=est]‘).length); // -> 2 //模糊匹配
38             //alert(document.querySelector(‘.testSpan‘).innerHTML); // -> 这里是span的地盘！
39             //alert(document.querySelector(‘ul li:nth-child(2)‘).innerHTML); // -> 222
40             //alert(document.querySelectorAll(‘ul li:nth-child(3n)‘)[0].innerHTML); // -> 333
41             //alert(document.querySelectorAll(‘ul li:nth-child(odd)‘)[1].innerHTML); // -> 333
42             //alert(document.querySelector(‘ul li:first-child‘).innerHTML); // -> 111
43             //alert(document.querySelector(‘ul li:last-child‘).innerHTML); // -> 333
44             //alert(document.querySelectorAll(‘li[class]‘)[0].innerHTML); // -> 222 //有class属性的li
45             //alert(document.querySelectorAll(‘div label‘)[0].innerHTML); // -> label000 //得到div里面所有的label
46             //alert(document.querySelectorAll(‘div > label‘)[0].innerHTML); // -> label111 //得到div里面的直接label，在本例中只有一个
47             //alert(document.querySelectorAll(‘div + label‘)[0].innerHTML); // -> label222 //注意，这里只能得到一个label
48             //alert(document.querySelectorAll(‘div ~ label‘)[1].innerHTML); // -> label333
49         script>
50 
51   body>
52 html>