大家好，我是曉星航。今天為大家?guī)淼氖?JavaScript(WebAPI) 相關(guān)的講解！??

1.WebAPI 背景知識

1.1什么是 WebAPI

前面學習的 JS 分成三個大的部分

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

WebAPI 就包含了 DOM + BOM.

這個是 W3C 組織規(guī)定的. (和制定 ECMAScript 標準的大佬們不是一伙人).

前面學的 JS 基礎(chǔ)語法主要學的是 ECMAScript, 這讓我們建立基本的編程思維. 相當于練武需要先扎 馬步.

但是真正來寫一個更加復雜的有交互式的頁面, 還需要 WebAPI 的支持. 相當于各種招式.

1.2什么是 API

API 是一個更廣義的概念. 而 WebAPI 是一個更具體的概念, 特指 DOM+BOM

所謂的 API 本質(zhì)上就是一些現(xiàn)成的函數(shù)/對象, 讓程序猿拿來就用, 方便開發(fā).

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

1.3API 參考文檔

API 參考文檔

可以在搜索引擎中按照 “MDN + API 關(guān)鍵字” 的方式搜索, 也能快速找到需要的 API 文檔.

2.DOM 基本概念

2.1什么是 DOM

DOM 全稱為 Document Object Model.

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

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

2.2DOM 樹

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

樹形結(jié)構(gòu)在數(shù)據(jù)結(jié)構(gòu)階段會介紹. 就可以簡單理解成類似于 “家譜” 這種結(jié)構(gòu)

頁面結(jié)構(gòu)形如:

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

重要概念:

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

這些文檔等概念在 JS 代碼中就對應一個個的對象.

所以才叫 “文檔對象模型” .

3.獲取元素

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

3.1querySelector

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

前面的幾種方式獲取元素的時候都比較麻煩. 而使用 querySelector 能夠完全復用前面學過的 CSS 選擇器知識, 達到更快捷更精準的方式獲取到元素對象

var element = document.querySelector(selectors);

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

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

例如 .box 是類選擇器, #star 是 id 選擇器 等.

<div class="box">abc</div>
<div id="id">def</div>
<h3><span><input type="text"></span></h3>
<script>
    var elem1 = document.querySelector('.box');
    console.log(elem1);
    var elem2 = document.querySelector('#id');
    console.log(elem2);
    var elem3 = document.querySelector('h3 span input');
    console.log(elem3);
</script>

3.2querySelectorAll

使用 querySelectorAll 用法和上面類似.

<div class="box">abc</div>
<div id="id">def</div>
<script>
    var elems = document.querySelectorAll('div');
console.log(elems);
</script>

4.事件初識

4.1基本概念

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

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

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

4.2事件三要素

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

4.3簡單示例

<button id="btn">點我一下</button>
<script>
    var btn = document.getElementById('btn');
    btn.onclick = function () {
        alert("hello world");
   }
</script>

• btn 按鈕就是事件源.
• 點擊就是事件類型
• function 這個匿名函數(shù)就是事件處理程序
• 其中 btn.onclick = function() 這個操作稱為 注冊事件/綁定事件

注意: 這個匿名函數(shù)相當于一個回調(diào)函數(shù), 這個函數(shù)不需要程序猿主動來調(diào)用, 而是交給瀏覽器, 由瀏覽器 自動在合適的時機(觸發(fā)點擊操作時) 進行調(diào)用.

5.操作元素

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

5.1.1innerText

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

// 讀操作
var renderedText = HTMLElement.innerText;
// 寫操作
HTMLElement.innerText = string;

不識別 html 標簽. 是非標準的(IE發(fā)起的). 讀取結(jié)果不保留html源碼中的 換行 和 空格.

<div>
    <span>hello world</span>
    <span>hello world</span>
</div>
<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>

可以看到, 通過 innerText 無法獲取到 div 內(nèi)部的 html 結(jié)構(gòu), 只能得到文本內(nèi)容.

修改頁面的時候也會把 span 標簽當成文本進行設(shè)置.

5.1.2innerHTML

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

// 讀操作
var content = element.innerHTML;
// 寫操作
element.innerHTML = htmlString;

1. 先獲取到事件源的元素
2. 注冊事件

識別 html 標簽. W3C 標準的. 讀取結(jié)果保留html源碼中的 換行 和 空格.

<div>
    <span>hello world</span>
    <span>hello world</span>
</div>
<script>
    var div = document.querySelector('div');
    // 讀取頁面內(nèi)容
    console.log(div.innerHTML);
    // 修改頁面內(nèi)容
    div.innerHTML = '<span>hello js</span>'
</script>

innerHTML 用的場景比 innerText 更多.

這里的代碼為點一下我們的字符串，我們就會拼接上一個a。

    <div class = "box">abc</div>
    <div id = "Id">def</div>
<script>
    var div = document.querySelector('.box');
    console.log(div.innerHTML);
    div.onclick = function () {
        div.innerHTML += 'a';
        console.log(div.innerHTML);
   }
</script>

點擊了8次過后，頁面字符串展示：

5.2獲取/修改元素屬性

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

<img src="rose.jpg" alt="這是一朵花" title="玫瑰花">
<script>
    var img = document.querySelector('img');
    console.dir(img);
</script>

此時可以看到 img 這個 Element 對象中有很多屬性

我們可以在代碼中直接通過這些屬性來獲取屬性的值.

<img src="rose.jpg" alt="這是一朵花" title="玫瑰花">
<script>
    var img = document.querySelector('img');
    // console.dir(img);
    console.log(img.src);
    console.log(img.title);
    console.log(img.alt);
</script>

還可以直接修改屬性

<img src="rose.jpg" alt="這是一朵花" title="玫瑰花">
<script>
    var img = document.querySelector('img');
    img.onclick = function () {
        if (img.src.lastIndexOf('rose.jpg') !== -1) {
            img.src = './rose2.png';
       } else {
            img.src = './rose.jpg';
       }
   }
</script>

此時點擊圖片就可以切換圖片顯示狀態(tài). (需要提前把兩個圖片準備好)

5.3獲取/修改表單元素屬性

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

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

代碼示例: 切換按鈕的文本.

假設(shè)這是個播放按鈕, 在 “播放” - “暫?！?之間切換.

<input type="button" value="播放">
<script>
    var btn = document.querySelector('input');
    btn.onclick = function () {
        if (btn.value === '播放') {
            btn.value = '暫停';
       } else {
            btn.value = '播放';
       }
   }
</script>

代碼示例: 點擊計數(shù)

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

<input type="text" id="text" value="0">
<input type="button" id="btn" value='點我+1'>
<script>
    var text = document.querySelector('#text');
    var btn = document.querySelector('#btn');
    btn.onclick = function () {
        var num = +text.value;
        console.log(num);
        num++;
        text.value = num;
   }
</script>

• input 具有一個重要的屬性 value, 這個 value 決定了表單元素的內(nèi)容
• 如果是輸入框, value 表示輸入框的內(nèi)容, 修改這個值會影響到界面顯式; 在界面上修改這個值也會影 響到代碼中的屬性
• 如果是按鈕, value 表示按鈕的內(nèi)容. 可以通過這個來實現(xiàn)按鈕中文本的替換

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

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

<input type="checkbox" id="all">我全都要 <br>
<input type="checkbox" class="girl">貂蟬 <br>
<input type="checkbox" class="girl">小喬 <br>
<input type="checkbox" class="girl">安琪拉 <br>
<input type="checkbox" class="girl">妲己 <br>
<script>
    // 1. 獲取到元素
    var all = document.querySelector('#all');
    var girls = document.querySelectorAll('.girl');
    // 2. 給 all 注冊點擊事件, 選中/取消所有選項
    all.onclick = function () {
        for (var i = 0; i < girls.length; i++) {
            girls[i].checked = all.checked;
       }
   }
    // 3. 給 girl 注冊點擊事件
    for (var i = 0; i < girls.length; i++) {
        girls[i].onclick = function () {
            // 檢測當前是不是所有的 girl 都被選中了. 
            all.checked = checkGirls(girls);
       }
   }
    // 4. 實現(xiàn) checkGirls
    function checkGirls(girls) {
    for (var i = 0; i < girls.length; i++) {
            if (!girls[i].checked) {
                // 只要一個 girl 沒被選中, 就認為結(jié)果是 false(找到了反例)
                return false;
           }
       }
        // 所有 girl 中都沒找到反例, 結(jié)果就是全選中
        return true;
   }
</script>

5.4獲取/修改樣式屬性

CSS 中指定給元素的屬性, 都可以通過 JS 來修改.

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

element.style.[屬性名] = [屬性值];
element.style.cssText = [屬性名+屬性值];

“行內(nèi)樣式”, 通過 style 直接在標簽上指定的樣式. 優(yōu)先級很高.

適用于改的樣式少的情況

代碼示例: 點擊文字則放大字體.

style 中的屬性都是使用 駝峰命名 的方式和 CSS 屬性對應的.

例如: font-size => fontSize, background-color => backgroundColor 等

這種方式修改只影響到特定樣式, 其他內(nèi)聯(lián)樣式的值不變.

<div style="font-size: 20px; font-weight: 700;">
   哈哈
</div>
<script>
    var div = document.querySelector('div');
    div.onclick = function () {
        var curFontSize = parseInt(this.style.fontSize);
        curFontSize += 10;
        this.style.fontSize = curFontSize + "px";
   }
</script>

5.4.2類名樣式操作

element.className = [CSS 類名];

修改元素的 CSS 類名. 適用于要修改的樣式很多的情況.

由于 class 是 JS 的保留字, 所以名字叫做 className

代碼示例: 開啟夜間模式

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

<div class="container light">
   這是一大段話. <br>
   這是一大段話. <br>
   這是一大段話. <br>
   這是一大段話. <br>
</div>

* {
    margin: 0;
    padding: 0;
}
html,
body {
    width: 100%;
    height: 100%;
}
.container {
    width: 100%;
    height: 100%;
}
.light {
background-color: #f3f3f3;
    color: #333;
}
.dark {
    background-color: #333;
    color: #f3f3f3;
}

var div = document.querySelector('div');
div.onclick = function () {
    console.log(div.className);
    if (div.className.indexOf('light') != -1) {
        div.className = 'container dark';
   } else {
        div.className = 'container light';
   }
}

6.操作節(jié)點

6.1新增節(jié)點

分成兩個步驟

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

第一步相當于生了個娃, 第二步相當于給娃上戶口.

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

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

var element = document.createElement(tagName[, options]);

代碼示例:

<div class="container">
</div>
<script>
    var div = document.createElement('div');
    div.id = 'mydiv';
    div.className = 'box';
 div.innerHTML = 'hehe';
    console.log(div);
</script>

此時發(fā)現(xiàn), 雖然創(chuàng)建出新的 div 了, 但是 div 并沒有顯示在頁面上. 這是因為新創(chuàng)建的節(jié)點并沒有加入到 DOM 樹中.

上面介紹的只是創(chuàng)建元素節(jié)點, 還可以使用:

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

我們以 createElement 為主即可.

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

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

element.appendChild(aChild)

<div class="container">
</div>
<script>
    var div = document.createElement('div');
    div.id = 'mydiv';
    div.className = 'box';
    div.innerHTML = 'hehe';
    var container = document.querySelector('.container');
    container.appendChild(div);
</script>

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

var insertedNode = parentNode.insertBefore(newNode, referenceNode);

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

如果 referenceNode 為 null 則 newNode 將被插入到子節(jié)點的末尾.

注意: referenceNode 引用節(jié)點不是可選參數(shù).

<div class="container">
 <div>11</div>
    <div>22</div>
    <div>33</div>
    <div>44</div>
</div>
<script>
    var newDiv = document.createElement('div');
    newDiv.innerHTML = '我是新的節(jié)點';
    var container = document.querySelector('.container');
    console.log(container.children);
    container.insertBefore(newDiv, container.children[0]);
</script>

注意1: 如果針對一個節(jié)點插入兩次, 則只有最后一次生效(相當于把元素移動了)

<div class="container">
    <div>11</div>
    <div>22</div>
    <div>33</div>
    <div>44</div>
</div>
<script>
    var newDiv = document.createElement('div');
    newDiv.innerHTML = '我是新的節(jié)點';
    var container = document.querySelector('.container');
    console.log(container.children);
    // 此處的 children 里有 4 個元素
    container.insertBefore(newDiv, container.children[0]);
    // 此處的 children 里有 5 個元素(上面新插了一個), 0 號元素是 新節(jié)點, 
    // 1 號元素是 11, 2號節(jié)點是 22, 所以是插入到 22 之前. 
    container.insertBefore(newDiv, container.children[2]);
</script>

注意2: 一旦一個節(jié)點插入完畢, 再針對剛剛的節(jié)點對象進行修改, 能夠同步影響到 DOM 樹中的內(nèi)容.

<div class="container">
    <div>11</div>
    <div>22</div>
    <div>33</div>
    <div>44</div>
</div>
<script>
    var newDiv = document.createElement('div');
    newDiv.innerHTML = '我是新的節(jié)點';
    var container = document.querySelector('.container');
    console.log(container.children);
    container.insertBefore(newDiv, container.children[0]);
    
    // 插入完畢后再次修改 newDiv 的內(nèi)容
    newDiv.innerHTML = '我是新節(jié)點2';
</script>

6.2刪除節(jié)點

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

oldChild = element.removeChild(child);

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

刪除前：

    <ul>
        <li>11</li>
        <li>22</li>
    </ul>
<script>
    let ul = document.querySelector('ul');
    for (let n = 3; n < 10; n++) {
        let li = document.createElement('li');
        li.innerHTML = n + '' + n;
        ul.appendChild(li);
    }
</script>

刪除后：

    <ul>
        <li>11</li>
        <li>22</li>
    </ul>
<script>
    let ul = document.querySelector('ul');
    for (let n = 3; n < 10; n++) {
        let li = document.createElement('li');
        li.innerHTML = n + '' + n;
        ul.appendChild(li);
    }
    let toDelete = document.querySelectorAll('li')[2];
    console.log(toDelete);

    ul.removeChild(toDelete);
</script>

控制臺打印出來刪除的元素：

7.代碼案例: 猜數(shù)字

7.1預期效果

網(wǎng)頁版本猜數(shù)字~

1. 生成一個 1-100 之間的隨機數(shù)字
2. 讓用戶輸入一個數(shù)字
3. 根據(jù)輸入的數(shù)字的大小關(guān)系，給出提示 高了/低了/猜對了

7.2代碼實現(xiàn)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>猜數(shù)字</title>
</head>
<body>
    <div>請輸入要猜的數(shù)字</div>
    <input type="text">
    <button>提交</button>
    <!-- 使用這個div來顯示結(jié)果 -->
    <div class="result">

    </div>

    <script>
        //1.生成一個1-100的隨機的整數(shù)
        let toGuess =parseInt(100 * Math.random()) + 1;
        console.log(toGuess);
        //2.進行猜數(shù)字操作
        let input = document.querySelector('input');
        let resultDiv = document.querySelector('.result');
        let button  = document.querySelector('button');
        button.onclick = function() {
            //3.取出輸入框中的內(nèi)容
            if (input.value == '') {
                //用戶啥都沒輸入，直接返回.
                return;
            }
            let inputNum = parseInt(input.value);
            //4.比較一下大小關(guān)系
            if (inputNum < toGuess) {
                //低了
                resultDiv.innerHTML = '低了';
            } else if (inputNum > toGuess) {
                //高了
                resultDiv.innerHTML = '高了';
            } else {
                //猜對了
                resultDiv.innerHTML = '猜對了';
            }
        }
    </script>
</body>
</html>

注意：

Math.random(); 生成的是 [0,1) 之間的隨機數(shù) 隨機數(shù)設(shè)為N
N的范圍是 [0,1)
100 * N 的范圍是 [0,100) 這是一個挺長的小數(shù)
使用 parseInt 吧小數(shù)部分去掉，得到[0,100) 的整數(shù) ==> [0,99]之間的整數(shù) 再 ＋ 1 就是 [1,100]

效果展示：

按F12進入上帝視角：

8.代碼案例: 表白墻

8.1預期效果

8.2創(chuàng)建頁面布局

創(chuàng)建 表白墻.html

<h1>表白墻</h1>
<p>輸入后點擊提交, 會將信息顯示在表格中</p>
<span>誰: </span>
<input type="text">
<span>對誰: </span>
<input type="text">
<span>說什么: </span>
<input type="text">
<input type="button" value="提交">

此時效果形如

8.3調(diào)整樣式

<div class="container">
    <h1>表白墻</h1>
    <p>輸入后點擊提交, 會將信息顯示在表格中</p>
    <div class="row">
        <span>誰: </span>
        <input class="edit" type="text">
  </div>
    <div class="row">
        <span>對誰: </span>
        <input class="edit" type="text">
    </div>
    <div class="row">
        <span>說什么: </span>
        <input class="edit" type="text">
    </div>
    <div class="row">
        <input type="button" value="提交" class="submit">
    </div>
</div>
<style>
   * {
        margin: 0;
        padding: 0;
   }
    .container {
        width: 400px;
        margin: 0 auto;
   }
    h1 {
        text-align: center;
        padding: 20px 0;
   }
    p {
        color: #666;
        text-align: center;
        font-size: 14px;
        padding: 10px 0;
   }
    .row {
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
   }
    span {
        width: 100px;
        line-height: 40px;
   }
    .edit {
        width: 200px;
        height: 30px;
   }
    .submit {
width: 304px;
        height: 40px;
        color: white;
        background-color: orange;
        border: none;
   }
</style>

此時效果形如

8.4實現(xiàn)提交

// 給點擊按鈕注冊點擊事件
var submit = document.querySelector('.submit');
submit.onclick = function () {
    // 1. 獲取到編輯框內(nèi)容
    var edits = document.querySelectorAll('.edit');
    var from = edits[0].value;
    var to = edits[1].value;
    var message = edits[2].value;
    console.log(from + "," + to + "," + message);
    if (from == '' || to == '' || message == '') {
        return;
   }
    // 2. 構(gòu)造 html 元素
    var row = document.createElement('div');
    row.className = 'row';
    row.innerHTML = from + '對' + to + '說: ' + message;
    // 3. 把構(gòu)造好的元素添加進去
    var container = document.querySelector('.container');
    container.appendChild(row);
    // 4. 同時清理之前輸入框的內(nèi)容
    for (var i = 0; i < 3; i++) {
        edits[i].value = '';
   }
}

此時效果形如:

8.5實現(xiàn)點擊按鈕的動畫效果(選學)

需要使用偽類選擇器.

偽類選擇器種類有很多. 此處的 :active 表示選中被按下的按鈕.

.submit:active {
    background-color: #666;
}

9.代碼案例: 待辦事項

9.1預期效果

9.2創(chuàng)建頁面布局

創(chuàng)建 待辦事項.html

<div class="nav">
    <input type="text">
    <button>新建任務</button>
</div>
<div class="container">
    <div class="todo">
        <h3>未完成</h3>
        <div class="row">
            <input type="checkbox">
            <span>吃飯</span>
            <button>刪除</button>
        </div>
    </div>
    <div class="done">
        <h3>已完成</h3>
    </div>
</div>

9.3實現(xiàn)頁面樣式

<style>
   * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
   }
    .container {
        width: 800px;
        margin: 0 auto;
        display: flex;
   }
    .todo,
    .done {
        width: 50%;
        height: 100%;
   }
    .container h3 {
        height: 50px;
        text-align: center;
        line-height: 50px;
        background-color: #333;
        color: #fff;
   }
 .nav {
        width: 800px;
        height: 100px;
        margin: 0 auto;
        display: flex;
        align-items: center;
   }
    .nav input {
        width: 600px;
        height: 50px;
   }
    .nav button {
        width: 200px;
        height: 50px;
        border: none;
        background-color: orange;
        color: #fff;
   }
    .row {
        height: 50px;
        display: flex;
        align-items: center;
   }
    .row input {
        margin: 0 10px;
   }
    .row span {
        width: 300px;
   }
    .row button {
        width: 50px;
        height: 40px;
   }
</style>

9.4實現(xiàn)頁面行為

9.4.1實現(xiàn)新增

// 實現(xiàn)新增任務
var addTaskButton = document.querySelector('.nav button');
addTaskButton.onclick = function () {
    // 1. 獲取到任務內(nèi)容的輸入框
    var input = document.querySelector('.nav input');
    // 2. 獲取到輸入框內(nèi)容
     var taskContent = input.value;
    // 3. 根據(jù)內(nèi)容新建一個元素節(jié)點
    var row = document.createElement('div');
    row.className = 'row';
    var checkbox = document.createElement('input');
    checkbox.type = 'checkbox';
    var span = document.createElement('span');
    span.innerHTML = taskContent;
    var button = document.createElement('button');
    button.innerHTML = '刪除';
    row.appendChild(checkbox);
    row.appendChild(span);
    row.appendChild(button);
    // 4. 把新節(jié)點插入到 todo 中
    var todo = document.querySelector('.todo');
    todo.appendChild(row);
}

9.4.2點擊復選框后將元素放到 “已完成”

注意:

• 在事件回調(diào)函數(shù)中使用 this 能夠獲取到當前處理事件的元素.
• 通過 this.parentNode 屬性能夠獲取到當前元素的父元素.
• 點擊 checkbox 時, 會先修改 value , 再觸發(fā)點擊事件.

// 修改 addTaskButton.onclick
addTaskButton.onclick = function () {
 // 上方的部分不變...
    
    // 5. 給 checkbox 注冊點擊事件
    checkbox.onclick = function () {
        // 
        var row = this.parentNode;
        // 注意! 是先觸發(fā) checked 為 true, 然后再調(diào)用 onclick 函數(shù)
        if (this.checked) {
            var target = document.querySelector('.done');
       } else {
            var target = document.querySelector('.todo');
       }
        target.appendChild(row);
   }
}

9.4.3點擊刪除按鈕刪除該任務

// 修改 addTaskButton.onclick
addTaskButton.onclick = function () {
 // 上方的部分不變...
    // 6. 給刪除按鈕注冊點擊事件
    button.onclick = function () {
        var row = this.parentNode;
        var grandParent = row.parentNode;
        grandParent.removeChild(row);
   }
}

ow.appendChild(button);
// 4. 把新節(jié)點插入到 todo 中
var todo = document.querySelector(‘.todo’);
todo.appendChild(row);
}

### 9.4.2點擊復選框后將元素放到 "已完成"

注意:

- 在事件回調(diào)函數(shù)中使用 this 能夠獲取到當前處理事件的元素.  
- 通過 this.parentNode 屬性能夠獲取到當前元素的父元素.  
- 點擊 checkbox 時, 會先修改 value , 再觸發(fā)點擊事件.

```javascript
// 修改 addTaskButton.onclick
addTaskButton.onclick = function () {
 // 上方的部分不變...
    
    // 5. 給 checkbox 注冊點擊事件
    checkbox.onclick = function () {
        // 
        var row = this.parentNode;
        // 注意! 是先觸發(fā) checked 為 true, 然后再調(diào)用 onclick 函數(shù)
        if (this.checked) {
            var target = document.querySelector('.done');
       } else {
            var target = document.querySelector('.todo');
       }
        target.appendChild(row);
   }
}

9.4.3點擊刪除按鈕刪除該任務

// 修改 addTaskButton.onclick
addTaskButton.onclick = function () {
 // 上方的部分不變...
    // 6. 給刪除按鈕注冊點擊事件
    button.onclick = function () {
        var row = this.parentNode;
        var grandParent = row.parentNode;
        grandParent.removeChild(row);
   }
}

感謝各位讀者的閱讀，本文章有任何錯誤都可以在評論區(qū)發(fā)表你們的意見，我會對文章進行改正的。如果本文章對你有幫助請動一動你們敏捷的小手點一點贊，你的每一次鼓勵都是作者創(chuàng)作的動力哦！??文章來源地址http://www.zghlxwxcb.cn/news/detail-742472.html

到了這里，關(guān)于12.JavaScript(WebAPI) - JS api文獻精解的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！