-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathhtml_dom.md
253 lines (195 loc) · 9.31 KB
/
html_dom.md
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
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
# HTML DOM(一)
DOM(Document Object Model)，定义了表示和操作HTML或XML文档的标准方法。DOM是在浏览器中加载的一个文档模型并且把文档表达为一棵节点树，节点树中每个节点表示文档的一部分。
DOM是网络中使用最多的一系列API，因为它允许在浏览器中运行的代码访问并操作文档中的每一个节点。可以创建、移动、修改节点。可以给节点注册事件并触发已注册事件，执行事件处理程序。
## DOM节点层次
DOM可以将HTML或XML文档表示成一个多节点的节点树。
如下HTML文档：
```
<!doctype html>
<html>
<head>
<title>DOM</title>
</head>
<body
<h1>DOM</h1>
<a href="#">Document Object Model</a>
</body>
</html>
```
文档节点是每个文档的根节点，上例中文档节点的一个子节点html元素，是文档的最外层元素，即文档元素。
文档中的每一段标记都可以通过树中节点表示：文档类型通过文档类型节点表示，HTML元素通过元素节点表示，特性通过特性节点表示，注释通过注释节点表示，所有类型节点都继承自基类型：Node类型。
*在HTML文档中，文档元素始终是html元素。*
### Node类型
DOM1级定义了一个Node接口，该接口作为Node类型实现的，JavaScript中的所有节点类型都继承自Node类型。
#### nodeType
Node类型中定义了12个数值常量，文档节点类型均在其中，每个节点nodeType属性值均在其中，如下HTML文档节点常见类型：
常量 | 描述
----------------------| -------------------
Node.ElEMENT_NODE(1) |元素节点
Node.ATTRIBUTE_NODE(2)|属性节点
Node.TEXT_NODE(3) |文本节点
Node.COMMENT_NODE(8) |注释节点
Node.DOCUMENT_NODE(9) |文档节点
Node.DOCUMENT_TYPE_NODE(10） |文档类型节点
Node.DOCUMENT_FRAGMENT_NODE(11) |文档片段节点
通过比较这些常量，可以很容易确定节点类型：
```
var node = document.getElementById('myNode');
if (node.nodeType == 1) {
console.log('元素节点');
}
```
#### nodeName与nodeValue
每个节点都有nodeName和nodeValue属性，保存着节点相关信息，比如元素节点，其nodeName属性值为元素标签名，nodeValue为null。
#### 节点关系
节点树中各节点之间存在着层级关系，主要表现为：父(parent)、子(child)、同胞(sibling)关系。
- parentNode
每个节点都有一个parentNode属性，该属性指向该节点在文档树中的父节点，如下：
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM</title>
</head>
<body>
<div id="dParent">
<p id="pChild">childNodes</p>
</div>
<script>
window.onload = function() {
var p = document.getElementById('pChild');
var d = document.getElementById('dParent');
console.log(p.parentNode === d); //输出true
}
</script>
</body>
</html>
```
- childNodes
每个节点也有一个childNodes属性，其值是一个NodeList对象：
> NodeList是一种类数组对象，保存着一组有序的节点，可以通过位置访问这些节点。
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM</title>
</head>
<body>
<div id="dParent">
<p id="pChild">childNodes one</p>
<!--comment -->
<p id="pChild2">childNodes two</p>
<p id="pChild3">childNodes three</p>
</div>
<script>
window.onload = function() {
var p = document.getElementById('pChild');
var d = document.getElementById('dParent');
console.log(d.childNodes.length);//输出9
console.log(d.childNodes[1] === p); //输出true
}
</script>
</body>
</html>
```
*注：IE8-环境下，d.childNodes.length输出4。*
childNodes有length属性，在Chrome/FireFox/IE9+环境下，其值包括父节点下的所有文本节点、元素节点和注释节点，此例中有五个文本节点，三个元素节点，一个注释节点；元素节点和注释节点读者一眼就能看出，那么那五个文本节点来自何处呢？我们试着把各元素节点和注释节点间的空格和换行删掉，就会发现文本节点少了，原来这里的五个文本节点来自于各p标签以及注释节点间的换行。
*注父节点的firstChild等于node.childNodes[0]，lastChild等于node.childNodes[node.childNodes.length - 1]。*
- previousSibling和nextSibling
previousSibling和nextSibling属性分别表示当前节点的相邻的前一个同胞节点，相邻的后一个同胞节点。同胞节点具有相同父节点。
- ownerDocument
该属性指向整个文档的文档节点，即文档根节点，如：
```
var p = document.getElementById('pChild');
console.log(p.ownerDocument);//输出#document文档节点
```
#### 操作节点
本节介绍操作节点的一些常用方法，如下：
方法 |描述
----------------|--------------------
appendChild |向某节点的childNodes列表末尾新增一个节点，返回新增节点。
insertBefore |在某节点的childNodes列表某特定位置插入节点，返回被插入节点
replaceChild |替换文档中某节点的子节点，返回要替换的节点。
removeChild |移除文档中某节点子节点，返回该移除节点。
cloneNode |复制某节点，返回该节点的一个副本。
- appendChild
```
<script>
window.onload = function() {
var p = document.getElementById('pChild');
var d = document.getElementById('dParent');
var node = document.createElement('p');
node.textContent = 'new Node';
var reNode1 = d.appendChild(node);
console.log(reNode1 === node); //输出true
var reNode2 = d.appendChild(p);
console.log(reNode2 === p); //输出true
};
</script>
```
若appendChild接收的节点参数是新创建的节点，则只在父节点的childNodes列表末尾新增一个节点；若参数是文档中某节点，则就是将该节点从原来位置移动到childNodes列表最后的位置。
- insertBefore
此方法接受两个参数：要插入的节点，参照节点；将待插入节点插入到参照节点前面，即变成参照节点的previousSibling属性指向的节点；若参照节点为null，则此方法等同于执行appendChild()。
```
<script>
window.onload = function() {
var p = document.getElementById('pChild');
var d = document.getElementById('dParent');
var node = document.createElement('p');
node.textContent = 'new Node';
var reNode1 = d.insertBefore(node, p);
console.log(reNode1 === node); //输出true
var reNode2 = d.insertBefore(p, null);
console.log(reNode2 === p); //输出true
};
</script>
```
若insertBefore接收的待插入节点参数是新创建的节点，则只在父节点的childNodes列表对应位置插入一个节点；若参数是文档中某节点，则就是将该节点从原来位置移动到childNodes列表的对应位置。
- replaceChild
此方法接受两个参数：要插入的节点，要替换的节点；此方法将要替换节点删除并返回。
```
<script>
window.onload = function() {
var p = document.getElementById('pChild');
var p2 = document.getElementById('pChild2');
var d = document.getElementById('dParent');
var node = document.createElement('p');
node.textContent = 'new Node';
var reNode1 = d.replaceChild(node, p);
console.log(reNode1 === p); //输出true
var reNode2 = d.replaceChild(p, p2);
console.log(reNode2 === p2); //输出true
};
</script>
```
若replaceChild接收的待插入节点参数是新创建的节点，则只替换要替换的节点；若参数是文档中某节点，则就是将该节点从原来位置移动到要替换的节点对应位置。
- removeChild
此方法接受一个参数：待移除的节点；将传入的节点移除并返回。
```
<script>
window.onload = function() {
var p = document.getElementById('pChild');
var d = document.getElementById('dParent');
var reNode1 = d.removeChild(p);
console.log(reNode1 === p); //输出true
};
</script>
```
- cloneNode
此方法创建调用此方法的节点的一个副本，接受一个参数：true | false，true表示深复制，即复制节点及其所有子节点；false表示浅复制，即只复制该节点。
```
<script>
window.onload = function() {
var d = document.getElementById('dParent');
var reNode1 = d.cloneNode(true);
console.log(reNode1.childNodes.length);//输出9
var reNode2 = d.cloneNode(false);
console.log(reNode2.childNodes.length);//输出0
console.log(reNode1 === d); //输出false
};
</script>
```
本篇介绍了HTML DOM、节点树、文档中所有类型节点的基类型Node类型及Node节点操作、下篇将介绍DOM中更多具体的节点类型及其相关操作。