什么是DOM？

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

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

DOM，其實就是把HTML頁面上的每個標簽對應成JS的一個個對象，通過這些個對象就可以獲取/修改標簽的內容和屬性。

使用DOM

獲取元素

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

注：

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

事件

用戶對瀏覽器進行的操作，都會由瀏覽器產生對應的“事件”。JS是為了實現和用戶的交互的，它就會獲取到這些事件來和用戶進行交互。

事件的三要素：

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

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

操作元素

獲取、修改元素內容

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

注：使用innerHTML屬性來獲取和修改元素的內容，元素的內容指的是開始標簽和結束標簽之間夾著的東西（<>這是內容<>）

獲取、修改元素屬性

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

注：元素的屬性指的是元素開始標簽里寫的鍵值對！

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

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

獲取、修改樣式屬性

直接修改樣式：行內樣式

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

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

		//準備兩個樣式不同的類.light {color: black;background-color: white;} .dark {color: white;background-color: black;}//給div標簽添加class屬性，為了后續(xù)的修改樣式<div class="light">這是一大段話這是一大段話這是一大段話這是一大段話</div> //選中div標簽let div = document.querySelector('div');//通過div標簽的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>//選中父標簽let div = document.querySelector('.parent');// 創(chuàng)建一個新的 div，來添加到父標簽里let childDiv = document.createElement('div');childDiv.innerHTML = '44';//通過appendChild（）方法進行新增節(jié)點div.appendChild(childDiv);

刪除節(jié)點

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