HTML5中querySelector还可以这么玩！

69 阅读 0 评论 46 点赞

我是靠谱客的博主勤劳机器猫，最近开发中收集的这篇文章主要介绍HTML5中querySelector还可以这么玩！，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

View Code

 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 Example</title>
 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">SINA</a></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>111</li>
17 
<li class='2'>222</li>
18 
<li>333</li>
19 
</ul>
20 
<span><label>label000</label></span>

21 
<label>label111</label>
22 
</div>
23 
<label>label222</label></br>
24 
<label>label333</label></br>
25 
<label>label444</label></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>