document選擇器常用的有六個,分別是
1、getElementById()
2、getElementsByName()
3、getElementsByTagName()
4、getElementsByClassName()
5、querySelector()
6、querySelectorAll()。
各個選擇器的用法:
1、document.querySelector()
querySelector()方法僅僅返回匹配指定選擇器的第壹個元素。
2、document.getElementById
這個方法將返回壹個與之對應id屬性的節點對象,它是document對象特有的函數,只能通過其來調用該方法,使用方法下:document.getElementById(‘idName’);
3、getElementsByTagName
這個方法返回壹個對象數組(準確的說是htmlCollection集合),返回元素的順序是它們在文檔中的順序,傳遞給getElementsByTagName()方法的字符串可以不區分大小寫,使用方法如下:document.getElementsByTagName(tagName);
4、getElementsByClassName
這個方法來獲取指定class名的元素,該方法返回文檔中所有指定類名的元素集合,作為NodeList對象。NodeList對象代表壹個有順序的節點列表。
NodeList對象我們可通過節點列表中的節點索引號來訪問列表中的節點(索引號由0開始),所以有時使用時要指定下標,使用方法如下:document.getElementsByClassName(‘className’);
擴展資料:
選擇器的優缺點:
1、querySelector是按css規範來實現的,所以它傳入的字符串中第壹個字符不能是數字.
2、querySelector()方法返回匹配指定css選擇器元素的第壹個子元素。該方法只返回匹配指定選擇器的第壹個元素。如果要返回所有匹配元素,需要使用querySelectorAll()方法替代.
3、query選擇符選出來的元素及元素數組是靜態的,而getElement這種方法選出的元素是動態的。靜態的就是說選出的所有元素的數組,不會隨著文檔操作而改變.