Document 對(duì)象常用六種方法：
| 方法 | 描述 |
|---|---|
| getElementById() | 返回對(duì)擁有指定id的第一個(gè)對(duì)象的引用 |
| getElementsByName() | 返回帶有指定名稱的對(duì)象集合 |
| getElementsByClassName() | 返回文檔中所有指定類名的元素集合，作為NodeList對(duì)象 |
| getElementsByTagName() | 返回帶有指定標(biāo)簽名的對(duì)象集合 |
| querySelector() | 返回文檔中匹配指定的CSS選擇器的第一元素 |
| querySelectorAll() | document.querySelectorAll()是HTML5中引入的新方法，返回文檔中匹配的CSS選擇器的所有元素節(jié)點(diǎn)列表 |
1.getElementByID()
document.getElementById("demo");
?定義和用法：
- 如果沒(méi)有指定ID的元素則返回第一個(gè)；
- 如果存在多個(gè)指定的ID的元素則返回第一個(gè)；
- 如果需要查找到那些沒(méi)有ID的元素，可以通過(guò)CSS選擇器使用querySelector()
2.getElementByName()
?document.getElementsByName(name)
?定義和用法：
- 該方法與geteElementById()方法相似，但是它查詢?cè)氐膎ame屬性，而不是id屬性
- 所有g(shù)etElementByName()方法返回的是元素的數(shù)組，而不是一個(gè)元素
?3.getElementByClassName()
??document.getElementsByClassName(classname);
??定義和用法：
- NodeList 對(duì)象,表示指定類名的元素集合，元素在集合中的順序以其在代碼中出現(xiàn)次序排序
- 多個(gè)類名使用空格分隔，如"test demo"
*你可以使用 NodeList 對(duì)象的?length?屬性來(lái)確定指定類名的元素個(gè)數(shù)，并循環(huán)各個(gè)元素來(lái)獲取你需要的那個(gè)元素。
實(shí)例
查看 <div> 元素中有多少個(gè) class="child" 的元素 (使用 NodeList 的 length 屬性):
?var?x = document.getElementById("myDIV").getElementsByClassName("child").length;
?x?輸出結(jié)果為:
3?
?4.getElementsByTagName()
document.getElementdByTagName("p");
?定義和用法：
- 參數(shù)值" "返回文檔的所有元素
- 傳遞給 getElementsByTagName() 方法的字符串可以不區(qū)分大小寫
例：? ?document.getElementsByTagName("input")
?5.querySelector()
document.querySelector(CSS selectors)
?定義和用法：
- querySelector()方法僅僅返回匹配指定選擇器的第一個(gè)元素
- 多個(gè)選擇器，使用逗號(hào)隔開(kāi)，返回一個(gè)匹配的元素
實(shí)例：
假定你選擇了兩個(gè)選擇器: <h2> 和 <h3> 元素。
以下代碼將為文檔的第一個(gè) <h2> 元素添加背景顏色：
<h2>A h2 element</h2>
<h3>A h3 element</h3>
document.querySelector("h2, h3").style.backgroundColor = "red";
?6.querySelectorAll()
elementList = document.querySelectAll(selectors);
?定義和用法：
- querySelectorAll()方法返回文檔中匹配指定CSS選擇器的所有元素，返回NodeList對(duì)象
- NodeList對(duì)象表示節(jié)點(diǎn)的集合?？梢酝ㄟ^(guò)索引訪問(wèn)，索引值從0開(kāi)始
- elementList是一個(gè)靜態(tài)的NodeList類型的對(duì)象
- selectors是一個(gè)由逗號(hào)連接的包含一個(gè)或多個(gè)CSS選擇器的字符串
參考文章：文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-685316.html
HTML DOM Document 對(duì)象 | 菜鳥(niǎo)教程文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-685316.html
到了這里，關(guān)于Document 對(duì)象常用方法(getElementById、getElementsByName、getElementsByTagName....)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
