javascript高級(jí)選擇器querySelector和querySelectorAll全面解析
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都實(shí)現(xiàn)了NodeSelector接口。即這三種類型的元素都擁有者兩個(gè)方法。querySelector和querySelectorAll的參數(shù)須是符合 css selector 的字符串。不同的是querySelector返回的是一個(gè)對(duì)象,querySelectorAll返回的一個(gè)集合(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集合中的元素是非實(shí)時(shí)(no-live)的,想要區(qū)別什么是實(shí)時(shí)非實(shí)時(shí)的返回結(jié)果,請(qǐng)看下例:
<div id="container"> <div></div> <div></div> </div>
//首先選取頁面中id為container的元素 container=document.getElementById('#container'); console.log(container.childNodes.length)//結(jié)果為2 //然后通過代碼為其添加一個(gè)子元素 container.appendChild(document.createElement('div')); //這個(gè)元素不但添加到頁面了,這里的變量container也自動(dòng)更新了 console.log(container.childNodes.length)//結(jié)果為3
通過上面的例子就很好地理解了什么是會(huì)實(shí)時(shí)更新的元素。document.getElementById返回的便是實(shí)時(shí)結(jié)果,上面對(duì)其添加一個(gè)子元素后,再次獲取所有子元素個(gè)數(shù),已經(jīng)由原來的2個(gè)更新為3個(gè)(這里不考慮有些瀏覽器比如Chrome會(huì)把空白也解析為一個(gè)子節(jié)點(diǎn))。
Element.querySelector和Element.querySelectorAll和jQuery(element).find(selector)選擇器的區(qū)別:
<SPAN style="FONT-SIZE: 15px"><divid="test1"><ahref="http://www.dbjr.com.cn/">腳本之家</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://www.dbjr.com.cn/">腳本之家</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高級(jí)選擇器querySelector和querySelectorAll全面解析就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
對(duì)JavaScript的全文搜索實(shí)現(xiàn)相關(guān)度評(píng)分的功能的方法
這篇文章主要介紹了對(duì)JavaScript的全文搜索實(shí)現(xiàn)相關(guān)度評(píng)分的功能的方法,采用了一個(gè)名為Okapi BM25的算法,文中亦有介紹,需要的朋友可以參考下2015-06-06javascript實(shí)現(xiàn)Java中的Map對(duì)象功能的實(shí)例詳解
這篇文章主要介紹了javascript 自定義對(duì)象實(shí)現(xiàn)Java中的Map對(duì)象功能的相關(guān)資料,這里實(shí)現(xiàn)這樣的功能,幫助大家理解這部分內(nèi)容,需要的朋友可以參考下2017-08-08實(shí)現(xiàn)網(wǎng)頁頁面跳轉(zhuǎn)的幾種方法(meta標(biāo)簽、js實(shí)現(xiàn)、php實(shí)現(xiàn))
今天總結(jié)了幾種頁面跳轉(zhuǎn)的方法,分別是用meta標(biāo)簽實(shí)現(xiàn)、用javascript實(shí)現(xiàn)、用php實(shí)現(xiàn),下面就來一一分享一下吧。2014-05-05JavaScript DOM學(xué)習(xí)第四章 getElementByTagNames
HTML有一些相關(guān)有不同tag名字的相關(guān)元素,比如H1-H6或者input,select和TEXTAREA。getElementByTagName只能取得那些有相同tag名稱的元素,所以你不能用他來取得所有的標(biāo)題或者整個(gè)表單內(nèi)容。2010-02-02javascript實(shí)現(xiàn)playfair和hill密碼算法
這篇文章主要介紹了javascript實(shí)現(xiàn)playfair和hill密碼算法,需要的朋友可以參考下2014-12-12關(guān)于可運(yùn)行代碼無法正常執(zhí)行的使用說明
腳本之家網(wǎng)站為了方便大家快速的查看效果,只要大家運(yùn)行一下代碼即可能看到效果。2010-05-05window.location.href的用法(動(dòng)態(tài)輸出跳轉(zhuǎn))
無論在靜態(tài)頁面還是動(dòng)態(tài)輸出頁面中window.location.href都是不錯(cuò)的用了跳轉(zhuǎn)的實(shí)現(xiàn)方案2014-08-08JavaScript面對(duì)國際化編程時(shí)的一些建議
這篇文章主要介紹了JavaScript面對(duì)國際化編程時(shí)的一些建議,包括時(shí)區(qū)與語言編碼等一些值得注意的問題,需要的朋友可以參考下2015-06-06