jQuery選擇器querySelector的使用指南_jquery

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

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

代碼如下:
element = document.querySelector('selectors');
elementList = document.querySelectorAll('selectors');

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

代碼如下:
element = document.querySelector('selector1,selector2,...');
elementList = document.querySelectorAll('selector1,selector2,...');

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

querySelector

代碼如下:
element = document.querySelector('div#container');//返回id為container的首個(gè)div
element = document.querySelector('.foo,.bar');//返回帶有foo或者bar樣式類(lèi)的首個(gè)元素

querySelectorAll

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

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

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com