DOM(Document Object Model)

文档对象模型

概念

将标记语言文档（HTML,XML…）的各个部分，封装为对象，可以使用这些对象，对标记语言文档进行CRUD动态操作

W3C 文档对象模型 （DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”W3C DOM标准被分为 3 个不同的部分

  • 核心DOM-针对任何结构化文档的标准模型
    • Document：文档对象
    • Element：元素对象
    • Attribute：属性对象
    • Text：文本对象
    • Comment：注释对象
    • Node：节点对象，是其他5个对象的父对象
  • XML DOM - 针对 XML 文档的标准模型
  • HTML DOM - 针对 HTML 文档的标准模型

HTML DOM 树

htmlDom

Document对象

对象创建

  • window.document
  • document

方法

获取Element对象

  • getElementById() 查找具有指定的唯一 ID 的元素。
  • getElementsByTagName() 返回所有具有指定名称的元素节点。
  • getElementByClassName 根据Class属性值获取元素对象数组并返回
  • getElementByName() 根据name属性值获取元素对象数组并返回

创建其他DOM对象

  • createAttribute(name) 创建拥有指定名称的属性节点，并返回新的 Attr 对象。
  • createComment() 创建注释节点。
  • createElement() 创建元素节点。
  • createTextNode() 创建文本节点。

Element元素对象

通过document获取和创建

方法

  • removeAttribute() 删除指定的属性。
  • setAttribute() 添加新属性。

Node节点对象

节点对象代表文档树中的一个节点。节点可以是元素节点、属性节点、文本节点，或者也可以是任何一种节点。

注意

虽然所有的对象均能继承用于处理父节点和子节点的属性和方法，但是并不是所有的对象都拥有父节点或子节点。例如，文本节点不能拥有子节点，所以向类似的节点添加子节点就会导致 DOM 错误。

方法

对DOM数进行增删改查

  • appendChild() 向节点的子节点列表的结尾添加新的子节点。
  • removeChild() 删除（并返回）当前节点的指定子节点。
  • replaceChild() 用新节点替换一个子节点。

属性

  • parentNode 返回节点的父节点。

以上方法和属性虽然都是介绍的Node节点，但由于Node节点是其他五种对象的父对象，所以其他几种对象都可以使用

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--设置样式-->
    <style>
        div{
            border: 1px solid red;
        }
        #div1{
            width: 200px;
            height: 200px;
        }
        #div2{
            width: 100px;
            height: 100px;
        }
        #div3{
            width: 50px;
            height: 50px;
        }
    </style>
</head>
<body>
    <!--删除内部的div2-->
    <div id="div1">
        <div id="div2">
            div2
        </div>
        div1
    </div>
    
    <!--在href中填入#或javascript:void(0);都可以使超链接对象不跳转，只保留点击效果-->
    <a href="#" id="del">删除子节点</a>
    <a href="javascript:void(0);" id="insert">添加子节点</a>

    <script>
        var div1=document.getElementById("div1");
        var div2=document.getElementById("div2");
        
        var del=document.getElementById("del");
        var insert=document.getElementById("insert");

        //删除div1内部的div2
        del.onclick=function(){
            div1.removeChild(div2);
        }
        //向div1内部添加子节点div3
        var div3=document.createElement("div");  //创建子节点
        div3.setAttribute("id","div3")  //设置节点ID属性，再在CSS中设置节点其他样式
        insert.onclick=function(){
            div1.appendChild(div3);
        }

    </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
115
116
117
118
119
120
121
122
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        table{
            border: 1px solid;
            margin: auto;
            width: 500px;
        }

        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            text-align: center;
            margin: 50px;
        }

    </style>

</head>
<body>
    <div>
        <input type="text" id="num" placeholder="请输入ID">
        <input type="text" id="name" placeholder="请输入姓名">
        <input type="text" id="sex" placeholder="请输入性别">
        <input type="button" value="添加" id="in_btn">
    </div>
    <table id="stu_table">
        <caption>学术信息表</caption>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>操作</th>
        </tr>

        <tr>
            <td>1</td>
            <td>Leslie</td>
            <td>man</td>
            <td><a href="#" onclick="delTr(this)">删除</a></td>
        </tr>

        <tr>
            <td>2</td>
            <td>John</td>
            <td>man</td>
            <td><a href="#" onclick="delTr(this)">删除</a></td>
        </tr>

        <tr>
            <td>3</td>
            <td>Jessica</td>
            <td>woman</td>
            <td><a href="#" onclick="delTr(this)">删除</a></td>
        </tr>
        

    </table>

    <script>
        //添加操作实现
        var insert_btn=document.getElementById("in_btn");  //获取插入按钮
        var table=document.getElementById("stu_table");  //获取表格对象

        //插入按钮操作
        insert_btn.onclick=function(){
            //获取输入框中的值
            var num=document.getElementById("num").value;
            var name=document.getElementById("name").value
            var sex=document.getElementById("sex").value;
            //创建ID的td节点
            var td_id=document.createElement("td");  //创建节点
            var text_id=document.createTextNode(num);  //创建文本子节点
            td_id.appendChild(text_id);  //插入子节点
            //创建姓名的td节点
            var td_name=document.createElement("td");
            var text_name=document.createTextNode(name);
            td_name.appendChild(text_name);
            //创建性别的td节点
            var td_sex=document.createElement("td");
            var text_sex=document.createTextNode(sex);
            td_sex.appendChild(text_sex);

            //创建删除按钮的td节点
            var td_delete=document.createElement("td");
            var del=document.createElement("a");  //创建超链接类型的子节点
            del.href="#";  //定义跳转链接为#，使a标签只具备点击效果，没有跳转效果
            del.setAttribute("onclick","delTr(this)");
            var text_del=document.createTextNode("删除");  
            del.appendChild(text_del);  //插入删除的文本子节点
            td_delete.appendChild(del);  //向td节点中插入超链接子节点

            var tr_stu=document.createElement("tr");  //创建tr类型节点
            //逐个插入四个子节点
            tr_stu.appendChild(td_id);  
            tr_stu.appendChild(td_name);
            tr_stu.appendChild(td_sex);
            tr_stu.appendChild(td_delete);
            //向表格中插入tr子节点
            table.appendChild(tr_stu);

        }

        //定义删除函数
        function delTr(obj){
            var stuTr=obj.parentNode.parentNode;  //通过链接节点获取当前信息栏对象
            var table=stuTr.parentNode;    //通过当前栏对象获取table对象

            table.removeChild(stuTr);  //删除指定子节点
        }

    </script>
    
</body>
</html>

HTML DOM

主要功能

  • 标签体的设置和获取：innerHTML
  • 使用html元素对象的属性
  • 控制样式

innerHTML

innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。

使用innerHTML简化之前的动态表格实例

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>dynamicTable</title>

    <style>
        table{
            border: 1px solid;
            margin: auto;
            width: 500px;
        }

        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            text-align: center;
            margin: 50px;
        }

    </style>

</head>
<body>
    <div>
        <input type="text" id="num" placeholder="请输入ID">
        <input type="text" id="name" placeholder="请输入姓名">
        <input type="text" id="sex" placeholder="请输入性别">
        <input type="button" value="添加" id="in_btn">
    </div>
    <table id="stu_table">
        <caption>学术信息表</caption>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>操作</th>
        </tr>

        <tr>
            <td>1</td>
            <td>Leslie</td>
            <td>man</td>
            <td><a href="#" onclick="delTr(this)">删除</a></td>
        </tr>

        <tr>
            <td>2</td>
            <td>John</td>
            <td>man</td>
            <td><a href="#" onclick="delTr(this)">删除</a></td>
        </tr>

        <tr>
            <td>3</td>
            <td>Jessica</td>
            <td>woman</td>
            <td><a href="#" onclick="delTr(this)">删除</a></td>
        </tr>
        

    </table>

    <script>
        //添加操作实现
        var insert_btn=document.getElementById("in_btn");  //获取插入按钮
        var table=document.getElementById("stu_table");  //获取表格对象

        //插入按钮操作
        insert_btn.onclick=function(){
            //获取输入框中的值
            var num=document.getElementById("num").value;
            var name=document.getElementById("name").value
            var sex=document.getElementById("sex").value;
            
            var tr_stu=document.createElement("tr");  //创建tr类型节点
            //使用innerHTML向tr中追加标签
            tr_stu.innerHTML="<td>"+num+"</td>";  //这里只是展示=是直接赋值，+=可以实现追加
                                                  //实际上这四行完全可以放到一行代码（只调用一次innerHTML）
            tr_stu.innerHTML+="<td>"+name+"</td>";
            tr_stu.innerHTML+="<td>"+sex+"</td>";
            tr_stu.innerHTML+="<td><a href='#' onclick='delTr(this)'>删除</a></td>"

            //向表格中插入tr子节点
            table.appendChild(tr_stu);

        }

        //定义删除函数
        function delTr(obj){
            var stuTr=obj.parentNode.parentNode;  //通过链接节点获取当前信息栏对象
            var table=stuTr.parentNode;    //通过当前栏对象获取table对象

            table.removeChild(stuTr);  //删除指定子节点
        }

    </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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .d1{
            border: 1px solid blue;
            width: 100px;
            height: 100px;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div id="div1">
        div1
    </div>

    
    <div id="div2">
        div2
    </div>

    <script>
        var div1=document.getElementById("div1");
        div1.onclick=function(){
            //设置样式方式1
            div1.style.border="1px solid red";
            div1.style.width="200px";
            //类似font-size这种样式的设置方式与命名方式如下
            div1.style.fontSize="30px";
        }

        var div2=document.getElementById("div2");
        div2.onclick=function(){
            //设置样式方式2
            //提前定义好类选择器样式，通过元素的className属性来设置其class属性
            div2.className="d1";
        }

    </script>
</body>
</html>

事件

概念

某些组件（事件源）被执行了某些操作（事件）后，触发某些代码（监听器）执行

事件

某些操作，如单击，双击，鼠标移动，键盘操作等

事件源

被监听的组件，如文本输入框，按钮等

监听器

一段代码

注册监听

将事件，事件源和监听器绑定在一起

常见事件

  • 点击事件
    • onclick 当用户点击某个对象时调用的事件句柄。
    • ondblclick 当用户双击某个对象时调用的事件句柄。
  • 焦点事件
    • onblur 元素失去焦点。
    • onfocus 元素获得焦点。
  • 加载事件
    • onload 一张页面或一幅图像完成加载。
  • 鼠标事件
    • onmousedown 鼠标按钮被按下。
    • onmousemove 鼠标被移动。
    • onmouseout 鼠标从某元素移开。
    • onmouseover 鼠标移到某元素之上。
    • onmouseup 鼠标按键被松开。
  • 键盘事件
    • onkeydown 某个键盘按键被按下。
    • onkeypress 某个键盘按键被按下并松开。
    • onkeyup 某个键盘按键被松开。
  • 选中和改变
    • onchange 域的内容被改变。
    • onselect 文本被选中。
  • 表单事件
    • onsubmit 确认按钮被点击。
    • onreset 重置按钮被点击。

演示网址