什么是DOM？

DOM：Dodument Object Model，是文檔對象模型。

Document：文檔，指的是HTML頁面。
Object：對象，指的是JS的對象。

DOM，其實就是把HTML頁面上的每個標(biāo)簽對應(yīng)成JS的一個個對象，通過這些個對象就可以獲取/修改標(biāo)簽的內(nèi)容和屬性。

使用DOM

獲取元素

let div = document.querySelector('div');
let divs = document.querySelectorAll('div');

注：

1. document是瀏覽器提供的一個全局變量，表示當(dāng)前頁面。我們可以借助這個變量來獲取到當(dāng)前頁面上的所有元素
2. querySelector（）是用來獲取對象的方法，（）里面寫CSS的選擇器，可以通過選擇器來選中不同的元素
3. 如果querySelect（）選擇到多個元素，只能將第一個選擇到的元素賦值給變量，只能使用到第一個元素
4. querySelectAll（）可以選擇到所有元素，會把選擇到的元素都放到divs這個數(shù)組中。

事件

用戶對瀏覽器進(jìn)行的操作，都會由瀏覽器產(chǎn)生對應(yīng)的“事件”。JS是為了實現(xiàn)和用戶的交互的，它就會獲取到這些事件來和用戶進(jìn)行交互。

事件的三要素：

1. 事件源：哪個元素觸發(fā)的
2. 事件類型：點擊？選中？修改？
3. 事件處理程序：往往是一個回調(diào)函數(shù)?；卣{(diào)函數(shù)不需要程序員主動調(diào)用，它會在觸發(fā)事件時自動執(zhí)行。

		 // 讓 div 處理鼠標(biāo)點擊事件. //選中div標(biāo)簽let div = document.querySelector('div');//鼠標(biāo)點擊div標(biāo)簽div.onclick = function() {console.log('按下鼠標(biāo)');}//鼠標(biāo)在div標(biāo)簽上移動div.onmousemove = function() {// console.log('鼠標(biāo)移動');}//鼠標(biāo)進(jìn)入到div標(biāo)簽的區(qū)域div.onmouseenter = function() {console.log('鼠標(biāo)進(jìn)來了');}//鼠標(biāo)從div標(biāo)簽的區(qū)域離開div.onmouseleave = function() {console.log('鼠標(biāo)出去了');}

操作元素

獲取、修改元素內(nèi)容

		<div>hello</div>// 先選中 divlet div = document.querySelector('div');// 獲取元素里的內(nèi)容console.log(div.innerHTML);// 還可以通過給innerHTML屬性賦值, 來起到修改的作用. div.onclick = function() {// 這里賦值, 不僅僅能夠賦值文本, 還可以賦值一個 html 片段. div.innerHTML = '修改元素內(nèi)容';}

注：使用innerHTML屬性來獲取和修改元素的內(nèi)容，元素的內(nèi)容指的是開始標(biāo)簽和結(jié)束標(biāo)簽之間夾著的東西（<>這是內(nèi)容<>）

獲取、修改元素屬性

		<img src="rose.jpg" alt="這是一朵花" width="50px">//選中img標(biāo)簽let img = document.querySelector('img');//獲取到img標(biāo)簽里的屬性console.log(img.src);console.log(img.width);console.log(img.alt);//修改img標(biāo)簽的屬性img.onclick = function() {img.src = 'img/female.png';}

注：元素的屬性指的是元素開始標(biāo)簽里寫的鍵值對！

獲取、修改表單元素屬性：input

		<input type="button" value="播放">//選中input標(biāo)簽var btn = document.querySelector('input');//獲取input標(biāo)簽的屬性console.log(btn.value);//修改input標(biāo)簽的屬性btn.onclick = function () {if (btn.value === '播放') {btn.value = '暫停';} else {btn.value = '播放';}}

獲取、修改樣式屬性

直接修改樣式：行內(nèi)樣式

		<div style="font-size: 20px; font-weight: 700;">hello</div>//選中div標(biāo)簽var div = document.querySelector('div');//直接通過內(nèi)聯(lián)屬性來修改樣式div.onclick = function () {//得到原來的值var curFontSize = parseInt(div.style.fontSize);curFontSize += 10;//設(shè)置新的值div.style.fontSize = curFontSize + "px";}

通過修改class屬性來修改樣式

		//準(zhǔn)備兩個樣式不同的類.light {color: black;background-color: white;} .dark {color: white;background-color: black;}//給div標(biāo)簽添加class屬性，為了后續(xù)的修改樣式<div class="light">這是一大段話這是一大段話這是一大段話這是一大段話</div> //選中div標(biāo)簽let div = document.querySelector('div');//通過div標(biāo)簽的class屬性來修改樣式div.onclick = function() {// 通過 className 屬性獲取到 html 元素中的 class 屬性if (div.className == 'dark') {div.className = 'light';} else if (div.className == 'light') {div.className = 'dark';} else {alert('class 錯誤!');}}

新增節(jié)點

		<div class="parent"><div>11</div><div>22</div><div>33</div></div>//選中父標(biāo)簽let div = document.querySelector('.parent');// 創(chuàng)建一個新的 div，來添加到父標(biāo)簽里let childDiv = document.createElement('div');childDiv.innerHTML = '44';//通過appendChild（）方法進(jìn)行新增節(jié)點div.appendChild(childDiv);

刪除節(jié)點

		<div class="parent"><div>11</div><div>22</div>//設(shè)置class屬性 方便刪除<div class="toDelete">33</div></div>//選中父標(biāo)簽let div = document.querySelector('.parent');//選中要刪除的子標(biāo)簽let toDelete = document.querySelector('.toDelete');//刪除子標(biāo)簽div.removeChild(toDelete);