运维八一
lyndon
2022-08-04
目录

js之DOM

# 1. DOM 介绍

**文档对象模型（Document Object Model，DOM）**是一种用于HTML编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。

更直白一点讲：DOM相当于是一个模块，提供了关于HTML文档中对标签进行操作的功能，JavaScript结合DOM可以对HTML中的标签进行操作。

# 2. 选择器

DOM中提供了一些列的选择器用于在HTML文档中找到指定的相关标签对象。

  • 直接查找
document.getElementById(arg) 	// 根据ID获取一个标签对象
document.getElementsByClassName(arg)	// 根据class属性获取标签对象集合
document.getElementsByName(arg)	// 根据name属性值获取标签对象集合
document.getElementsByTagName(arg)	// 根据标签名获取标签对象集合
1
2
3
4
  • 间接查找
var tag = document.getElementById(arg);
tag.parentElement           // 找当前标签对象的父标签对象
tag.children                // 找当前标签对象的所有子标签对象
tag.firstElementChild       // 找当前标签对象的第一个子标签对象
tag.lastElementChild        // 找当前标签对象最后一个子标签对象
tag.nextElementtSibling     // 找当前标签对象下一个兄弟标签对象
tag.previousElementSibling  // 找当前标签对象上一个兄弟标签对象
1
2
3
4
5
6
7

# 案例：表格中删除案例

image-20220822224636044

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JavaScript学习</title>
        <style>        
            table {/*边框合并*/            
                border-collapse: collapse;
            }        
            table th, table td {            
                border: 1px solid #ddd;            
                padding: 8px;
            }        
            table th {            
                font-weight: bold;}
        </style>
    </head>
    <body>
        <table>
            <thead>
                <tr>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>郭德纲</td>
                    <td>男</td>
                    <td>
                        <input type="button" value="删除" onclick="deleteRow(this);">
                    </td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>于谦</td>
                    <td>女</td>
                    <td>
                        <input type="button" value="删除" onclick="deleteRow(this);">
                    </td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>烧饼</td>
                    <td>男</td>
                    <td>
                        <input type="button" value="删除" onclick="deleteRow(this);">
                    </td>
                </tr>
            </tbody>
        </table>
        <script type="text/javascript">
            /*    删除表格中当前行的数据     */
            function deleteRow(self) {
                var rowTr = self.parentElement.parentElement;        
                rowTr.remove();
            }
        </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

# 3. 文本操作

对标签内部文本进行操作时，可以通过 innerText 和 innerHTML来进行。

  • innerText

    标签对象.innerText，读取标签内容（仅文本）；

    标签对象.innerText="武"，修改标签内容（仅文本）。

  • innerHTML

    标签对象.innerHTML，读取标签内容（含标签）；

    标签对象.innerText="<a href='#'>武</a>"，修改标签内容（可标签、课文本）。

# 案例：读取表格文本内容

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JavaScript学习</title>
        <style>        
            table {/*边框合并*/            
                border-collapse: collapse;
            }
        table th, table td {            
            border: 1px solid #ddd;            
            padding: 8px;
            }
        table th {            
            font-weight: bold;
            }
        </style>
    </head>
    <body>
        <table>
            <thead>
                <tr>
                    <th>ID</th>
                    <th>网站</th>
                    <th>介绍</th>
                    <th>读取</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>
                        <a href="http://www.baidu.com">百度</a>
                    </td>
                    <td>百度是一个流氓网站。</td>
                    <td>
                        <input type="button" value="读取网站innerText" onclick="readSite(this)">
                        <input type="button" value="读取网站innerHTML" onclick="readSummary(this)">
                    </td>
                </tr>
            </tbody>
        </table>
        <script type="text/javascript">function readSite(self) {
                var tdTag = self.parentElement.previousElementSibling.previousElementSibling;
                console.log(tdTag.innerText);
            }
            function readSummary(self) {
                var tdTag = self.parentElement.previousElementSibling.previousElementSibling;  
                console.log(tdTag.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

# 4. 值操作

值操作针对与用户交互相关的标签，其中内部使用value属性进行操作。

# 4.1 文本框

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JavaScript学习</title>
    </head>
    <body>
        <input id="user" type="text" value="张鹤伦">
        <script type="text/javascript">
            var userTag = document.getElementById('user');        
            console.log('获取输入框中的值：',userTag.value);// 修改input中的值        
            userTag.value = "骚浪贱";        
            console.log('获取修改完输入框中的值：',userTag.value);
        </script>
    </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 4.2 多行文本框

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JavaScript学习</title>
    </head>
    <body>
        <h1>文章</h1>
        <textarea> id="article" cols="30" rows="10">从前有座山，山里有座庙。</textarea>
        <input type="button" onclick="showArticle();" value="点击获取"/>
        <input type="button" onclick="setArticle();" value="点击设置"/>
        <script type="text/javascript">
            function showArticle() {// 获取textarea的值        
                console.log(document.getElementById('article').value);
            }
            function setArticle() {// 设置textarea的值        
                document.getElementById('article').value = "秃驴";}
        </script>
    </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 4.3 下拉框

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JavaScript学习</title>
    </head>
    <body>
        <h1>城市</h1>
        <select id="city">
            <option value="10">上海</option>
            <option value="20">北京</option>
            <option value="30">深圳</option>
        </select>
        <input type="button" onclick="showCity();" value="点击获取选择"/>
        <input type="button" onclick="setCity();" value="点击设置"/>
        <script type="text/javascript">
            function showCity() {// 获取select下拉框选中项的值
                var cityTag = document.getElementById('city');        
                console.log(cityTag.value);
            }
            function setCity() {// 设置select下拉框选中项的值，让select去选中。        
                document.getElementById('city').value = "30";
            }
        </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

# 4.4 单选框

通过value可以取值。但在应用时常常是以选择形式出现，所以在使用过程中还会去判断他是否已被选中。

扩展：标签对象.checked 可以对选中状态进行读取和设置。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JavaScript学习</title>
    </head>
    <body>
        <input type="radio" name="gender" value="11"/>男
        <input type="radio" name="gender" value="33"/>女
        <input type="radio" name="gender" value="66"/>中
        <input type="button" onclick="showGender();" value="点击获取选择"/>
        <input type="button" onclick="setGender();" value="点击设置选择状态"/>
        <script type="text/javascript">
            function showGender() {
                var radios = document.getElementsByName('gender');// 循环所有的radio标签，找到被选中的radio，获取他的value值。
                for (var i = 0; i < radios.length; i++) {if (radios[i].checked) {// 弹出选中值                
                    console.log(radios[i].value);// 选中后退出循环break;
                }}
            }
            function setGender(){
                var radios = document.getElementsByName('gender');// 循环所有的radio标签，找到被选中的radio，获取他的value值。
                for (var i = 0; i < radios.length; i++) {if (radios[i].value === "33") {              
                    radios[i].checked = true;
                }}
            }
        </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

# 4.5 复选框

通过value可以取值。但在应用时常常是以多选形式出现，所以在使用过程中还会去判断他是否已被选中。

扩展：标签对象.checked 可以对选中状态进行读取和设置。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JavaScript学习</title>
    </head>
    <body>
        <h1>爱好</h1>
        <input class="hobby" type="checkbox" value="1">足球
        <input class="hobby" type="checkbox" value="2">篮球
        <input class="hobby" type="checkbox" value="3">乒乓球
        <input type="button" onclick="showHobby();" value="点击获取选择"/>
        <input type="button" onclick="setHobby();" value="点击设置选择"/>
        <script type="text/javascript">
            function showHobby() {
                var valueList = [];
                var checkboxList = document.getElementsByClassName('hobby');
                for (var i = 0; i < checkboxList.length; i++) {if (checkboxList[i].checked) {// 弹出选中值                
                    valueList.push(checkboxList[i].value);
                }}        
                console.log(valueList);
            }
            function setHobby() {
                var checkboxList = document.getElementsByClassName('hobby');
                for (var i = 0; i < checkboxList.length; i++) {if(checkboxList[i].value === '1' || checkboxList[i].value === '3') {                
                    checkboxList[i].checked = true;
                }else{                
                    checkboxList[i].checked = 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

# 案例：表格多选、反选、取消

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JavaScript学习</title>
        <style>        
            table {/*边框合并*/            
                border-collapse: collapse;
            }
        table th, table td {            
            border: 1px solid #ddd;            
            padding: 8px;
            }
        table th {            
            font-weight: bold;
            }
        </style>
    </head>
    <body>
        <div>
            <input type="button" value="全选" onclick="checkAll();"/>
            <input type="button" value="取消" onclick="cancelAll();"/>
            <input type="button" value="反选" onclick="reverseCheck();"/>
        </div>
        <table>
            <thead>
                <tr>
                    <th>选择</th>
                    <th>姓名</th>
                    <th>性别</th>
                </tr>
            </thead>
            <tbody id="tableBody">
                <tr>
                    <td>
                        <input type="checkbox" value="1"/>
                    </td>
                    <td>郭德纲</td>
                    <td>男</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" value="2"/>
                    </td>
                    <td>于谦</td>
                    <td>女</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" value="2"/>
                    </td>
                    <td>烧饼</td>
                    <td>男</td>
                </tr>
            </tbody>
        </table>
        <script type="text/javascript">
            /* 全选 */
            function checkAll() {
                var trTagList = document.getElementById('tableBody').children;
                for (var i = 0; i < trTagList.length; i++) {
                    var trTag = trTagList[i];
                    var inputTag = trTagList[i].firstElementChild.firstElementChild;            
                    inputTag.checked = true;
                }}
            /* 取消 */
            function cancelAll() {
                var trTagList = document.getElementById('tableBody').children;
                for (var i = 0; i < trTagList.length; i++) {
                    var trTag = trTagList[i];
                    var inputTag = trTagList[i].firstElementChild.firstElementChild;            
                    inputTag.checked = false;
                }}
            /* 取消 */
            function reverseCheck() {
                var trTagList = document.getElementById('tableBody').children;
                for (var i = 0; i < trTagList.length; i++) {
                    var trTag = trTagList[i];
                    var inputTag = trTagList[i].firstElementChild.firstElementChild;
                    // inputTag.checked = ! inputTag.checked;            
                    inputTag.checked = inputTag.checked ? false : true;
                }}
        </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

# 5. class 属性操作

DOM中主要提供了三个帮助操作class属性值的功能：

  • 标签对象.className，class属性对应的值直接操作；
  • 标签对象.classList.remove(cls)，class属性对应值删除某个样式；
  • 标签对象.classList.add(cls)，class属性中添加样式。

# 案例：模态对话框

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>        
            body{            
                margin: 0;
            }
            .container{            
                width: 980px;            
                margin: 0 auto;
            }
            .header{            
                height: 48px;            
                background-color: #499ef3;
            }
            .shade{            
                position: fixed;            
                top: 0;            
                bottom: 0;            
                left: 0;            
                right: 0;            
                background-color: black;            
                opacity: 0.7;
            }
            .login{            
                width: 400px;            
                height: 300px;            
                background-color: white;            
                border: 1px solid #dddddd;            
                position: fixed;            
                top: 60px;            
                left: 50%;            
                margin-left: -200px;
            }
            .hide{            
                display: none;
            }
        </style>
    </head>
    <body>
        <div class="header">
            <div style="float: right;margin: 10px;">
                <a onclick="showDialog();" style="padding: 5px 10px;background-color: goldenrod;color: white;">登录</a>
            </div>
        </div>
        <div class="body">
            <div class="container" style="text-align: center">
                <img src="https://images.cnblogs.com/cnblogs_com/wupeiqi/662608/o_big_girl.png" alt="">
            </div>
        </div>
        <!--遮罩层-->
        <div id="shade" class="shade hide"></div>
        <!--登录框-->
        <div id="login" class="login hide">
            <h2 style="text-align: center">用户登录</h2>
            <a onclick="hideDialog();" style="padding: 5px 10px;background-color: cornflowerblue;color: white;">关闭</a>
        </div>            
        <script type="text/javascript">
            function showDialog() {            
                document.getElementById('shade').classList.remove('hide');           
                document.getElementById('login').classList.remove('hide');
            }
            function hideDialog() {            
                document.getElementById('shade').classList.add('hide');       
                document.getElementById('login').classList.add('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

# 6. style 样式操作

如果想要对样式操作的粒度更细一些，可以使用style样式操作，比class属性对样式的操作粒度更细。

例如：修改下标签的背景颜色

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JavaScript学习</title>
    </head>
    <body>
        <div id="header" style="height: 48px;background-color: red;"></div>
        <script type="text/javascript">        
            document.getElementById('header').style.backgroundColor = 'green';
        </script>
    </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13

# 案例：点赞+1效果

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JavaScript学习</title>
        <style>        
            body {            
                margin: 0;
            }
            .container {            
                width: 980px;            
                margin: 0 auto;}
            .item {
                height: 120px;            
                border: 1px solid #dddddd;            
                margin-top: 20px;            
                padding: 10px;
            }
            .item .title {            
                margin-bottom: 10px;            
                font-weight: bold;}
            .item img {            
                width: 60px;            
                height: 60px;
            }
            .item .favor {            
                position: relative;            
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item">
                <div class="title">震惊了...</div>
                <img src="https://images.cnblogs.com/cnblogs_com/wupeiqi/662608/o_20130809170025.png" alt="">
                <div class="favor" onclick="doFavor(this);">赞</div>
            </div>
            <div class="item">
                <div class="title">冷酷无情，无理取闹...</div>
                <img src="https://images.cnblogs.com/cnblogs_com/wupeiqi/662608/o_20130809170025.png" alt="">
                <div class="favor" onclick="doFavor(this);">赞</div>
            </div>
        </div>
        <script type="text/javascript">
            function doFavor(self) {
                var plusTag = document.createElement('span');
                var fontSize = 10;
                var marginLeft = 10;
                var marginTop = 10;
                var opacity = 1;
                plusTag.innerText = "+1";        
                plusTag.style.color = 'green';        
                plusTag.style.position = 'absolute';        
                plusTag.style.fontSize = fontSize + 'px';        
                plusTag.style.marginLeft = marginLeft + 'px';        
                plusTag.style.marginTop = marginTop + 'px';        
                plusTag.style.opacity = opacity;
                self.appendChild(plusTag);
                var interval = setInterval(function () {            
                    fontSize += 5;            
                    marginLeft += 5;            
                    marginTop -= 5;            
                    opacity -= 0.2;            
                    plusTag.style.fontSize = fontSize + 'px';            
                    plusTag.style.marginLeft = marginLeft + 'px';            
                    plusTag.style.marginTop = marginTop + 'px';            
                    plusTag.style.opacity = opacity;
                    if (opacity <= 0) {                
                        self.removeChild(plusTag);                
                        clearInterval(interval);
                    }
                }, 100)
                }
        </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

# 7. 事件

DOM中可以为标签设置事件，给指定标签绑定事件之后，只要对应事件被触发，就会执行对应代码。常见事件有：

  • onclick，单击时触发事件
  • ondblclick，双击触发事件
  • onchange，内容修改时触发事件
  • onfocus，获取焦点时触发事件
  • onblur，失去焦点触发事件
  • 其他事件

image-20220822224655727

# 案例：修改下拉框触发change事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'/>
        <title>DOM学习</title>
    </head>
    <body>
        <select id="city" onchange="changeEvent(this);">
            <option value="10">普通青年</option>
            <option value="20">文艺青年</option>
            <option value="30">二逼青年</option>
        </select>
        <script type="text/javascript">
            function changeEvent(self) {        
                console.log(self.value);
            }
        </script>
    </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 案例：左侧菜单点击切换

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

.header {
            height: 48px;
            background-color: #499ef3;
}

.body .menu {
            position: fixed;
            top: 48px;
            left: 0;
            bottom: 0;
            width: 220px;
            border-right: 1px solid #dddddd;
            overflow: scroll;
}

.body .content {
            position: fixed;
            top: 48px;
            right: 0;
            bottom: 0;
            left: 225px;
/* 超出范围的话，出现滚轮 */
            overflow: scroll;
}

.body .menu .title {
            padding: 8px;
            border-bottom: 1px solid #dddddd;
            background-color: #5f4687;
            color: white;

}

.body .menu .child {
            border-bottom: 1px solid #dddddd;
}

.body .menu .child a {
            display: block;
            padding: 5px 10px;
            color: black;
            text-decoration: none;
}

.body .menu .child a:hover {
            background-color: #dddddd;

}

.hide {
            display: none;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="body">
<div class="menu">
<div class="item">
<div class="title" onclick="showMenu(this);">国产</div>
<div class="child">
<a href="#">少年的你</a>
<a href="#">我不是药神</a>
<a href="#">我和我的祖国</a>
</div>
</div>
<div class="item">
<div class="title" onclick="showMenu(this);">欧美</div>
<div class="child hide ">
<a href="#">战争之王</a>
<a href="#">华尔街之狼</a>
<a href="#">聚焦</a>
</div>
</div>
<div class="item">
<div class="title" onclick="showMenu(this);">韩国</div>
<div class="child hide">
<a href="#">坏家伙们</a>
<a href="#">寄生虫</a>
<a href="#">燃烧</a>
</div>
</div>
</div>
<div class="content"></div>
</div>

<script type="text/javascript">

function showMenu(self) {
var childList = document.getElementsByClassName('child');
for (var i = 0; i < childList.length; i++) {
            childList[i].classList.add('hide');
}
        self.nextElementSibling.classList.remove('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
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

# 案例：请输入搜索关键字

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title>DOM</title>

<style>
.gray {
            color: gray;
}

.black {
            color: black;
}
</style>

</head>
<body>
<input type='text' class='gray' value='请输入关键字' onfocus='getFocus(this);' onblur='leave(this);'/>

<script type="text/javascript">

function getFocus(self) {
        self.className = 'black';
if (self.value === '请输入关键字' || self.value.trim().length === 0) {
            self.value = '';
}
}

function leave(self) {

if (self.value.length === 0) {
            self.value = '请输入关键字';
            self.className = 'gray';
} else {
            self.className = 'black';
}
}
</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
上次更新: 2022/08/25, 10:11:06
JavaScript
js之BOM

← js之BOM→

最近更新
01
ctr和crictl显示镜像不一致
03-13
02
alpine镜像集成常用数据库客户端
03-13
03
create-cluster
02-26
更多文章>
Theme by Vdoing | Copyright © 2015-2024 op81.com
苏ICP备18041258号-2