-
Notifications
You must be signed in to change notification settings - Fork 0
/
DOM.txt
248 lines (200 loc) · 8.7 KB
/
DOM.txt
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
详解JavaScript DOM中的Node节点(1)
在DOM（文档对象模型）中，HTML文档的层次结构被表示为树形结构，HTML文档的树形表示主要包含表示元素或标记的节点和标识文本串的节点构成。在JavaScript DOM中，Node常常被翻译成节点，下面我们通过实例，来了解一下Node的属性及方法。
Node的属性介绍：
==========================
nodeType：显示节点的类型
nodeName：显示节点的名称
nodeValue：显示节点的值
attributes：获取一个属性节点
firstChild：表示某一节点的第一个节点
lastChild：表示某一节点的最后一个子节点
childNodes：表示所在节点的所有子节点
parentNode：表示所在节点的父节点
nextSibling：紧挨着当前节点的下一个节点
previousSibling：紧挨着当前节点的上一个节点
Node有各种各样的节点，我们先花一些时间认识他们，同时一并了解nodeType，nodeName和nodeValue属性：
元素节点（Element）
==========================
◆nodeType：ELEMENT_NODE
◆nodeType值：1
◆nodeName：元素标记名
◆nodeValue：null
----------------------------------------------------------------------------
<body>
<div id = "t" ><span></span></div>
</body>
<script>
var d = document.getElementById("t");
document.write(d.nodeType);
document.write(d.nodeName);
document.write(d.nodeValue);
//显示 1 DIV null
</script>
----------------------------------------------------------------------------
属性节点
==========================
◆nodeType：ATTRIBUTE_NODE
◆nodeType值：2
◆nodeName：属性名
◆nodeValue：属性值
----------------------------------------------------------------------------
<body>
<div id = "t" name="aaa"><span></span></div>
</body>
<script>
var d = document.getElementById("t").getAttributeNode("name");
document.write(d.nodeType);
document.write(d.nodeName);
document.write(d.nodeValue);
//显示 2 name aaa
</script>
----------------------------------------------------------------------------
文本节点
==========================
◆nodeType：TEXT_NODE
◆nodeType值：3
◆nodeName：#text
◆nodeValue：文本内容
----------------------------------------------------------------------------
<body>
<div id = "t">bbb</div>
</body>
<script>
var d = document.getElementById("t").firstChild;
document.write(d.nodeType);
document.write(d.nodeName);
document.write(d.nodeValue);
//显示 3 #text bbb
</script>
----------------------------------------------------------------------------
CDATA文本节点（XML中传递文本的格式）
==========================
◆nodeType：CDATA_SECTION_NODE
◆nodeType值：4
◆nodeName：#cdata-section
◆nodeValue：CDATA文本内容
attributes属性，直接获取一个属性节点，注意这里要使用[]，保持IE和FF的兼容性。
----------------------------------------------------------------------------
<body name="ddd">
<div id = "t" name = "aaa"><span>aaa</span><span>bbb</span><span>ccc</span></div>
</body>
<script>
var d = document.getElementById("t").attributes["name"];
document.write(d.name);
document.write(d.value);
//显示 name aaa
</script>
----------------------------------------------------------------------------
firstChild和lastChild属性，表示某一节点的第一个和最后一个子节点：
==========================
----------------------------------------------------------------------------
<body>
<div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>
</body>
<script>
var d = document.getElementById("t");
document.write(d.firstChild.innerHTML);
document.write(d.lastChild.innerHTML);
//显示 aaa ccc
</script>
----------------------------------------------------------------------------
childNodes和parentNode属性，表示所在节点的所有子节点和所在节点的父节点，这里的childNodes注意是一个数组：
==========================
----------------------------------------------------------------------------
<body name="ddd">
<div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>
</body>
<script>
var d = document.getElementById("t");
document.write(d.childNodes[1].innerHTML);
document.write(d.parentNode.getAttribute("name"));
//显示 bbb ddd
</script>
----------------------------------------------------------------------------
nextSibling和previousSibling属性，分别表示在parentNode的childNodes[]数组中，紧挨着当前节点的上一个和下一个节点：
==========================
----------------------------------------------------------------------------
<body name="ddd">
<div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>
</body>
<script>
var d = document.getElementById("t").childNodes[1];
document.write(d.nextSibling.innerHTML);
document.write(d.previousSibling.innerHTML);
//显示 ccc aaa
</script>
----------------------------------------------------------------------------
Node的方法介绍：
==========================
◆hasChildNodes()：判定一个节点是否有子节点
◆removeChild()：去除一个节点
◆appendChild()：添加一个节点
◆replaceChild()：替换一个节点
◆insertBefore()：指定节点位置插入一个节点
◆cloneNode()：复制一个节点
◆normalize()：（不知）
hasChildNodes()方法：判定一个节点是否有子节点，有返回true，没有返回false
==========================
<body name="ddd">
<div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>
<div id = "m"></div>
</body>
<script>
alert(document.getElementById("t").hasChildNodes());
alert(document.getElementById("m").hasChildNodes());
// 第一个true，第二个false
</script>
removeChild()方法：去除一个节点：
==========================
<body name="ddd">
<div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>
</body>
<script>
var d = document.getElementById("t").firstChild;
document.getElementById("t").removeChild(d);
// <span>aaa</span>被去除
</script>
appendChild()方法：添加一个节点，如果文档树中已经存在该节点，则将它删除，然后在新位置插入。
==========================
<body name="ddd">
<div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>
</body>
<script>
var d = document.getElementById("t").firstChild;
document.getElementById("t").appendChild(d);
// <span>aaa</span>成了最后一个节点
</script>
replaceChild()方法：从文档树中删除（并返回）指定的子节点，用另一个节点来替换它。
==========================
<body name="ddd">
<div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>
</body>
<script>
var newd = document.createElement("span");
newd.innerHTML = "eee";
var oldd = document.getElementById("t").lastChild;
document.getElementById("t").replaceChild(newd,oldd);
// 最后一项成了 eee
</script>
insertBefore()方法：在指定节点的前面插入一个节点，如果已经存在，则删除原来的，然后在新位置插入。
==========================
<body name="ddd">
<div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>
</body>
<script>
var newd = document.createElement("span");
newd.innerHTML = "eee";
var where = document.getElementById("t").lastChild;
document.getElementById("t").insertBefore(newd,where);
// 在最后一项的前面多了一项 eee
</script>
cloneNode()方法：复制一个节点，该方法有一个参数，true表示同时复制所有的子节点，false表示近复制当前节点。
==========================
<body name="ddd">
<div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div><div id = "m"></div>
</body>
<script>
var what = document.getElementById("t").cloneNode(false).innerHTML;
document.getElementById("m").innerHTML = what;
// 增加了一个aaabbbccc
</script>