學(xué)習(xí)JavaScript你辣，少不了學(xué)習(xí)JavaScript中的DOM操作旋廷，本系列文章將會(huì)從DOM簡(jiǎn)介開始急前，講解DOM的相關(guān)操作京郑，其中本文重點(diǎn)講解DOM的訪問方式宅广。
DOM簡(jiǎn)介
JavaScript的組成有三部分：
1.ECMAScript --- 核心語法；
2.DOM --- （瀏覽器對(duì)象模型）些举，可以對(duì)瀏覽器窗口進(jìn)行訪問和操作跟狱。
3.BOM --- （文檔對(duì)象模型），是 HTML 和 XML 的應(yīng)用程序接口（API）户魏。
DOM是Document Object Model的簡(jiǎn)稱驶臊，是網(wǎng)站具有交互性的重要組成部分。它是一個(gè)接口叼丑，允許編程語言操作網(wǎng)站的內(nèi)容资铡、結(jié)構(gòu)和樣式。
在前端開發(fā)中幢码，少不了通過JavaScript在網(wǎng)頁中添加交互特效笤休，例如下拉菜單、導(dǎo)航菜單切換症副、輪播圖效果等等店雅，這些交互特效都是需要通過js來操作網(wǎng)頁中的標(biāo)簽或者樣式政基，而如何來控制網(wǎng)頁中的標(biāo)簽，如何通過js來添加樣式闹啦，這些方法都是在DOM中提供沮明。
總結(jié)：DOM可以理解為一個(gè)對(duì)網(wǎng)頁文檔進(jìn)行控制的說明書，里面有各種方法和屬性窍奋。
訪問DOM元素
在對(duì)網(wǎng)頁中的元素進(jìn)行操作中荐健，第一個(gè)事情就是先獲取到這些元素，這個(gè)過程就叫DOM元素訪問琳袄。在平時(shí)的開發(fā)中江场，有5中常用的訪問DOM元素的方法。
1.getElementById() --- 通過ID訪問窖逗；
2.getElementsByClassName() --- 通過類名訪問址否；
3.getElementsByTagName() --- 通過標(biāo)簽名稱訪問；
4.querySelector() --- 通過CSS選擇器訪問（單個(gè)）碎紊；
5.querySelectorAll() --- 通過CSS選擇器訪問 （所有）佑附；
接下來我們將每個(gè)方法進(jìn)行講解。
getElementById() 通過ID訪問
在DOM中訪問仗考，通過ID來訪問的方式是最為常用的方法之一音同，通過它唯一的ID來訪問到單個(gè)元素：
<body>
<div id="box">IDdiv box</div>
<div class="box">Classdiv box</div>
<div class="box">Classdiv box</div>
<p class="p">p element</p>
<p class="p">p element</p>
<p id="third-p">p element</p>
<script>
var oBox = document.getElementById('box');
console.log(oBox); //=><div id="box">div box</div>
oBox.style.background = 'red';
</script>
</body>
var oBox = document.getElementById(‘box’);
document對(duì)象是一個(gè)內(nèi)置對(duì)象，它有許多屬性和方法秃嗜，可以用來訪問和修改Web頁面权均。可以認(rèn)為痪寻，DOM操作相關(guān)的方法和屬性螺句，都在document對(duì)象中虽惭。
通過該行代碼橡类，可以將第一個(gè)div獲取到，它身上有名稱為box的id：
<div id="box">IDdiv box</div>
同時(shí)芽唇，可以在控制臺(tái)通過 console.log( oBox );進(jìn)行輸出結(jié)果驗(yàn)證顾画。
也可以直接對(duì)訪問到的元素進(jìn)行樣式控制，觀察樣式進(jìn)行驗(yàn)證匆笤。
oBox.style.background = 'red';
結(jié)果就是div的背景顏色為紅色研侣。
getElementsByClassName() 通過類名訪問
通過類名訪問文檔中的元素，可以獲取到1個(gè)或多個(gè)元素炮捧，因?yàn)轭惷辉偈俏ㄒ皇睿虼?code>getElementsByClassName() 獲取到的是一個(gè)類數(shù)組。
var oDivs = document.getElementsByClassName('box');
該行代碼咆课，可以獲取到文檔中的兩個(gè)div末誓；
<div class="box">Classdiv box</div>
<div class="box">Classdiv box</div>
通過控制臺(tái)輸出 console.log( oDivs );扯俱，可以看到如下結(jié)果：
HTMLCollection(2) [div.box, div.box]
HTMLCollection 是一個(gè)類數(shù)組，所以它不能直接進(jìn)行控制喇澡，例如像上面那樣修改樣式迅栅，是直接修改不了的。
oDivs.style.background = 'red';
結(jié)果就是直接報(bào)錯(cuò)：
Uncaught TypeError: Cannot set property 'background' of undefined at demo.html:21
在js中規(guī)定晴玖，類數(shù)組可以使用[]或者item()通過索引值進(jìn)行訪問读存，例如:oDivs[0] 表示訪問第一個(gè)div元素。
結(jié)果是：
<div class="box">Classdiv box</div>
也可以通過該方式進(jìn)行修改樣式以及其他操作呕屎。
oDivs[0].style.background = 'blue';
通常我們使用class訪問元素時(shí)让簿，希望選中文檔中的所有指定類的元素，而不像上圖一樣僅僅是其中的一個(gè)榨惰。剛才也提到了getElementsByClassName()方法返回的是一個(gè)HTMLCollection拜英，是一個(gè)類數(shù)組，那么我們可以通過for循環(huán)來遍歷數(shù)組中的每一項(xiàng)琅催，讓我們不再只選擇一個(gè)元素：
for(var i=0; i<oDivs.length; i++){
oDivs[i].style.background = 'blue'
}
getElementsByTagName() 通過標(biāo)簽名稱訪問
通過標(biāo)簽名稱訪問的方式其實(shí)跟上面的 getElementsByClassName() 是差不多的居凶，獲取到的也是一個(gè)類數(shù)組，因此單個(gè)的訪問方式也是一樣藤抡。
var oDemos = document.getElementsByTagName('div');
通過 console.log(oDemos);輸出看到的結(jié)果：
HTMLCollection(3) [div#box, div.box, div.box, box: div#box]
通過CSS選擇器訪問
querySelector()
如果是有jQuery基礎(chǔ)的小伙伴侠碧，肯定會(huì)對(duì)jQuery強(qiáng)大的DOM查找系統(tǒng)不陌生。
例如：
$('#box');
$('.box');
$('div');
現(xiàn)在缠黍，不用羨慕j(luò)Query了弄兜，在JavaScript中也可以使用querySelector()和querySelectorAll()方法執(zhí)行類似jQuery中選擇DOM元素的方法。
如果要訪問單個(gè)元素瓷式，可以使用querySelector()方法替饿。例如：
var oEle = document.querySelector('#box');
console.log(oEle);
結(jié)果就是獲取到第一個(gè)div；<div id="box">IDdiv box</div>
而如果贸典，通過.box 選擇器來寫视卢，網(wǎng)頁中有兩個(gè)符合，但還是只返回第一個(gè).box標(biāo)簽廊驼。
var oEle = document.querySelector('.box');
console.log(oEle);
結(jié)果是：<div class="box">Classdiv box</div>
也可以通過：oEle.style.background = 'green'; 進(jìn)行驗(yàn)證据过；
querySelectorALL()
querySelectorAll()方法類似于getElementsByClassName()方法，只不過其返回的是一個(gè)NodeList的類數(shù)組妒挎，也是一個(gè)隊(duì)列绳锅。同樣的，不能直接進(jìn)行控制酝掩，需要使用類似于forEach()方法對(duì)類數(shù)組進(jìn)行遍歷：
var oPs = document.querySelectorAll('.p');
console.log(oPs);
結(jié)果是：NodeList(2) [p.p, p.p]
對(duì)獲取到的進(jìn)行單個(gè)控制鳞芙，可以使用[]按索引值進(jìn)行控制，獲取通過 for 循環(huán)進(jìn)行群體控制。
oPs[0].style.background = 'red';
總結(jié)
本文主要是對(duì)DOM進(jìn)行了結(jié)束原朝，以及講解了DOM訪問標(biāo)簽的幾個(gè)方法闯割，分部是，通過ID訪問竿拆，通過類名訪問宙拉，通過標(biāo)簽名稱訪問，以及通過CSS選擇器進(jìn)行訪問丙笋。
