HTML5中querySelector()和querySelectorAll()

時間 2019-12-06

標籤 html5 html queryselector queryselectorall 欄目 HTML5 简体版

原文原文鏈接

HTML5向Web API新引入了document.querySelector以及document.querySelectorAll兩個方法用來更方便地從DOM選取元素，功能相似於jQuery的選擇器。這使得在編寫原生JavaScript代碼時方便了許多。javascript

一、用法html

兩個方法使用差很少的語法，都是接收一個字符串參數，這個參數須要是合法的CSS選擇語法。java

element = document.querySelector('selectors');
elementList = document.querySelectorAll('selectors');

其中參數selectors 能夠包含多個CSS選擇器，用逗號隔開。node

element = document.querySelector('selector1,selector2,...');
elementList = document.querySelectorAll('selector1,selector2,...');

使用這兩個方法沒法查找帶僞類狀態的元素，好比querySelector(':hover')不會獲得預期結果。瀏覽器

二、querySelector()的用法說明app

該方法返回知足條件的單個元素。按照深度優先和先序遍歷的原則使用參數提供的CSS選擇器在DOM進行查找，返回第一個知足條件的元素。spa

element = document.querySelector('div#container');//返回id爲container的首個div
element = document.querySelector('.foo,.bar');//返回帶有foo或者bar樣式類的首個元素

三、querySelectorAll()的用法說明code

該方法返回全部知足條件的元素，結果是個nodeList集合。查找規則與前面所述同樣。htm

elements = document.querySelectorAll('div.foo');//返回全部帶foo類樣式的div

但須要注意的是返回的nodeList集合中的元素是非實時（no-live）的，想要區別什麼是實時非實時的返回結果，請看下例：blog

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>test</title>
 6 </head>
 7 <body>
 8     <div id="container"><div></div><div></div></div>
 9     <script type="text/javascript">
10     //首先選取頁面中id爲container的元素
11     container=document.getElementById('container');
12     console.log(container.childNodes.length);//結果爲2
13     //而後經過代碼爲其添加一個子元素
14     container.appendChild(document.createElement('div'));
15     //這個元素不但添加到頁面了，這裏的變量container也自動更新了
16     console.log(container.childNodes.length);//結果爲3
17     </script>
18 </body>
19 </html>

　　經過上面的例子就很好地理解了什麼是會實時更新的元素。document.getElementById返回的即是實時結果，上面對其添加一個子元素後，再次獲取全部子元素個數，已經由原來的2個更新爲3個(這裏不考慮有些瀏覽器好比Chrome會把空白也解析爲一個子節點)。

四、document.querySelector()和document.querySelectorAll()中的轉義說明

　　咱們知道反斜槓是用來轉義用的，好比在字符串裏咱們想表示空字符就使用'\b'，換行'\n'。一樣，在提供給querySelector和querySelectorAll的參數也支持轉義，瞭解這點很是重要。

先看個例子，好比咱們有個div它的樣式類爲'foo:bar'，固然我知道你通常不會這樣寫。當咱們須要選擇它的時候，就須要將其中的冒號進行轉義，不然拋錯。

首先，瀏覽器報怨表示不是一個合法的選擇語句。同時，有趣的事情來了，或許你覺得將冒號直接轉義就解決問題了。可是一樣表示非法。緣由就在於反斜槓在字符串中自己就表示轉義的意思，它於冒號結合轉不出東西來，因而拋錯。因此正確的作法是將反斜槓轉義後'#container\\:test'再傳遞給querySelector，後者在接收到'#container\\:test'這個參數後，字符串將兩個反斜槓轉義成一個，而後querySelector前面獲得的一個反斜槓與冒號結合進行轉義獲得正確結果。也就是說經歷兩次轉義，一次是字符串當中，一次是querySelector解析參數時。　　

　　理解這點後，能夠來看一個更有趣的例子了。好比咱們要選擇類名裏面含反斜槓的元素。是的，咱們須要一共使用四個反斜槓！才能正常工做。

五、瀏覽器兼容狀況

目前各主流瀏覽器對此API提供了良好支持.