JavaScript選擇器常用的有getElementById()、getElementsByName()、getElementsByTagName()、getElementsByClassName()、querySelector()、querySelectorAll()。
1、document.querySelector()
querySelector() 方法僅僅返回匹配指定選擇器的第一個元素。如果你需要返回所有的元素，請使用 querySelectorAll() 方法替代
（1）獲取文檔中 id=“demo” 的元素：
document.querySelector("#demo");
（2）獲取文檔中第一個p的元素
document.querySelector(“p”);
（3）獲取文檔中 class=“example” 的第一個元素
document.querySelector(".example");
（4）獲取文檔中 class=“example” 的第一個 p 元素:
document.querySelector(“p.example”);
（5）獲取文檔中有 “target” 屬性的第一個 a 元素：
document.querySelector(“a[target]”);
（6）多選擇器時
document.querySelectorAll(’.ynqc’)
2、document.getElementById
這個方法將返回一個與之對應id屬性的節點對象，它是document對象特有的函數，只能通過其來調用該方法，使用方法下:document.getElementById(‘idName’);
廣州品牌設計公司https://www.houdianzi.com PPT模板下載大全https://redbox.wode007.com
3、getElementsByTagName
這個方法返回一個對象數組（准確的說是htmlCollection集合）,返回元素的順序是它們在文檔中的順序,傳遞給 getElementsByTagName() 方法的字符串可以不區分大小寫,使用方法如下:document.getElementsByTagName(tagName);
4、getElementsByClassName
這個方法來獲取指定class名的元素,該方法返回文檔中所有指定類名的元素集合，作為 NodeList 對象。NodeList 對象代表一個有順序的節點列表。NodeList 對象 我們可通過節點列表中的節點索引號來訪問列表中的節點(索引號由0開始), 所以有時使用時要指定下標，使用方法如下:document.getElementsByClassName(‘className’);
5、選擇器的優缺點
（1）querySelector是按css規范來實現的，所以它傳入的字符串中第一個字符不能是數字.
（2）querySelector() 方法返回匹配指定 css 選擇器元素的第一個子元素 。 該方法只返回匹配指定選擇器的第一個元素。如果要返回所有匹配元素，需要使用 querySelectorAll() 方法替代．
（3）query選擇符選出來的元素及元素數組是靜態的，而getElement這種方法選出的元素是動態的。靜態的就是說選出的所有元素的數組，不會隨着文檔操作而改變．