---

一、WebAPI背景知識(shí)

1. 什么是WebAPI？

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

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

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

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

---

2. 什么是API？

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

相當(dāng)于一個(gè)工具箱，只不過程序猿用的工具箱數(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樹

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

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

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

重要概念:

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

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

---

三、獲取元素

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

💕 querySelector

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

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

var element = document.querySelector(selectors);

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

正因?yàn)閰?shù)是選擇器, 所以一定要通過特殊符號(hào)指定是哪種選擇器：

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

使用document會(huì)選擇到整個(gè)頁面。

💕 querySelectorAll

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

---

三、事件初識(shí)

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

💕 基本概念

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

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

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

💕 事件三要素

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

---

1. 點(diǎn)擊事件

下面我們來看一個(gè)簡(jiǎn)單的點(diǎn)擊事件：

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

---

2. 鍵盤事件

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

---

💕 onkeydown 事件

示例一：

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

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

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

String.fromCharCode() 是 JavaScript 中的一個(gè)方法，用于將一個(gè)或多個(gè)字符編碼的 Unicode 值轉(zhuǎn)換為相應(yīng)的字符串。這個(gè)方法可以接受一個(gè)或多個(gè) 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事件時(shí)，發(fā)現(xiàn)無論按下的字母是大寫還是小寫，他輸出在控制臺(tái)上時(shí)都是大寫。使用onkeypress可以有效解決這個(gè)問題。

<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 事件是在鍵盤按下去彈起來的時(shí)候才會(huì)觸發(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>

但是有時(shí)候我們輸入的是特殊鍵的時(shí)候，將不會(huì)打印在控制臺(tái)上，比如說：shift鍵、alt鍵等。

可以看到控制臺(tái)并沒有打印。那是因?yàn)檫@些鍵需要特殊處理：

例如：

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

---

四、操作元素

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

💕 innerText

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

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

💕 innerHTML

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

<body><span>這是一個(gè)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 對(duì)象的屬性來直接修改, 就能影響到頁面顯示效果。

<body><img src="../百度logo圖標(biāo).png" alt="圖片加載失敗" title="這是一個(gè)提示圖片" 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)點(diǎn)擊了這個(gè)圖片")}
</script>

---

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

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

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

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

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

---

💕 計(jì)數(shù)器實(shí)現(xiàn)：點(diǎn)擊計(jì)數(shù)

使用一個(gè)輸入框輸入初始值(整數(shù)). 每次點(diǎn)擊按鈕, 值 + 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. 點(diǎn)擊全選按鈕，則選中所有選項(xiàng)
2. 只要某個(gè)選項(xiàng)取消，則自動(dòng)取消全選按鈕的勾選狀態(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)選中 “全部選中” 按鈕時(shí), 其他所有選項(xiàng)都將被選中function SelectAll() {for(i = 0; i < select.length; i++){select[i].checked = all.checked}}// 當(dāng)其他選項(xiàng)中有任意一個(gè)選項(xiàng)沒有被選中時(shí), “全部選中”選項(xià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)先級(jí)很高，適用于改的樣式少的情況。

示例： 點(diǎn)擊文字則放大字體

<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

示例： 開啟夜間模式

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

代碼實(shí)現(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é)點(diǎn)

💕 什么是節(jié)點(diǎn)？

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

1. 新增節(jié)點(diǎn)

分成兩個(gè)步驟：

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

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

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

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

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

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

---

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

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

例如：

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

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

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

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

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

注意：

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

例如：

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

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

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

div.insertBefore(new_node, null)

注意：

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

---

2. 刪除節(jié)點(diǎn)

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

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

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

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

---

六、實(shí)戰(zhàn)案例

1. 猜數(shù)字

💕 預(yù)期效果：

💕 代碼實(shí)現(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>請(qǐng)輸入要猜的數(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)// 猜測(cè)的結(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 = ""}// 生成隨機(jī)數(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ù)期效果：

💕 代碼實(shí)現(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)信息, 點(diǎn)擊提交數(shù)據(jù)將會(huì)展示在表格中</p><div class="div1"><span>誰: </span><input type="text" class="edit"></div><div class="div1"><span>對(duì)誰: </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 + "對(duì)" + to + "說: " + messageconsole.log(div)let container = document.querySelector('.container')container.appendChild(div)}
</script>
</html>

---

3. 任務(wù)清單

💕 預(yù)期效果：

💕 代碼實(shí)現(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這個(gè)divlet todo = document.querySelector('.todo')// 創(chuàng)建一個(gè)divlet div = document.createElement('div')// 創(chuàng)建一個(gè)checkboxlet checkbox = document.createElement('input')checkbox.type = 'checkbox'// 創(chuàng)建一個(gè)span（文本內(nèi)容是剛才輸入的信息對(duì)應(yīng)的文本）let span = document.createElement('span')span.innerHTML = input_infoconsole.log(checkbox)console.log(span)// 創(chuàng)建一個(gè)刪除buttonlet button = document.createElement('button')button.innerHTML = "刪除"div.appendChild(checkbox)div.appendChild(span)div.appendChild(button)console.log(div)// 更新樣式div.className = 'row'// // 將div插入到todo這個(gè)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')// 給每一個(gè)復(fù)選框綁定點(diǎn)擊事件for(i = 0; i < checkbox_buttons.length; i++) {checkbox_buttons[i].onclick = function() {// 將節(jié)點(diǎn)插入到對(duì)應(yīng)的div中// row代表的插入的節(jié)點(diǎn)let row = this.parentNode;// target代表的是將row插入到那個(gè)div中// 如果復(fù)選框已經(jīng)被選中，那么target就是已完成對(duì)應(yīng)的這個(gè)div// 否則target就是未完成對(duì)應(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>

---