千古前端图文教程

03-DOM操作练习：基础练习

(adsbygoogle = window.adsbygoogle || []).push({});

# DOM操作练习

# 举例1：点击按钮时，显示和隐藏盒子。

代码实现：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        button {
            margin: 10px;
        }

        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .show {
            display: block;
        }

        .hide {
            display: none;
        }
    </style>

</head>
<body>
<button id="btn">隐藏</button>
<div>
    千古壹号
</div>

<script>
    //需求：点击button,隐藏盒子。改变文字，在点击按钮，显示出来。
    //步骤：
    //1.获取事件源和相关元素
    //2.绑定事件
    //3.书写事件驱动程序

    //1.获取事件源和相关元素
    var btn = document.getElementById("btn");
    var div1 = document.getElementsByTagName("div")[0];
    //2.绑定事件
    btn.onclick = function () {
        //3.书写事件驱动程序
        //判断btn的innerHTML属性值，如果为隐藏就隐藏盒子，并修改按钮内容为显示。
        //反之，则显示，并修改按钮内容为隐藏
        if (this.innerHTML === "隐藏") {
            div1.className = "hide";
            //修改按钮上的文字（innerHTML）
            btn.innerHTML = "显示";
        } else {
            div1.className = "show";
            //修改按钮上的文字（innerHTML）
            btn.innerHTML = "隐藏";
        }
    }

</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
58
59
60
61
62
63

代码解释：

当盒子是显示状态时，就设置为隐藏；当盒子是隐藏状态时，就设置为显示。注意这里的逻辑判断。

另外，这里用到了innerHTHL属性，它可以修改按钮上显示的文字。

代码最终显示的效果如下：

20180127_1518.gif

# 举例2：美女相册

这里推荐一个网站：

好处是：素材做出来之前，先留出空位，方便以后换图。比如http://via.placeholder.com/400x300 (opens new window)这个链接可以生成400*300的占位图片。

需求：

  • （1）点击小图片，改变下面的大图片的src属性值，让其赋值为a链接中的href属性值。
  • （2）让p标签的innnerHTML属性值，变成a标签的title属性值。

为了实现美女相册，代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        body {
            font-family: "Helvetica", "Arial", serif;
            color: #333;
            margin: 1em 10%;
        }

        h1 {
            color: #333;
            background-color: transparent;
        }

        a {
            color: #c60;
            background-color: transparent;
            font-weight: bold;
            text-decoration: none;
        }

        ul {
            padding: 0;
        }

        li {
            float: left;
            padding: 1em;
            list-style: none;
        }

        #imagegallery {

            list-style: none;
        }

        #imagegallery li {
            margin: 0px 20px 20px 0px;
            padding: 0px;
            display: inline;
        }

        #imagegallery li a img {
            border: 0;
        }
    </style>

</head>
<body>
<h2>
    美女画廊
</h2>
<a href="#">注册</a>
<ul id="imagegallery">
    <li>
        <a href="image/1.jpg" title="美女A">
            <img src="image/1-small.jpg" width="100" alt="美女1"/>
        </a>
    </li>
    <li>
        <a href="image/2.jpg" title="美女B">
            <img src="image/2-small.jpg" width="100" alt="美女2"/>
        </a>
    </li>
    <li>
        <a href="image/3.jpg" title="美女C">
            <img src="image/3-small.jpg" width="100" alt="美女3"/>
        </a>
    </li>
    <li>
        <a href="image/4.jpg" title="美女D">
            <img src="image/4-small.jpg" width="100" alt="美女4"/>
        </a>
    </li>
</ul>


<div style="clear:both"></div>

<img id="image" src="image/placeholder.png" width="450px"/>

<p id="des">选择一个图片</p>

<script>
    //需求：
    //（1）点击小图片，改变下面的大图片的src属性值，让其赋值为a链接中的href属性值。
    //（2）让p标签的innnerHTML属性值，变成a标签的title属性值。

    //1.获取事件源和相关元素
    //利用元素获取其下面的标签。
    var ul = document.getElementById("imagegallery");
    var aArr = ul.getElementsByTagName("a");     //获取ul中的超链接<a>

    //    console.log(aArr[0]);
    var img = document.getElementById("image");
    var des = document.getElementById("des");
    //2.绑定事件
    //以前是一个一个绑定，但是现在是一个数组。我们用for循环绑定
    for (var i = 0; i < aArr.length; i++) {
        aArr[i].onclick = function () {
            //3.【核心代码】书写事件驱动程序：修改属性值
            img.src = this.href;  //this指的是函数调用者，和i并无关系，所以不会出错。
//            img.src = aArr[i].href;   注意，上面这一行代码不要写成这样
            des.innerHTML = this.title;
            return false;    //return false表示：阻止继续执行下面的代码。
        }
    }

</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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114

代码解释：

（1）获取事件源：我们通过ul.getElementsByTagName("a")来获取ul里面的a元素。

（2）绑定事件：因为要绑定一个数组，所以这里用for循环来绑定

（3）【重要】书写事件驱动程序：这里是用img.src = this.href，而不是用img.src = aArr[i].href。因为this指的是函数的调用者。如果写成后者，等i变成了4，就会一直是4。显然不能达到效果。

（4）代码的最后一行：return false表示：阻止继续执行下面的代码。

实现的效果如下：

20180127_1630.gif

工程文件：2018-01-27-美女相册demo.rar (opens new window)

# 举例3：鼠标悬停时，显示二维码大图

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .code {
            width: 50px;
            height: 50px;
        }

        .code a {
            display: block;
            width: 50px;
            height: 50px;
            background: url(http://img.smyhvae.com/20180127_QRcode_small.png) no-repeat -159px -51px;
            position: relative;

        }

        .code-big {
            position: absolute;
            top: 10px;
            left: 80px;
        }

        .hide {
            display: none;
        }

        .show {
            display: block;
        }


    </style>

    <script>
        window.onload = function () {
            //需求：鼠标放到a链接上，显示二维码（添加show类名，去掉hide类名）
            //      鼠标移开a链接，隐藏二维码（添加hide类名，去掉show类名）


            //1.获取事件源和相关元素
            var a = document.getElementsByTagName("a")[0];
            var div = document.getElementsByClassName("code-big")[0];
            //2.绑定事件
            a.onmouseover = fn1;   //鼠标悬停时
            a.onmouseout = fn2;     //鼠标离开时

            //定义方法
            function fn1() {
                //3.书写事件驱动程序
                div.className = "code-big show";
                //div.className = div.className.replace("hide", "show");

            }

            function fn2() {
                div.className = "code-big hide";
                //了解,字符串操作，把字符串中的hide替换成show。
                // div.className = div.className.replace("show","hide");
            }
        }
    </script>
</head>
<body>

<div class="code">
    <a href="#"></a>
    <img src="http://img.smyhvae.com/2016040102.jpg" alt="" class="code-big hide"/>
</div>

</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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

实现效果：

20180127_1800.gif

# 表单元素的属性

表单元素的属性包括：type、value、checked、selected、disabled等。

# 举例1：禁用文本框/解禁文本框

<body>

账号: <input type="text" value="千古壹号..."/><button>禁用</button><button>解禁</button><br><br>
密码: <input type="password" value="aaabbbccc"/>

<script>

    var inp = document.getElementsByTagName("input")[0];
    var btn1 = document.getElementsByTagName("button")[0];
    var btn2 = document.getElementsByTagName("button")[1];

    btn1.onclick = function () {
        inp.disabled = "no";   //禁用文本框。属性值里随便写什么字符串都行，但不能为空。
    }
    btn2.onclick = function () {
        inp.disabled = false;   //解禁文本框。让disabled属性消失即可。
//            inp.removeAttribute("disabled");
    }
</script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

当文本框被禁用之后，文本框只读，不能编辑，光标点不进去。

上方代码可以看到，禁用文本框的代码是：

	inp.disabled = "no";   //让disabled属性出现，即可禁用
1

我们的目的时让disabled这个属性出现，即可禁用。所以，属性值里可以写数字，可以写任意一个字符串，但不能写0，不能写false，不能为空。一般我们写no。

解禁文本框的代码是：

	inp.disabled = false;      // 方法1：让disabled属性消失，即可解禁。
	inp.removeAttribute("disabled");  //方法2：推荐
1
2
3

我们的目的是删除disabled属性，即可解禁。属性值可以是false，可以是0。但我们一般采用方式2进行解禁。

实现效果：

# 举例2：文本框获取焦点/失去焦点

细心的读者会发现，京东和淘宝的搜索框，获取焦点时，提示文字的体验是不同的。

京东：

20180127_2000.gif

淘宝：

20180127_2005.gif

其实，淘宝的提示文字，是用一个绝对定位的单独的标签来做的。

京东是判断输入框是否获取焦点；淘宝是判断输入框内是否有用户输入的文字。

我们现在来实现一下。代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        input {
            width: 300px;
            height: 36px;
            padding-left: 5px;
            color: #ccc;
        }

        label {
            position: absolute;
            top: 82px;
            left: 56px;
            font-size: 12px;
            color: #ccc;
            cursor: text;
        }

        .hide {
            display: none;
        }

        .show {
            display: block;
        }
    </style>
</head>
<body>
京东: <input id="inp1" type="text" value="微单相机"/><br><br>
淘宝: <label for="inp2">电动牙刷</label><input id="inp2" type="text"/><br><br>
placeholder: <input type="text" placeholder="我是placeholder"/>

<script>
    //需求：京东的input按钮获取焦点后，立刻删除内容。失去后光标显示文字。

    var inp1 = document.getElementById("inp1");

    inp1.onfocus = function () {
        //判断，如果input里面的内容是“微单相机”，那么把值赋值为“”；
        if (this.value === "微单相机") {
            inp1.value = "";
            inp1.style.color = "#000";

        }
    }
    //失去焦点事件
    inp1.onblur = function () {
        //判断：如果input内容为空，那么把内容赋值为微单相机。
        if (this.value === "") {
            inp1.value = "微单相机";
            inp1.style.color = "#ccc";

        }
    }


    //需求：在input中输入文字，label标签隐藏；当里面的文字变成空字符串，label显示。

    var inp2 = document.getElementById("inp2");
    var lab = document.getElementsByTagName("label")[0];

    //2.绑定事件(输入文字、和删除文字时，都会触动这个事件)
    inp2.oninput = function () {
        //判断input中的值是否为空，如果为空，那么label显示，否则隐藏。
        if (this.value === "") {
            lab.className = "show";
        } else {
            lab.className = "hide";
        }
    }
</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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

实现效果如下：

20180127_2010.gif

如上方所示，我们还可以用placeholder来做，但是IE678并不支持，所以不建议使用。

# 举例3：用户注册信息错误时，输入框失去焦点后，高亮显示。

代码实现：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .wrong {
            border: 2px solid red;
        }
        .right {
            border: 2px solid #91B81D;
        }
    </style>
</head>
<body>

账号：<input type="text" onblur="fn(this)"/><br><br>
密码：<input type="password" onblur="fn(this)"/>

<script>
    //需求：失去焦点的时候判断input按钮中的值，如果账号或密码在6-12个字符之间通过，否则报错。

    function fn(aaa){
        //html中的input标签行内调用function的时候,是先通过window调用的function，所以打印this等于打印window
//            console.log(this)
        //只有传递的this才指的是标签本身。
//            console.log(aaa)
//            console.log(this.value)
        if(aaa.value.length < 6 || aaa.value.length>12){
            aaa.className = "wrong";
        }else{
            aaa.className = "right";
        }
    }
</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

代码解释：这次我们是在标签内调用function的，此时是先通过window调用的function。所以行内调用的时候要带this。

实现效果：

20180127_2035.gif

# 举例4：全选和反选

对应的代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .my-table {
            width: 300px;
            margin: 100px auto 0;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 300px;
        }

        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }

        td {
            font: 14px "微软雅黑";
        }

        tbody tr {
            background-color: #f0f0f0;
        }

        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>

    <script>

        window.onload = function () {
            //需求1：点击上面的的input，下面全选或者反选。
            //思路：获取了上面的input按钮，只需要判断，checked属性是true还是false，如果是true，下面的全部变成true；false同理。

            var topInp = document.getElementById("title");

            var tbody = document.getElementById("content");
            var botInpArr = tbody.getElementsByTagName("input");

            //绑定事件
            topInp.onclick = function () {
                //费劲版
//                for(var i=0;i<botInpArr.length;i++){
//                    if(topInp.checked === true){
//                        botInpArr[i].checked = true;
//                    }else{
//                        botInpArr[i].checked = false;
//                    }
//                }

                //优化版（被点击的input按钮的checked属性值，应该直接作为下面的所有的input按钮的checked属性值）
                for(var i=0;i<botInpArr.length;i++){
                    botInpArr[i].checked = this.checked;
                }
            }

            //需求2：点击下面的的input，如果下面的全部选定了，上面的全选，否则相反。
            //思路：为下面的每一个input绑定事件，每点击一次都判断所有的按钮
            // checked属性值是否全部都是true，如果有一个是false，
            // 那么上面的input的checked属性也是false;都是true，topInp的checked就是true；


            for(var i=0;i<botInpArr.length;i++){
                botInpArr[i].onclick = function () {  //每一个input都要绑定事件
                    //开闭原则（用开关来控制）
                    var bool = true;
                    //检测每一个input的checked属性值。
                    for(var j=0;j<botInpArr.length;j++){
                        if(botInpArr[j].checked === false){
                            bool = false;
                        }
                    }
                    topInp.checked = bool;
                }
            }
        }

    </script>

</head>
<body>
<div class="my-table">
    <table>
        <thead>
        <tr>
            <th>
                <input type="checkbox" id="title" />
            </th>
            <th>菜名</th>
            <th>饭店</th>
        </tr>
        </thead>
        <tbody id="content">
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>菜品1</td>
            <td>木屋烧烤</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>菜品2</td>
            <td>蒸菜馆</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>菜品3</td>
            <td>海底捞火锅</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>菜品4</td>
            <td>面点王</td>
        </tr>
        </tbody>
    </table>
</div>

</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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149

注意代码中的注释，需求2是比较难的地方，这里用到了两次for循环。第一次for循环是因为，要给每个input都要进行绑定事件。

实现的效果如下：

20180127_2320.gif
1

04-DOM操作练习：Tab栏切换（通过className设置样式）