DOM 文檔對(duì)象模型，就是當(dāng)前網(wǎng)頁(yè)里面的所有內(nèi)容。
因?yàn)榫W(wǎng)頁(yè)是在瀏覽器中顯示的，整個(gè)瀏覽器是BOM，所以DOM其實(shí)是BOM的一部分
BOM 就是 window對(duì)象? ? ? DOM 就是 document對(duì)象
（一）使用DOM獲取網(wǎng)頁(yè)元素
1.如果該網(wǎng)頁(yè)元素，在一個(gè)網(wǎng)頁(yè)中只會(huì)出現(xiàn)一次，通過(guò)document可以直接獲取
? ? ? ? document.title = "好好學(xué)習(xí)DOM"
? ? ? ? document.body.style.backgroundColor = "lightblue"
?2.如果網(wǎng)頁(yè)元素，在網(wǎng)頁(yè)中會(huì)經(jīng)常使用，就需用通過(guò)特定的方法來(lái)獲取
? ? ? ? getElementsByTagName()方法，根據(jù)標(biāo)簽的名稱(chēng)獲取所有該標(biāo)簽
? ? ? ? let hs = document.getElementsByTagName('h2')
? ? ? ? hs[0].innerText = '天津'
? ? ? ? hs[1].innerText = '東京'
? ? ? ? getElementById()方法，根據(jù)標(biāo)簽的id屬性名稱(chēng)，獲取對(duì)應(yīng)的標(biāo)簽
? ? ? ? // 如果id屬性值不唯一，只獲取第一個(gè)
? ? ? ? let sh = document.getElementById('sh')
? ? ? ? sh.innerText = '鐵嶺'
? ? ? ? getElementsByName()方法，根據(jù)標(biāo)簽的name屬性值，獲取所有對(duì)應(yīng)的標(biāo)簽
? ? ? ? let red = document.getElementsByName('red')
? ? ? ? for(let i=0;i<red.length;i++){
? ? ? ? ? ? red[i].style.color="red"
? ? ? ? }
? ? ? ? getElementsByClassName()方法，根據(jù)標(biāo)簽的class屬性值，獲取所有對(duì)應(yīng)的標(biāo)簽
? ? ? ? let blue = document.getElementsByClassName('blue')
? ? ? ? for(let i=0;i<blue.length;i++){
? ? ? ? ? ? blue[i].style.backgroundColor = 'blue'
? ? ? ? }
封裝DOM獲取
function$(id){
????????????returndocument.getElementById(id)
}
（1）querySelector()方法，根據(jù)選擇器規(guī)則，獲取對(duì)應(yīng)的第一個(gè)元素
? ? ? ? 如果選擇器的返回的結(jié)果不止一個(gè)，只返回第一個(gè)。
? ? ? ? let c = document.querySelector('.a .b .c')
? ? ? ? c.innerText = '蘋(píng)果'
? （2）querySelectorAll()方法，根據(jù)選擇器規(guī)則，獲取對(duì)應(yīng)的所有元素
????????注意：querySelectorAll()方法，返回的是集合對(duì)象，不是數(shù)組對(duì)象?？梢岳谜归_(kāi)運(yùn)算? ? ? ? ? 符，將集合對(duì)象轉(zhuǎn)為數(shù)組對(duì)象。
? ? ? ? let cs = document.querySelectorAll('.c')
? ? ? ? cs.forEach(r=>{
? ? ? ? ? ? r.style.backgroundColor = 'pink'
? ? ? ? })
（二）操作DOM元素的內(nèi)容和樣式
操作DOM的樣式，有多種方式：
1.通過(guò)style屬性直接設(shè)置? ? ?如果樣式名稱(chēng)是多個(gè)單詞的組合，需要使用小駝峰命名規(guī)范
2.通過(guò)className屬性設(shè)置類(lèi)選擇器
3.也可以通過(guò)classList屬性添加多個(gè)類(lèi)選擇器
操作DOM的內(nèi)容：
1.innerText屬性，用于獲取 和 操作 DOM的文本內(nèi)容。
innerText屬性設(shè)置內(nèi)容時(shí)，不能識(shí)別html標(biāo)簽，會(huì)將html標(biāo)簽以文本的形式呈現(xiàn)
2.innerHTML屬性，用于獲取 和 操作 DOM的HTML內(nèi)容。
innerHTML屬性設(shè)置內(nèi)容時(shí)，能夠識(shí)別html標(biāo)簽
<div class="a"></div>
<div class="b"></div>
<div id="c">我正在學(xué)習(xí)JS-DOM</div>
<div id="d">我正在學(xué)習(xí)HTML</div>
<button id="size">添加大小</button>
<button id="color">添加顏色</button>
<button id="radius">添加圓角</button>
<button id="bgcolor">添加背景</button>
<br><br>
<button id="size2">移除大小</button>
<button id="color2">移除顏色</button>
<button id="radius2">移除圓角</button>
<button id="bgcolor2">移除背景</button>
<div id="e">我正在學(xué)習(xí)JavaScript</div
?獲取div#e元素
? ? let e = document.querySelector('#e')
? ? // 通過(guò)classList屬性，給元素添加多個(gè)類(lèi)選擇器
? ? //獲取#size按鈕，并給按鈕注冊(cè)一個(gè)點(diǎn)擊事件
? ? document.querySelector('#size').onclick = function(){
? ? ? ? // 通過(guò)add方法，添加類(lèi)選擇器
? ? ? ? e.classList.add('size')
? ? }
? ? 顏色按鈕點(diǎn)擊事件
? ? document.querySelector('#color').onclick = function(){
? ? ? ? e.classList.add('color')
? ? }
? ? 圓角按鈕點(diǎn)擊事件
? ? document.querySelector('#radius').onclick = function(){
? ? ? ? e.classList.add('radius')
? ? }
? ? 背景按鈕點(diǎn)擊事件
? ? document.querySelector('#bgcolor').onclick = function(){
? ? ? ? e.classList.add('bgcolor')
? ? }
? ? 下面是移除樣式
? ? document.querySelector('#size2').onclick = function(){
? ? ? ? 通過(guò)remove方法，移除類(lèi)選擇器
? ? ? ? e.classList.remove('size')
? ? }
顏色移除事件
?document.querySelector('#color2').onclick = function(){
? ? ? ? e.classList.remove('color')
? ? }
圓角移除事件
? ? document.querySelector('#radius2').onclick = function(){
? ? ? ? e.classList.remove('radius')
? ? }
背景顏色移除事件
? ? document.querySelector('#bgcolor2').onclick = function(){
? ? ? ? e.classList.remove('bgcolor')
? ? }
（三）操作DOM的屬性
獲取和設(shè)置標(biāo)簽自帶的屬性(原生屬性)，直接點(diǎn)
let src = img.src //src是圖片標(biāo)簽的原生屬性
獲取 和 設(shè)置 標(biāo)簽自定義的屬性，需要通過(guò)getAttribute()和setAttribute()方法：
setAttribute()方法，設(shè)置元素的屬性值，需要傳兩個(gè)參數(shù)（屬性名和屬性值）
getAttribute()方法，獲取元素的屬性值，只需要傳一個(gè)參數(shù)（屬性名）
（四）創(chuàng)建和刪除DOM屬性
createElement()方法，用于創(chuàng)建DOM元素
appendChild()方法，用于在當(dāng)前DOM元素中添加子元素
刪除元素有兩種寫(xiě)法：
1.自刪 remove()方法，是元素刪除自己
2.通過(guò)父級(jí)刪除子級(jí) removeChild()方法，是刪除元素里面指定的子元素
補(bǔ)充1：onclick是點(diǎn)擊事件，on表示當(dāng)，click表示點(diǎn)擊
補(bǔ)充2：parentElement和parentNode屬性，返回父級(jí)元素
