HTML5向Web API新引入了document.querySelector以及document.querySelectorAll兩個(gè)方法用來(lái)更方便地從DOM選取元素，功能類似于jQuery的選擇器。這使得在編寫(xiě)原生JavaScript代碼時(shí)方便了許多。
用法

兩個(gè)方法使用差不多的語(yǔ)法，都是接收一個(gè)字符串參數(shù)，這個(gè)參數(shù)需要是合法的CSS選擇語(yǔ)法。

復(fù)制代碼代碼如下:

element = document.querySelector('selectors');

elementList = document.querySelectorAll('selectors');

其中參數(shù)selectors 可以包含多個(gè)CSS選擇器，用逗號(hào)隔開(kāi)。

復(fù)制代碼代碼如下:

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

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

使用這兩個(gè)方法無(wú)法查找?guī)晤悹顟B(tài)的元素，比如querySelector(':hover')不會(huì)得到預(yù)期結(jié)果。

querySelector

復(fù)制代碼代碼如下:

element = document.querySelector('div#container');//返回id為container的首個(gè)div

element = document.querySelector('.foo,.bar');//返回帶有foo或者bar樣式類的首個(gè)元素

querySelectorAll

該方法返回所有滿足條件的元素，結(jié)果是個(gè)nodeList集合。查找規(guī)則與前面所述一樣。

elements = document.querySelectorAll('div.foo');//返回所有帶foo類樣式的div
需要注意的是返回的nodeList集合中的元素是非實(shí)時(shí)的.

您可能感興趣的文章:

相關(guān)文章

用jQuery獲取IE9下拉框默認(rèn)值問(wèn)題探討
本文與大家詳細(xì)探討下用jQuery獲取IE9下拉框默認(rèn)值的問(wèn)題,如果下拉框沒(méi)有空默認(rèn)值會(huì)怎么樣等一系列問(wèn)題，感興趣的朋友可以參考下哈，希望對(duì)大家有所幫助
2013-07-07
jquery ajax對(duì)特殊字符進(jìn)行轉(zhuǎn)義防止js注入使用示例
如果有人在留言里寫(xiě)入了js語(yǔ)句,這結(jié)語(yǔ)句都會(huì)被執(zhí)行.解決辦法就是對(duì)這些特殊字符進(jìn)行轉(zhuǎn)義再顯示出來(lái)，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下
2013-11-11
jQuery打印指定區(qū)域Html頁(yè)面并自動(dòng)分頁(yè)
項(xiàng)目中需要用到打印HTML頁(yè)面，需要指定區(qū)域打印，使用jquery.PrintArea.js 插件實(shí)現(xiàn)分頁(yè),需要的朋友可以參考下
2014-07-07
jQuery實(shí)現(xiàn)復(fù)選框批量選擇與反選的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)復(fù)選框批量選擇與反選的方法,主要通過(guò)jQuery的attr與removeAttr方法實(shí)現(xiàn)選擇與反選的功能,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-06-06
jquery post方式傳遞多個(gè)參數(shù)值后臺(tái)以數(shù)組的方式進(jìn)行接收
在用jquery的post方式傳遞多個(gè)值時(shí)，在后臺(tái)頁(yè)面可以用數(shù)組形式接收,很不錯(cuò)吧，可以接收多個(gè)值啊，接下來(lái)介紹實(shí)現(xiàn)方法，感興趣的朋友可以了解下哦
2013-01-01
jquery easyui combox一些實(shí)用的小方法
這篇文章主要介紹了jquery easyui combox一些實(shí)用的小方法，有需要的朋友可以參考一下
2013-12-12
突發(fā)奇想的一個(gè)jquery插件
這兩天突發(fā)奇想，結(jié)果就做了一個(gè)jQ的tip插件，形狀就像下面這樣。會(huì)隨title的多少改變大小的喲.
2010-11-11
jquery調(diào)整表格行tr上下順序?qū)嵗v解
這篇文章主要為大家介紹了jquery調(diào)整表格行tr上下順序?qū)嵗哂幸欢ǖ膮⒖純r(jià)值，感興趣的朋友可以參考一下
2016-01-01
jQuery中的關(guān)系查找方法
這篇文章主要介紹了jQuery中的關(guān)系查找方法，關(guān)系查找方法分有children()子級(jí)、siblings()兄弟的一些方式，下文都有介紹到，文章內(nèi)容介紹詳細(xì)，需要的小伙伴可以參考一下，希望對(duì)你的學(xué)習(xí)有所幫助
2022-03-03
JQuery.validate在ie8下不支持的快速解決方法
下面小編就為大家?guī)?lái)一篇JQuery.validate在ie8下不支持的快速解決方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧
2016-05-05