DOM API querySelector与querySelectorAll的用法

HTML5引入了与jQuery选择器相似的DOM API querySelectorAll(),这货用起来比那个getElement**好多了！废话不多说，直接上实例。

HTML Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
    </head>
    <body>
        <div class="box"></div>    
 
        <div class="box">
            <p id="lost"></p>      
            <p name="qttc"></p>    
        </div>       
 
        <div></div>
 
        <div></div>
 
        <div class="box"></div>    
    </body>
</html>

querySelectorAll与querySelector的区别是querySelectorAll找出所有匹配的节点并返回数组，querySelector找到一个后就返回节点对象。

找出所有标签 document.querySelectorAll("*")

找出head下所有的标签 document.head.querySelectorAll("*")

FireFox下居然自动多出一个style标签

然后使用DOM树查看工具并没有这个标签

Chrome与IE下都正常

找出body标签下的第一个div标签

document.body.querySelectorAll("div")[0]

document.body.querySelector("div")

找出所有class=box的标签 document.querySelectorAll(".box")

找出所有class=box的div标签 document.querySelectorAll("div.box")

找出所有id=lost的标签 document.querySelectorAll("#lost")

找出所有p标签并且id=lost的标签 document.querySelectorAll("p#lost")

找出所有name=qttc的标签 document.querySelectorAll("*[name=qttc]")

找出所有存在name属性的标签 document.querySelectorAll("*[name]")

找出所有class=hot并且存在name属性的p标签 

document.querySelectorAll("p.hot[name]")

document.querySelectorAll("p[class=hot][name]")

支持一下（143
posted @ 2017-01-16 11:37  天涯海角路  阅读(227)  评论(0)    收藏  举报