---

一、WebAPI背景知識

1. 什么是WebAPI？

前面學(xué)習(xí)的 JS 分成三個大的部分：

• ECMAScript: 基礎(chǔ)語法部分
• DOM API: 操作頁面結(jié)構(gòu)
• BOM API: 操作瀏覽器

WebAPI 就包含了 DOM + BOM，這個是 W3C 組織規(guī)定的. (和制定 ECMAScript 標(biāo)準(zhǔn)的大佬們不是一伙人).

前面學(xué)的 JS 基礎(chǔ)語法主要學(xué)的是 ECMAScript，這讓我們建立基本的編程思維. 相當(dāng)于練武需要先扎馬步，但是真正來寫一個更加復(fù)雜的有交互式的頁面，還需要 WebAPI 的支持，相當(dāng)于各種招式。下面我們重點講解的是DOM API。

---

2. 什么是API？

API 是一個更廣義的概念，而 WebAPI 是一個更具體的概念，特指 DOM + BOM，所謂的 API 本質(zhì)上就是一些現(xiàn)成的函數(shù)/對象，讓程序猿拿來就用，方便開發(fā)。

相當(dāng)于一個工具箱，只不過程序猿用的工具箱數(shù)目繁多，功能復(fù)雜

💕 API參考文檔

https://developer.mozilla.org/zh-CN/docs/Web/API

---

二、DOM基本概念

💕 什么是DOM？

DOM 全稱為 Document Object Model

W3C 標(biāo)準(zhǔn)給我們提供了一系列的函數(shù), 讓我們可以操作:

• 網(wǎng)頁內(nèi)容
• 網(wǎng)頁結(jié)構(gòu)
• 網(wǎng)頁樣式

💕 DOM樹

一個頁面的結(jié)構(gòu)是一個樹形結(jié)構(gòu), 稱為 DOM 樹。

樹形結(jié)構(gòu)在數(shù)據(jù)結(jié)構(gòu)階段我們已經(jīng)學(xué)過了，可以簡單理解成類似于 “家譜” 這種結(jié)構(gòu)，頁面結(jié)構(gòu)形如：

DOM 樹結(jié)構(gòu)形如：

重要概念:

• 文檔: 一個頁面就是一個 文檔, 使用 document 表示.
• 元素: 頁面中所有的標(biāo)簽都稱為 元素. 使用 element 表示.
• 節(jié)點: 網(wǎng)頁中所有的內(nèi)容都可以稱為 節(jié)點(標(biāo)簽節(jié)點，注釋節(jié)點，文本節(jié)點，屬性節(jié)點等)，使用 node 表示。

這些文檔等概念在 JS 代碼中就對應(yīng)一個個的對象，所以才叫 “文檔對象模型”。

---

三、獲取元素

這部分工作類似于 CSS 選擇器 的功能

💕 querySelector

這個是 HTML5 新增的, IE9 及以上版本才能使用

前面的幾種方式獲取元素的時候都比較麻煩，而使用 querySelector 能夠完全復(fù)用前面學(xué)過的 CSS 選擇器知識，達(dá)到更快捷更精準(zhǔn)的方式獲取到元素對象。

var element = document.querySelector(selectors);

• selectors 包含一個或多個要匹配的選擇器的 DOM字符串 DOMString 。 該字符串必須是有效的CSS選擇器字符串；如果不是，則引發(fā) SYNTAX_ERR 異常
• 表示文檔中與指定的一組CSS選擇器匹配的第一個元素的 html元素 Element 對象.
• 如果您需要與指定選擇器匹配的所有元素的列表，則應(yīng)該使用 querySelectorAll()
• 可以在任何元素上調(diào)用，不僅僅是 document。 調(diào)用這個方法的元素將作為本次查找的根元素

正因為參數(shù)是選擇器, 所以一定要通過特殊符號指定是哪種選擇器：

<script>console.log(document.querySelector('.box1'))console.log(document.querySelector('h3').querySelector('span').querySelector('input'))
</script>

使用document會選擇到整個頁面。

💕 querySelectorAll

console.log(document.querySelectorAll('div'))

---

三、事件初識

事件是發(fā)生在你正在編程的系統(tǒng)中的事情——當(dāng)事件發(fā)生時，系統(tǒng)產(chǎn)生（或“觸發(fā)”）某種信號，并提供一種機制，當(dāng)事件發(fā)生時，可以自動采取某種行動（即運行一些代碼）。事件是在瀏覽器窗口內(nèi)觸發(fā)的，并傾向于附加到駐留在其中的特定項目。這可能是一個單一的元素，一組元素，當(dāng)前標(biāo)簽中加載的 HTML 文檔，或整個瀏覽器窗口。有許多不同類型的事件可以發(fā)生。

💕 基本概念

JS 要構(gòu)建動態(tài)頁面, 就需要感知到用戶的行為。

用戶對于頁面的一些操作(點擊, 選擇, 修改等) 操作都會在瀏覽器中產(chǎn)生一個個事件, 被 JS 獲取到, 從而進行更復(fù)雜的交互操作。

瀏覽器就是一個哨兵, 在偵查敵情(用戶行為). 一旦用戶有反應(yīng)(觸發(fā)具體動作), 哨兵就會點燃烽火臺的狼煙(事件), 后方就可以根據(jù)狼煙來決定下一步的對敵策略。

💕 事件三要素

1. 事件源: 哪個元素觸發(fā)的
2. 事件類型: 是點擊, 選中, 還是修改?
3. 事件處理程序: 進一步如何處理. 往往是一個回調(diào)函數(shù)

---

1. 點擊事件

下面我們來看一個簡單的點擊事件：

<script>// 事件源let button = document.querySelector('input')// 1. 綁定事件類型(點擊事件) 2. 函數(shù)設(shè)定了事件處理程序button.onclick = function() {alert("hello, 你好吖")}
</script>

---

2. 鍵盤事件

• onkeydown 事件：當(dāng)用戶按下鍵盤上的任何鍵時觸發(fā)，包括字符鍵、功能鍵和控制鍵。
• onkeypress 事件：當(dāng)用戶按下字符鍵（例如字母、數(shù)字、符號鍵）時觸發(fā)。
• onkeyup事件：當(dāng)用戶釋放鍵盤上的鍵時觸發(fā)，無論是字符鍵、功能鍵還是控制鍵。

---

💕 onkeydown 事件

示例一：

<input type="text">
<script>// 事件源let input = document.querySelector('input')input.onkeydown = function() {console.log("鍵盤正在按下")}
</script>

當(dāng)我們按鍵盤的過程中會有如下效果：

event—> 事件處理程序通常會接收一個事件對象（通常命名為 event 或 e），該對象包含與觸發(fā)事件相關(guān)的信息和屬性。事件對象提供了有關(guān)事件的詳細(xì)信息，使開發(fā)人員能夠?qū)κ录M行更精細(xì)的控制和響應(yīng)。

String.fromCharCode() 是 JavaScript 中的一個方法，用于將一個或多個字符編碼的 Unicode 值轉(zhuǎn)換為相應(yīng)的字符串。這個方法可以接受一個或多個 Unicode 值作為參數(shù)，并返回由這些 Unicode 值構(gòu)成的字符串。

示例二：

<input type="text">
<script>let input = document.querySelector('input')input.onkeydown = function(event) {let a = event.keyCodelet b = String.fromCharCode(a)console.log(b)}
</script>

---

💕 onkeypress 事件

當(dāng)我們使用onkeydown事件時，發(fā)現(xiàn)無論按下的字母是大寫還是小寫，他輸出在控制臺上時都是大寫。使用onkeypress可以有效解決這個問題。

<input type="text">
<script>let input = document.querySelector('input')input.onkeypress = function(event) {let a = event.keyCodelet b = String.fromCharCode(a)console.log(b)}
</script>

---

💕 onkeyup 事件

onkeyup 事件是在鍵盤按下去彈起來的時候才會觸發(fā)的事件。

<input type="text" onkeyup="myOnkeyUp()">
<script>let input = document.querySelector('input')input.onkeypress = function(event) {let a = event.keyCodelet b = String.fromCharCode(a)console.log(b)}function myOnkeyUp() {console.log("按鍵被抬起")}
</script>

但是有時候我們輸入的是特殊鍵的時候，將不會打印在控制臺上，比如說：shift鍵、alt鍵等。

可以看到控制臺并沒有打印。那是因為這些鍵需要特殊處理：

例如：

<input type="text" onkeyup="myOnkeyUp()">
<script>let input = document.querySelector('input')input.onkeydown = function(event) {// 如果按鍵按下的是shift此時彈出一個彈窗，提示shift被按下if(event.shiftKey) {alert("shift鍵被按下")}if(event.altKey) {alert("alt鍵被按下")}}function myOnkeyUp() {console.log("按鍵被抬起")}
</script>

---

四、操作元素

1. 獲取/修改元素內(nèi)容

💕 innerText

Element.innerText 屬性表示一個節(jié)點及其后代的“渲染”文本內(nèi)容

<body><div><span>hello world</span><span>hello world</span></div>
</body>
<script>var div = document.querySelector('div')// 讀取 div 內(nèi)部內(nèi)容console.log(div.innerText)// 修改 div 內(nèi)部內(nèi)容, 界面上就會同步修改div.innerText = 'hello js <span>hello js</span>'
</script>

💕 innerHTML

Element.innerHTML 屬性設(shè)置或獲取HTML語法表示的元素的后代

<body><span>這是一個span標(biāo)簽</span>
</body>
<script>// 獲取元素內(nèi)容let span = document.querySelector('span')console.log(span.innerHTML)// 修改span.innerHTML = "我在修改元素內(nèi)容"// 修改頁面結(jié)構(gòu)span.innerHTML = "<h3>這是h3標(biāo)簽</h3>"
</script>

---

2. 獲取/修改元素屬性

可以通過 Element 對象的屬性來直接修改, 就能影響到頁面顯示效果。

<body><img src="../百度logo圖標(biāo).png" alt="圖片加載失敗" title="這是一個提示圖片" width="100px" height="100px">
</body>
<script>let img = document.querySelector('img')console.dir(img)img.title = "這是已經(jīng)修改完畢的title"img.onclick = function() {alert("你已經(jīng)點擊了這個圖片")}
</script>

---

3. 獲取/修改表單元素屬性

表單 (主要是指 input 標(biāo)簽)的以下屬性都可以通過 DOM 來修改：

• value: input 的值.
• disabled: 禁用
• checked: 復(fù)選框會使用
• selected: 下拉框會使用
• type: input 的類型(文本, 密碼, 按鈕, 文件等)

💕 實現(xiàn)播放按鈕

<body><input class="btn" type="button" value="播放" onclick="Onclick()">
</body>
<script>let btn = document.querySelector('.btn')// 當(dāng)按鈕的 value 變成 播放時, 此時將value按鈕變成暫停。否則的話變成播放function Onclick() {if(btn.value == '播放')btn.value = '暫停'elsebtn.value = '播放'}
</script>

---

💕 計數(shù)器實現(xiàn)：點擊計數(shù)

使用一個輸入框輸入初始值(整數(shù)). 每次點擊按鈕, 值 + 1或者 值 -1

<body><input class="input" type="text" value="0"><input class="Add" type="button" value="+1" onclick="Add()"><input class="Min" type="button" value="-1" onclick="Min()">
</body>
<script>function Add() {let input_element = document.querySelector('.input')input_element.value = parseInt(input_element.value) + 1}function Min() {let input_element = document.querySelector('.input')input_element.value = parseInt(input_element.value) - 1}
</script>

---

💕 復(fù)選框的選中效果

代碼示例：全選/取消全選按鈕

1. 點擊全選按鈕，則選中所有選項
2. 只要某個選項取消，則自動取消全選按鈕的勾選狀態(tài)

<body><input class="all" type="checkbox" onclick="SelectAll()">選中全部<br><input class="select" type="checkbox">貂蟬<br><input class="select" type="checkbox">小喬<br><input class="select" type="checkbox">安琪拉<br><input class="select" type="checkbox">妲己<br>
</body>
<script>let all = document.querySelector('.all')let select = document.querySelectorAll('.select')// 當(dāng)選中 “全部選中” 按鈕時, 其他所有選項都將被選中function SelectAll() {for(i = 0; i < select.length; i++){select[i].checked = all.checked}}// 當(dāng)其他選項中有任意一個選項沒有被選中時, “全部選中”選項也不被勾選for(i = 0; i < select.length; i++){select[i].onclick = function() {all.checked = IsSelectAll(select)}}function IsSelectAll(select) {for(i = 0; i < select.length; i++){if(select[i].checked == false)return false}return true}
</script>

---

4. 獲取/修改樣式屬性

💕 行內(nèi)樣式操作

“行內(nèi)樣式”, 通過 style 直接在標(biāo)簽上指定的樣式。優(yōu)先級很高，適用于改的樣式少的情況。

示例： 點擊文字則放大字體

<body><div style="font-size: 10px;" onclick="changeSize()">哈哈哈</div>
</body>
<script>function changeSize() {let element = document.querySelector('div')console.log(element.style)let size = parseInt(element.style.fontSize) + 10// element.style.cssText = "font-size:" + size + "px"element.style.fontSize = size + "px"}
</script>

---

💕 類名樣式操作

修改元素的 CSS 類名，適用于要修改的樣式很多的情況，由于 class 是 JS 的保留字, 所以名字叫做 className

示例： 開啟夜間模式

• 點擊頁面切換到夜間模式(背景變成黑色)
• 再次點擊恢復(fù)日間模式(背景變成白色)

代碼實現(xiàn)：

<style>.light {background-color: aliceblue;color: black;width: 100%;height: 100%;}body, html {width: 100%;height: 100%;}.dark {background-color: black;color: white;width: 100%;height: 100%;}
</style>
<div class="light" onclick="changeStyle()">這是一段話<br>這是一段話<br>這是一段話<br>這是一段話<br>這是一段話<br>這是一段話<br>
</div>
<script>function changeStyle() {let element = document.querySelector('div')// 如果當(dāng)前的樣式為白天模式, 就切換成黑夜模式, 否則就將當(dāng)前樣式調(diào)整成白天模式if(element.className == "light") {element.className = "dark"} else {element.className = "light"}}
</script>

---

五、操作節(jié)點

💕 什么是節(jié)點？

"節(jié)點"通常指的是文檔對象模型（DOM）中的元素或?qū)ο?。DOM是表示HTML和XML文檔的樹狀結(jié)構(gòu)，它將文檔中的每個部分（如元素、屬性、文本等）表示為對象，開發(fā)者可以使用JavaScript來訪問、操作和修改這些對象，從而實現(xiàn)對文檔的動態(tài)交互和修改。

1. 新增節(jié)點

分成兩個步驟：

1. 創(chuàng)建元素節(jié)點
2. 把元素節(jié)點插入到 dom 樹中

💕 創(chuàng)建元素節(jié)點

使用 createElement 方法來創(chuàng)建一個元素，options 參數(shù)暫不關(guān)注。

這是元素節(jié)點的創(chuàng)建方式，當(dāng)然我們還可以創(chuàng)建別的：

• createTextNode 創(chuàng)建文本節(jié)點
• createComment 創(chuàng)建注釋節(jié)點
• createAttribute 創(chuàng)建屬性節(jié)點

雖然創(chuàng)建出新的 div 了, 但是我們新創(chuàng)建的節(jié)點并沒有加入到DOM 樹中。

---

💕 插入節(jié)點到 dom 樹中

1. 使用 appendChild 將節(jié)點插入到指定節(jié)點的最后一個孩子之后
   

例如：

<div><p class="p1">這是一個p標(biāo)簽1</p><p class="p2">這是一個p標(biāo)簽2</p><p class="p3">這是一個p標(biāo)簽3</p></div>

插入到指定節(jié)點的最后一個孩子之后：

<script>let element = document.createElement('h3')element.innerHTML = "這是我創(chuàng)建的一個新節(jié)點"let div = document.querySelector('div')div.appendChild(element)
</script>

2. 使用 insertBefore 將節(jié)點插入到指定節(jié)點之前

• insertedNode 被插入節(jié)點(newNode)
• parentNode 新插入節(jié)點的父節(jié)點
• newNode 用于插入的節(jié)點
• newNode將要插在referenceNode這個節(jié)點之前

注意：

如果 referenceNode 為 null 則 newNode 將被插入到子節(jié)點的末尾，referenceNode 引用節(jié)點不是可選參數(shù)。

例如：

<div><p class="p1">這是一個p標(biāo)簽1</p><p class="p2">這是一個p標(biāo)簽2</p><p class="p3">這是一個p標(biāo)簽3</p>
</div>

<script>let div = document.querySelector('div')let new_node = document.createElement('p')new_node.innerHTML = "這是一個新p標(biāo)簽"div.insertBefore(new_node, document.querySelector('.p1'))
</script>

如果我們將insertBefore中的第一個參數(shù)referenceNode設(shè)置為空時，新增的元素會被插在子節(jié)點的末尾。

div.insertBefore(new_node, null)

注意：

• 如果針對一個節(jié)點插入兩次, 則只有最后一次生效(相當(dāng)于把元素移動了)
• 一旦一個節(jié)點插入完畢, 再針對剛剛的節(jié)點對象進行修改, 能夠同步影響到 DOM 樹中的內(nèi)容

---

2. 刪除節(jié)點

使用 removeChild 刪除子節(jié)點

• child 為待刪除節(jié)點
• element 為 child 的父節(jié)點
• 返回值為該被刪除節(jié)點
• 被刪除節(jié)點只是從 dom 樹被刪除了, 但是仍然在內(nèi)存中, 可以隨時加入到 dom 樹的其他位
  置.
• 如果上例中的 child節(jié)點 不是 element 節(jié)點的子節(jié)點,則該方法會拋出異常

刪掉上面的p2標(biāo)簽：

<script>let div = document.querySelector('div')div.removeChild(document.querySelector('.p2'))
</script>

---

六、實戰(zhàn)案例

1. 猜數(shù)字

💕 預(yù)期效果：

💕 代碼實現(xiàn)：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.false {color: red;}.true {color: green;}</style>
</head>
<body><input class="reset_button" type="button" value="重新開始一局游戲" onclick="reSet()"><br>請輸入要猜的數(shù)字: <input class="to_guess_num" type="text" value="0"><input type="button" value="猜" onclick="Guess()"><br>已經(jīng)猜的次數(shù): <span class="has_guess_num">0</span><br>結(jié)果: <span class="result"></span>
</body>
<script>// 輸入的數(shù)字let to_guess_num_element = document.querySelector('.to_guess_num')console.dir(to_guess_num_element)// 已經(jīng)猜的次數(shù)let has_guess_num_element = document.querySelector('.has_guess_num')console.dir(has_guess_num_element)// 猜測的結(jié)果let result_element = document.querySelector('.result')console.dir(result_element)function reSet() {to_guess_num_element.value = 0has_guess_num_element.innerHTML = 0result_element.innerHTML = ""}// 生成隨機數(shù)作為我們要猜的數(shù)字let num = Math.floor(Math.random()*100) + 1console.log(num)function Guess() {has_guess_num_element.innerHTML = parseInt(has_guess_num_element.innerHTML) + 1if(parseInt(to_guess_num_element.value) < num){result_element.innerHTML = "猜小了"result_element.className = false} else if(parseInt(to_guess_num_element.value) > num) {result_element.innerHTML = "猜大了"result_element.className = false} else {result_element.innerHTML = "猜中了"result_element.className = true}}
</script>
</html>

---

2. 表白墻

💕 預(yù)期效果：

💕 代碼實現(xiàn)：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0px;padding: 0px;}.container {width: 400px;margin: 0 auto;}h1 {text-align: center;margin-bottom: 40px;margin-top: 20px;}p {text-align: center;color: gray;line-height: 63px;}.div1 {display: flex;justify-content: center;align-items: center;}.divContent {display: flex;justify-content: center;align-items: center;margin-top: 20px;color: pink;}.edit {margin-bottom: 20px;width: 200px;height: 30px;}span {width: 50px;margin-bottom: 20px;}.submit {background-color: rgb(255, 157, 0);color: white;width: 260px;height: 30px;border: none;border-radius: 5px;}.submit:active{background-color: gray;}</style>
</head>
<body><div class="container"><h1>表白墻</h1><p>輸入相關(guān)信息, 點擊提交數(shù)據(jù)將會展示在表格中</p><div class="div1"><span>誰: </span><input type="text" class="edit"></div><div class="div1"><span>對誰: </span><input type="text" class="edit"></div><div class="div1"><span>說: </span><input type="text" class="edit"></div><div class="div1"><input type="button" value="提交" class="submit" onclick="Submit()"></div></div>
</body>
<script>function Submit() {let edits = document.querySelectorAll('.edit')console.dir(edits)let from = edits[0].valuelet to = edits[1].valuelet message = edits[2].valueif(from == '' || to == '' || message == '')returnconsole.log(from + " " + to + " " + message)let div = document.createElement('div')div.className = "divContent"div.innerHTML = from + "對" + to + "說: " + messageconsole.log(div)let container = document.querySelector('.container')container.appendChild(div)}
</script>
</html>

---

3. 任務(wù)清單

💕 預(yù)期效果：

💕 代碼實現(xiàn)：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0px;padding: 0px;box-sizing: border-box;}.nav {width: 800px;height: 100px;margin: 0 auto;display: flex;align-items: center;}.nav input {width: 600px;height: 60px;border-radius: 5px;}.nav button {width: 200px;height: 60px;background-color: orange;color: white;font-size: 20px;border: orange;border-radius: 5px;}.nav button:active {background-color: grey;}.container {width: 800px;display: flex;margin: 0px auto;}h3 {background-color: gray;color: white;text-align: center;width: 400px;height: 60px;padding-top: 15px;}.todo,.done {width: 50%;height: 100%;}.row {width: 400px;display: flex;align-items: center;}span {width: 200px;font-size: 20px;margin-left: 5px;}.row button {width: 90px;height: 40px;font-size: 20px;margin-top: 10px;}/* s */</style>
</head>
<body><div class="nav"><input type="text"><button onclick="newJob()">新建任務(wù)</button></div><div class="container"><div class="todo"><h3>未完成</h3><div class="row"><input type="checkbox" name="" id=""><span>吃飯</span><button>刪除</button></div></div><div class="done"><h3>已完成</h3></div></div>
</body>
<script>function newJob() {// 獲取到input輸入框按鈕let input = document.querySelector('.nav input')// 獲取到輸入的信息let input_info = input.valueif(input_info == '') {return}console.log(input_info)// 獲取到todo這個divlet todo = document.querySelector('.todo')// 創(chuàng)建一個divlet div = document.createElement('div')// 創(chuàng)建一個checkboxlet checkbox = document.createElement('input')checkbox.type = 'checkbox'// 創(chuàng)建一個span（文本內(nèi)容是剛才輸入的信息對應(yīng)的文本）let span = document.createElement('span')span.innerHTML = input_infoconsole.log(checkbox)console.log(span)// 創(chuàng)建一個刪除buttonlet button = document.createElement('button')button.innerHTML = "刪除"div.appendChild(checkbox)div.appendChild(span)div.appendChild(button)console.log(div)// 更新樣式div.className = 'row'// // 將div插入到todo這個div中todo.appendChild(div)let delete_buttons = document.querySelectorAll('.row button')console.log(delete_buttons)for(i = 0; i < delete_buttons.length; i++) {delete_buttons[i].onclick = function() {let parent = this.parentNode;console.log(parent)let grand_parent = parent.parentNodeconsole.log(grand_parent)grand_parent.removeChild(parent)}}let checkbox_buttons = document.querySelectorAll('.row input')// 給每一個復(fù)選框綁定點擊事件for(i = 0; i < checkbox_buttons.length; i++) {checkbox_buttons[i].onclick = function() {// 將節(jié)點插入到對應(yīng)的div中// row代表的插入的節(jié)點let row = this.parentNode;// target代表的是將row插入到那個div中// 如果復(fù)選框已經(jīng)被選中，那么target就是已完成對應(yīng)的這個div// 否則target就是未完成對應(yīng)的divlet target;console.log(this.checked)if(this.checked) {target = document.querySelector('.done') } else {target = document.querySelector('.todo')}target.appendChild(row)}}}
</script>
</html>

---