jQuery選擇器querySelector的使用指南_jquery

簡介

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

兩個方法使用差不多的語法，都是接收一個字串參數，這個參數需要是合法的CSS選擇語法。

複製程式碼 程式碼如下:

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

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

複製程式碼 程式碼如下:

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

使用這兩個方法無法找出帶有偽類狀態的元素，例如querySelector(':hover')不會得到預期結果。

querySelector

複製程式碼 程式碼如下:

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

querySelectorAll

此方法傳回所有滿足條件的元素，結果是個nodeList集合。查找規則與前面所述一樣。

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