Dom基础操作

基础JavaScript

Dom文档对象模型

4. Dom操作

4.1 常见鼠标事件

image-20230301143718293

4.2 改变元素内容（获取或设置）

4.21 innerText与innerHTML

image-20230301143944353

4.22 innerText与innerHTML区别

image-20230301143957461

4.3 常用元素的属性操作

image-20230301144019548

4.4 通过类名className更改样式

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        
        .change {
            background-color: purple;
            color: #fff;
            font-size: 25px;
            margin-top: 100px;
        }
    </style>
</head>


<body>
    <div class="first">文本</div>
    <script>
        // 1. 使用 element.style 获得修改元素样式  如果样式比较少 或者 功能简单的情况下使用
        var test = document.querySelector('div');
        test.onclick = function() {
            // this.style.backgroundColor = 'purple';
            // this.style.color = '#fff';
            // this.style.fontSize = '25px';
            // this.style.marginTop = '100px';
            // 让我们当前元素的类名改为了 change

            // 2. 我们可以通过 修改元素的className更改元素的样式 适合于样式较多或者功能复杂的情况
            // 3. 如果想要保留原先的类名，我们可以这么做 多类名选择器
            // this.className = 'change';
            this.className = 'first change';
        }
    </script>
</body>

</html>

4.5 案例

4.51 时间问候

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
<!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>
        .box{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        p{
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="" alt="" srcset="" width="300">
        <p>晚上好</p>
    </div>
    <script>
        var img=document.querySelector('img');
        var p=document.querySelector('p');
        var time=new Date();
        var h=time.getHours();
        if (h < 12 && h > 6) {
            img.src="./images/s.gif"
            p.innerHTML='早上好'
        } else if (h > 12 && h < 18) {
            img.src="./images/x.gif"
            p.innerHTML='下午好'
        } else {
            img.src="./images/w.gif"
            p.innerHTML='晚上好'
        }
    </script>
</body>

</html>

4.52 表单属性设置

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
<!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>
</head>

<body>
    <button>按钮</button>
    <input type="text" name="" id="" value="输入内容">
    <script>
        // 1、获取元素
        var btn = document.querySelector('button');
        var input = document.querySelector('input');
        // 2、注册事件

        btn.onclick = function () {
            // input.innerHTML = '点击了';  这个是 普通盒子 比如 div 标签里面的内容
            // 表单里面的值 文字内容是通过 value 来修改的
            input.value = '被点击了';
            // 如果想要某个表单被禁用 不能再点击 disabled  我们想要这个按钮 button禁用
            // btn.disabled = true;
            this.disabled = true;
            // this 指向的是事件函数的调用者 btn
        }
    </script>
</body>

</html>

4.53 登录密码显示隐藏

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
<!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: 0;
            padding: 0;
        }

        body {
            background-color: rgba(0, 0, 0, 1);
        }

        form {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            justify-content: center;
            flex-direction: column;
        }

        div {
            position: relative;
            width: 300px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border: none;
            border-bottom: 1px solid #ccc;
            color: #ccc;

        }

        h5 {
            text-align: center;
        }

        input {
            height: 30px;
            outline: none;
            background-color: transparent;
            color: white;
        }

        input[type="text"] {
            /* width: 200px; */
            border: none;
            border-bottom: 1px solid #ccc;
        }

        #pwd {
            margin-top: 20px;
            border: none;
        }

        button {
            margin-top: 30px;
            width: 300px;
            height: 30px;
            outline: none;
            background-color: #b80e0e;
            color: white;
            border: none;
            border-radius: 25px;
            cursor: pointer;
        }

        a {
            text-decoration: none;
            color: #ccc;
        }

        img {
            position: absolute;
            top: 15px;
            right: 80px;
            width: 24px;
        }
    </style>
</head>

<body>
    <form action="" method="get">
        <h5>京东登录</h5>
        <input type="text" name="" id="info" placeholder="用户名/邮箱/已验证手机">
        <div>
            <input type="password" name="" id="pwd" placeholder="请输入密码">
            <label for="pwd">
                <img src="./images/close.png" alt="" srcset="" width="24">
                |
                <a href="#">忘记密码</a>
            </label>
        </div>
        <button type="submit">登录</button>
    </form>
    <script>
        var psd = document.getElementById('pwd');
        var eye = document.querySelector('img')
        var flag = true;
        eye.onclick = function () {
            // 点击一次之后， flag 一定要变化
            if (flag) {
                psd.type = 'text';
                eye.src = 'images/open.png';
                flag = !flag; // 赋值操作
            } else {
                psd.type = 'password';
                eye.src = 'images/close.png';
                flag = !flag;
            }
        }

    </script>
</body>

</html>

4.54 修改样式属性

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
<!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: 0;
            padding: 0;
        }

        div {
            width: 200px;
            height: 200px;
            background-color: brown;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        var btn = document.querySelector('div')
        var flag = 0
        btn.onclick = function () {
            // 1.element.style      行内样式操作
            // 2.element.className  类名样式操作
            if (flag == 0) {
                btn.style.backgroundColor = 'purple'
                flag = 1
            } else {
                btn.style.backgroundColor = 'brown'
                flag = 0
            }
        }
    </script>
</body>

</html>

4.55 关闭二维码

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
<!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: 0;
            padding: 0;
        }

        .box {
            width: 150px;
            margin: 0 auto;
            margin-top: 200px;
            /* display: block; */
        }

        .btn {
            float: left;
            width: 25px;
            height: 25px;
            text-align: center;
            color: #ccc;
            border: 1px solid #ccc;
            box-sizing: border-box;
            border-right: none;
            cursor: pointer;
        }

        .pic {
            float: right;
            display: block;
            width: 125px;
            padding: 5px;
            text-align: center;
            border: 1px solid #ccc;
            box-sizing: border-box;
            color: orangered;
            font-size: 20px;
            line-height: 40px;
        }

        .pic img {
            width: 100px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="btn">x</div>
        <div class="pic">
            <span>淘宝二维码</span>
            <img src="./images/tao.png" alt="" srcset="">
        </div>
    </div>
    <script>
        // 1、获取元素
        var btn = document.querySelector('.btn')
        var box = document.querySelector('.box')
        // 2、注册事件
        btn.onclick = function () {
            box.style.display = 'none'
        }
    </script>
</body>

</html>

4.56 循环精灵图

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
<!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: 0;
            padding: 0;
        }

        .box {
            width: 200px;
            margin: 0 auto;
            position: relative;
            top: 200px;
        }

        ul {
            list-style-type: none;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }

        li {
            width: 50px;
            height: 60px;
            border: 1px solid #ccc;
            padding: 10px;
            box-sizing: border-box;
            text-align: center;
            font-size: 10px;
        }
        li span{
            display: block;
            width: 24px;
            height: 24px;
            text-align: center;
            background-color: blueviolet;
            margin-left: 2px;
            margin-bottom: 5px;
            background: url('./images/sprite.png') no-repeat;
        }
        li a{
            text-decoration: none;
            color: rgb(0, 0, 0);
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li><a href="#1"><span></span>info</a></li>
            <li><a href="#2"><span></span>info</a></li>
            <li><a href="#3"><span></span>info</a></li>
            <li><a href="#4"><span></span>info</a></li>
            <li><a href="#5"><span></span>info</a></li>
            <li><a href="#6"><span></span>info</a></li>
            <li><a href="#7"><span></span>info</a></li>
            <li><a href="#8"><span></span>info</a></li>
            <li><a href="#9"><span></span>info</a></li>
            <li><a href="#10"><span></span>info</a></li>
            <li><a href="#11"><span></span>info</a></li>
            <li><a href="#12"><span></span>info</a></li>
        </ul>
    </div>
    <script>
        // 1、获取元素
        var icon=document.querySelectorAll('span')
        for(var i=0;i<icon.length;i++) {
            // 让索引号 乘以 44 就是每个li 的背景y坐标  index就是我们的y坐标
            var index=i*44
            icon[i].style.backgroundPosition='0'+'-'+index+'px'
        }
    </script>
</body>

</html>

4.57 文本框事件

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
<!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>
        input {
            color: #999;
        }
    </style>
</head>

<body>
    <input type="text" name="" id="" value="phone">
    <script>
        // 1、获取元素
        var text = document.querySelector('input')
        // 2、注册事件 获得焦点事件
        text.onfocus = function () {
            if (this.value === 'phone') {
                this.value = ''
            }
            // 获得焦点文本颜色变深
            text.style.color='black'
        }
        // 3、失去焦点事件
        text.onblur = function () {
            if (this.value === '') {
                this.value = 'phone'
            }
            // 获得焦点文本颜色变浅
            text.style.color='#999'
        }
    </script>
</body>

</html>

4.58 仿新浪表单注册

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
<!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: 0;
            padding: 0;
        }
        .box{
            margin: 0 auto;
            width: 600px;
            margin-top: 200px;
        }
        .tips{
            display: inline-block;
            font-size:12px;
            color: #999;
            background: url('./images/mess.png') no-repeat;
            padding-left: 20px;
        }

        .wrong{
            color: red;
            background: url('./images/wrong.png') no-repeat;

        }
        .right{
            color: green;
            background: url('./images/right.png') no-repeat;
        }
    </style>
</head>

<body>
    <div class="box">
        <input type="password" name="" id="">
        <p class="tips">请输入6-16位密码</p>
    </div>
    <script>
        // 首先判断的事件是表单失去焦点 onblur
        // 如果输入正确则提示正确的信息颜色为绿色小图标变化
        // 如果输入不是6到16位，则提示错误信息颜色为红色 小图标变化
        // 因为里面变化样式较多，我们采取className修改样式
        // 1.获取元素
        var psd=document.querySelector('input');
        var tips=document.querySelector('.tips');
        // 首先判断的事件是表单失去焦点 onblur
        psd.onblur=function(){
            // 根据表单值的长度判断
            if(this.value.length<6||this.value.length>16){
                tips.className='tips wrong'
                tips.innerHTML='位数不对，请输入6-16位密码'
            }else{
                tips.className='tips right'
                tips.innerHTML='right'
            }
        }
    </script>
</body>

</html>

4.59 dark

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
<!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: 0;
            padding: 0;
            color: blueviolet;
        }

        body {
            transition: all .5s;
        }

        .switch {
            float: right;
            width: 50px;
            height: 25px;
            border: 1px solid rgb(0, 0, 0);
            border-radius: 25px;
            position: relative;
            top: 20px;
            right: 20px;
            padding: 1px;
            box-sizing: border-box;
            cursor: pointer;
            transition: all 1s;
        }

        .circle {
            display: block;
            position: absolute;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: black;
            transition: all 1s;
        }

        .change {
            border: 1px solid rgb(0, 0, 0);
            background-color: #fff;
        }

        .move {
            transform: translateX(25px);
        }
    </style>
</head>

<body>
    <div class="switch">
        <span class="circle"></span>
    </div>
    <script>
        let btn = document.querySelector('.switch')
        let move = document.querySelector('.circle')
        let flag = true
        btn.onclick = function () {
            if (flag) {
                document.body.style.backgroundColor = 'black'
                move.className = 'circle move'
                btn.className = 'switch change'
                flag = !flag
            } else {
                document.body.style.backgroundColor = ''
                move.className = 'circle'
                btn.className = 'switch'
                flag = !flag
            }
        }
    </script>
</body>

</html>

4.60 广告关闭

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
<!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: 0;
            padding: 0;
        }
        div {
            width: 100%;
            height: 80px;
            margin: 0 auto;
            background: url('./images/luzhou.jpg') no-repeat;
            background-size: contain;
            background-size: cover;
            position: relative;
        }
        a{
            position: absolute;
            display: block;
            width: 100%;
            height: 100%;
        }
        img{
            position: absolute;
            right: 0;
            background-color: antiquewhite;
        }
    </style>
</head>

<body>
    <div>
        <a href="#"></a>
        <img src="./images/close.jpg" alt="" srcset="">
    </div>
    <script>
        var btn=document.querySelector('img')
        var box=document.querySelector('div')
        btn.onclick=function(){
            box.style.display = 'none'
        }
    </script>
</body>

</html>

4.61 下拉菜单

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    ul {
        list-style: none;
    }

    li {
        width: 50px;
        height: 20px;
        text-align: center;
        border: 1px solid #ccc;
    }

    .none {
        display: none;
        margin-left: -41px;
    }
</style>

<body>
    <ul>
        <li class="btn">demo
            <ul class="none">
                <li class="li">1</li>
                <li class="li">2</li>
                <li class="li">3</li>
            </ul>
        </li>
    </ul>
    <script>
        var btn = document.querySelector('.btn')
        var block = document.querySelector('.none')
        var li = document.querySelectorAll('.li')
        btn.onmouseover = function () {
            block.style.display = 'block'
            li.style.color='red' 
        }
        btn.onmouseout = function () {
            block.style.display = 'none'

        }
    </script>
</body>

</html>

Solar-Rain程序 & 设计

随心所欲，不逾矩 ~