快捷導(dǎo)航

javascript高級選擇器querySelector和querySelectorAll全面解析

更新時間：2016年04月07日 17:16:01 投稿：jingxian

下面小編就為大家?guī)硪黄猨avascript高級選擇器querySelector和querySelectorAll全面解析。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

querySelector 和 querySelectorAll 方法是 W3C Selectors API 規(guī)范中定義的。他們的作用是根據(jù) CSS 選擇器規(guī)范，便捷定位文檔中指定元素。

目前幾乎主流瀏覽器均支持了他們。包括 IE8(含) 以上版本、 Firefox、 Chrome、Safari、Opera。

querySelector 和 querySelectorAll 在規(guī)范中定義了如下接口：

module dom { [Supplemental, NoInterfaceObject] interface NodeSelector { Element querySelector(in DOMString selectors); NodeList querySelectorAll(in DOMString selectors); }; Document implements NodeSelector; DocumentFragment implements NodeSelector; Element implements NodeSelector; };

從接口定義可以看到Document、DocumentFragment、Element都實現(xiàn)了NodeSelector接口。即這三種類型的元素都擁有者兩個方法。querySelector和querySelectorAll的參數(shù)須是符合 css selector 的字符串。不同的是querySelector返回的是一個對象，querySelectorAll返回的一個集合(NodeList)。

獲取頁面I屬性D為test的元素：

1 document.getElementById("test");
2 document.querySelector("#test");
3 document.querySelectorAll("#test")[0];

獲取頁面class屬性為”red”的元素:

document.getElementsByClassName('red')
document.querySelector('.red')
document.querySelectorAll('.red')

ps:

但需要注意的是返回的nodeList集合中的元素是非實時（no-live）的，想要區(qū)別什么是實時非實時的返回結(jié)果，請看下例：

 <div id="container">
   <div></div>
   <div></div>
 </div>

//首先選取頁面中id為container的元素
container=document.getElementById('#container');
console.log(container.childNodes.length)//結(jié)果為2
//然后通過代碼為其添加一個子元素
container.appendChild(document.createElement('div'));
//這個元素不但添加到頁面了，這里的變量container也自動更新了
console.log(container.childNodes.length)//結(jié)果為3

通過上面的例子就很好地理解了什么是會實時更新的元素。document.getElementById返回的便是實時結(jié)果，上面對其添加一個子元素后，再次獲取所有子元素個數(shù)，已經(jīng)由原來的2個更新為3個(這里不考慮有些瀏覽器比如Chrome會把空白也解析為一個子節(jié)點(diǎn))。

Element.querySelector和Element.querySelectorAll和jQuery(element).find(selector)選擇器的區(qū)別：

<SPAN style="FONT-SIZE: 15px"><divid="test1"><ahref="http://m.fzitv.net/">腳本之家</a></div> 
<pid="bar">111</p> 
<script> 
var d1 = document.getElementById('test1'), 
obj1 = d1.querySelector('div a'), 
obj2 = d1.querySelectorAll('div a'); 
obj3 = $(d1).find('div a'); 
console.log(obj1)//<a href="http://m.fzitv.net/">腳本之家</a> 
console.log(obj2.length)//1 
console.log(obj3)//null 
</script> 
</SPAN>

querySelectorAll 在文檔內(nèi)找全部符合選擇器描述的節(jié)點(diǎn)包括Element本身

jQuery(element).find(selector) 在文檔內(nèi)找全部符合選擇器描述的節(jié)點(diǎn)不包括Element本身

以上這篇javascript高級選擇器querySelector和querySelectorAll全面解析就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: