背景知识

之前说过 JavaScript 的组成包括 WebAPI 包含三大部分：

ECMAScript：基础语法部分
DOM API：操作页面结构
BOM API：操作浏览器

WebAPI 就包含了 DOM 和 BOM
这是 W3C 组织规定的。

API

API是一个更广义的概念，而WebAPI是一个更具体的概念，特指 DOM 和 BOM
API ：本质上是一些现成的函数或对象，让程序员可以直接使用，方便开发，就像一个工具箱里面的各种工具。

API 参考文档 https://developer.mozilla.org/zh-CN/docs/Web/API

DOM

DOM（Document Object Model）
W3C 标准给我们提供了一系列的函数，让我们可以操作网页内容、网页结构和网页样式

DOM 树

一个页面的结构是一个属性结构，称为 DOM 树：

• 文档：一个页面就是一个文档，使用document表示
• 元素：页面中的多有标签都称为元素，使用element表示
• 节点：网页中所有的内容都可以称为节点（标签节点、注释节点、文本节点、属性节点），使用node表示
  这些文档等概念在 js 代码中就对应一个个的对象，故称“文档对象模型”。

获取元素

这部分类似于CSS选择器的功能。

querySelector

这个是 HTML5 新增的，IE9 及以上版本才能使用。

var element = document.querySelector(selectors);
1

• selectors 包含一个或多个要匹配的选择器的DOM字符串DOMString。该字符串必须是有效的CSS选择器字符串；如果不是，则引发SYNTAX_ERR异常。
• 表示文档中与指定的一组CSS选择匹配的第一个元素的html元素Element对象。
• 如果需要与指定选择器匹配的所有元素的列表，则应该使用querySelectorAll()。
• 可以在任何元素上调用，不仅仅是document。调用这个方法的元素将作为本次查找的根元素。

正因为参数的选择器，所以一定要通过特殊符号指定是哪种选择器。
例如：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>
1
2
3
4
5
6
7
8
9
10
11

querySelectorAll

使用 querySelectorAll 用法和上面类似：

<div class="box">abc</div>
<div id="id">def</div>
<script>
    var elems = document.querySelectorAll('div');
    console.log(elems);
</script>
1
2
3
4
5
6

事件初识

基本概念

JS要构建动态页面，就主要感知到用户的行为。
用户对于页面的一些操作（点击、选择、修改等等）都会在浏览器中产生一个个事件，被JS获取到，从而进行更复杂的交互操作。

浏览器就相当于一个哨兵，负责侦听用户的行为，一旦用户触发了具体的动作，哨兵就会报告后方，由后方根据用户的行为来决定下一步的对策。

事件三要素

1. 事件源：哪个元素触发的
2. 事件类型：点击、选中、修改
3. 事件处理程序：进一步如何处理（通常是一个回调函数）

简单实例

<button id="btn">点我一下</button>
<script>
    var btn = document.getElementById('btn');
    btn.onclick = function() {
        alert("hello world");
    }
</script>
1
2
3
4
5
6
7

• btn 就是事件源
• 点击就是事件类型
• function 这个匿名函数就是事件处理程序 （这个匿名函数相当于一个回调函数，不需要程序员手动调用，而是交给浏览器，由浏览器在合适的时机进行调用）
• btn.onclick = function() 这个操作称为注册事件/绑定事件
  

操作元素

获取/修改元素内容

innerText

Element.innerText 属性表示一个节点及其后代的“渲染”文本内容

<!-- 读操作 -->
var renderedText = HTMLElement.innerText;
<!-- 写操作 -->
HTMLElement.innerText = string;
1
2
3
4

不识别 html 标签 . 是非标准的（IE发起的），读取结果不保留 html 源码中的换行和空格

示例：

    <div>
        <span>hello world</span>
        <span>hello world</span>
    </div>
    <script>
        var div = document.querySelector('div');
        //读取div内部内容
        console.log(div.innerText);
        //修改div内部北荣，界面上就会同步修改
        div.innerText = 'hello js hello js';
    </script>
1
2
3
4
5
6
7
8
9
10
11

可以看到，通过 innerText 无法获取到 div 内部的 html 结构，只能得到文本内容。
修改页面的时候也会把 span 标签当成文本进行设置。

innerHTML

Element.innerHTML 属性设置或获取 HTML 语法表示的元素的后代。

    <!--  读操作 -->
    var content = element.innerHTML;
    <!-- 写操作 -->
    element.innerHTML = htmlstring; 
1
2
3
4

1. 先获取到事件源的元素
2. 注册事件

识别 html 标签. W3C标准的. 读取结果保留 html 源码中的换行和空格。

示例：

    <div>
        <span>hello world</span>
        <span>hello world</span>
    </div>
    <script>
        var div = document.querySelector('div');
        //读取页面内容
        console.log(div.innerHTML);
        //修改页面内容
        div.innerHTML = 'hello js';
    </script>
1
2
3
4
5
6
7
8
9
10
11

可以看到 innerHTML 不光能获取到页面的 html 结构，同时也能修改结构。并且获取到的内容保留了空格和换行。

innerHTML 使用的场景比 innerText 更多。

获取/修改元素属性

可以通过 Element 对象的属性来直接修改, 就能影响到页面显示效果。

    <img src="flower.png" alt="花花" title="白色的花">
    <script>
        var img = document.querySelector('img');
        console.dir(img);
    </script>
1
2
3
4
5

我们可以直接在代码中通过这些属性来获取属性的值：

    <img src="flower.png" alt="花花" title="白色的花">
    <script>
        var img = document.querySelector('img');
        console.log(img.src);
        console.log(img.title);
        console.log(img.alt);
    </script>
1
2
3
4
5
6
7

修改属性

    <img src="flower.png" alt="花花" title="白色的花">
    <script>
        var img = document.querySelector('img');
        img.onclick = function() {
            if (img.src.lastIndexOf('flower.png') !== -1) {
                img.src = './red.png';
            } else {
                img.src = './flower.png';
            }
        }
    </script>
1
2
3
4
5
6
7
8
9
10
11

点击图片就可以切换图片显示状态，（需要提前准备好图片，此处不展示咯~）

获取/修改表单元素属性

表单（主要是值 input 标签）的以下属性都可以通过 DOM 来修改。

value: input 的值
disabled: 禁用
checked: 复选框使用
selected: 下拉框使用
type: input 的类型（文本、密码、按钮、文件等）

示例一：切换按钮的文本

    <input type="button" value="播放">
    <script>
        var btn = document.querySelector('input');
        btn.onclick = function() {
            if (btn.value === '播放') {
                btn.value = '暂停';
            } else {
                btn.value = '播放';
            }
        }
    </script>
1
2
3
4
5
6
7
8
9
10
11

点击按钮后：

示例二：点击计数

    <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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

点击右边的按钮，则框框中的数量增加，每点击一次，数量+1。

• input 具有一个重要的属性 value，这个 value 决定了表单元素的内容。
• 如果是输入框，value 表示输入框的内容，修改这个值会影响到界面显示，在界面上修改这个值也会影响到代码中的属性
• 如果是按钮，value 表示按钮的内容，可以通过这个来实现按钮中文本的替换。

示例三：全选/取消全选

    <input type="checkbox" id="all">我全都要<br>
    <input type="checkbox" class="eat">炸鸡<br>
    <input type="checkbox" class="eat">椒麻鸡<br>
    <input type="checkbox" class="eat">烤鸡<br>
    <input type="checkbox" class="eat">窑鸡<br>
    <input type="checkbox" class="eat">卤鸡<br>
    <input type="checkbox" class="eat">盐焗鸡<br>
    <input type="checkbox" class="eat">手撕鸡<br>
    <input type="checkbox" class="eat">椰子鸡<br>

    <script>
        //1. 获取到元素
        var all = document.querySelector('#all');
        var eats = document.querySelectorAll('.eat');
        //2. 给all注册点击事件，选中/取消所有选项
        all.onclick = function() {
            for (var i = 0; i < eats.length; i++) {
                eats[i].checked = all.checked;
            }
        }
        //3. 给eat注册点击事件
        for (var i = 0; i < eats.length; i++) {
            eats[i].onclick = function() {
                //检测当前是不是所有的girl都被选中了
                all.checked = checkedEat(eat);
            }
        }
        //4. 实现 checkEat
        function checkEat(eat) {
            for (var i = 0; i < eaats.length; i++) {
                if (!eats[i].checked) {
                    //只要一个girl没被选中，就认为结果是false(找到了反响)
                    return false;
                }
            }
            return true;
        }
    </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

获取/修改样式属性

CSS 中指定给元素的属性，都可以通过 js 来修改。

行内样式操作

element.style.[属性名] = [属性值];
element.style.cssTest = [属性名+属性值];
1
2

“行内样式”，通过style直接在标签上指定的样式，优先级很高。
该方法适用于修改较少的情况。

示例：点击文字放大字体

style 中的属性都是使用驼峰命名的方式，与CSS的属性相对应。

    <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>
1
2
3
4
5
6
7
8
9
10
11

点击文字，则文字放大了~

类名样式操作

 element.className = [CSS 类名];
1

修改元素的CSS类名，适用于要修改很多样式的情况。
（由于class 是 js 的保留字，故名字用className）

示例：开启夜间模式

    <div class="container light">
        这是一大段话. <br>
        这是一大段话. <br>
        这是一大段话. <br>
        这是一大段话. <br>
    </div>

    <style>
        * {
        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;
    }
    </style>

    <script>
        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';
            }
        }
    </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

操作节点

新增节点

1. 创建元素节点
2. 把元素节点插入到 dom 树中
   相当于生了一个娃，再给娃上户口~

创建元素节点

使用 createElement 方法来创建一个元素，options 参数暂不关注。

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

示例：

    <div class="container"> </div>

    <script>
        var div = document.createElement('div');
        div.id = 'mydiv';
        div.className = 'box';
        div.innerHTML = 'hehe';
        console.log(div);
    </script>
1
2
3
4
5
6
7
8
9

我们可以看到，虽然已经创建了新的div，但是新的div并没有被显示出来，这是因为新创建的节点并没有加入dom树中。

更多创建节点的方法：

• createTextNode 创建文本节点
• createComment 创建注释节点
• createAttribute 创建属性节点
  我们主要以 createElement 为主即可。

出入节点到dom树中

1. 使用appendChild 将节点插入到指定节点的最后一个孩子之后。

element.appendChild(aChild)
1

    <div class="container"> </div>

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

        var container = document.querySelector('.container');
        container.appendChild(div);
    </script>
1
2
3
4
5
6
7
8
9
10
11
12

2. 使用insertBefore 将节点插入到指定节点之前。

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

• insertedNode 被插入节点（newNode）
• parentNode 新插入节点的父节点
• newNode 用于插入的节点
• referenceNode newNode 将要插在这个节点之前
  如果 referenceNode 为 null 则 newNode 将被插入到子节点的末尾。

    <div class="container">
        <div>11</div>
        <div>12</div>
        <div>13</div>
        <div>14</div>
    </div>

    <script>
        var newDiv = document.createElement('div');
        newDiv.innerHTML = '我是新节点';

        var container = document.querySelector('.container');
        console.log(container.children);
        container.insertBefore(newDiv, container.children[1]);
    </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

注意：

1. 如果针对一个节点插入两次，则只有最后一次生效（相当于把元素移动了）
2. 一个节点一旦插入完毕，再针对刚刚的节点对象进行修改，能够同步影响到 DOM 树中的内容。

    <div class="container">
        <div>11</div>
        <div>12</div>
        <div>13</div>
        <div>14</div>
    </div>

    <script>
        var newDiv = document.createElement('div');
        newDiv.innerHTML = '我是新节点';

        var container = document.querySelector('.container');
        console.log(container.children);
        container.insertBefore(newDiv, container.children[1]);

        newDiv.innerHTML = '我的修改过的新节点';
    </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

删除节点

使用removeChild 删除子节点

oldChild = element.removeChild(child);
1

• child 为待删除的节点
• element 为 child 的父节点
• 返回值为该被删除的节点
• 被删除节点只是从 DOM 树被删除了，但是仍然在内存中，可以随时加入到 DOM 树的其他位置。
• 如果上面的 child 节点不是element 的子节点，则该方法抛异常

代码案例：猜数字

<!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>猜数字</title>
</head>
<body>
    <button type="button" id="reset">重新开始一局游戏</button>
    <br>
    请输入要猜的数字：<input type="text" id="number">
    <button type="button" id="button">猜</button>
    <br>
    已经猜的次数：<span id="count">0</span>
    <br>
    结果：<span id="result"></span>

    <script>
        var inputE = document.querySelector('#number');
        var countE = document.querySelector('#count');
        var resultE = document.querySelector('#result');
        var btn = document.querySelector('#button');
        var resetBtn = document.querySelector('#reset');

        //随机生成一个1-100的数字
        var guess = Math.floor(Math.random() * 100) + 1 
        var count = 0;
        btn.onclick = function() {
            count++;
            countE.innerHTML = count;

            var userGuess = parseInt(inputE.value);
            if (userGuess == guess) {
                resultE.innerHTML = "猜对了";
                resultE.style = "color: gray;";
            } else if (userGuess < guess) {
                resultE.innerHTML = "猜小了";
                resultE.style = "color: blue;";
            } else {
                resultE.innerHTML = "猜大了";
                resultE.style = "color: red;";
            }
        }

        resetBtn.onclick = function() {
            guess = Math.floor(Math.random() * 100) + 1
            count = 0;
            countE.innerHTML = count;
            resultE.innerHTML = "";
            inputE.value = "";
        }

    </script>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

关于 js 的内容到这里就结束啦~
你都会了吗~

下一篇会结合最近两篇的内容做一个表白墙的实例噢~