-
Notifications
You must be signed in to change notification settings - Fork 27
/
Copy pathDom操作.html
78 lines (61 loc) · 1.85 KB
/
Dom操作.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>dom操作</title>
<link rel="stylesheet" href="">
</head>
<body>
<script>
let bodyy = document.querySelector('body');
let ul = document.createElement("ul");
bodyy.appendChild(ul);
/*
createElement() 创建dom元素
createTextNode()
createDocumentFragment() 文档片段接口 不会触发DOM树的重新渲染 该接口继承 Node 的全部方法 IE兼容性不好
提升性能重排一次 之前利用一个字符串来拼接dom元素然后重排渲染一次
*/
/*
旧方法 =>
appendChild(node) 添加元素
insertBefore(node1, node2) 插入元素
replaceChild(newNode, oldNode) 替换元素
removeChild(node) 删除元素
注意： 旧方法操作dom基本上都要通过parentNode父元素来调用
*/
// appendChild
let fragment = document.createDocumentFragment();
console.log(fragment)
for (let i = 0; i < 5; i++) {
let li = document.createElement("li"); // 创建dom标签
let text = document.createTextNode(i); // 创建text文本标签
// li.innerHTML = `li-${i}`;
li.appendChild(text)
fragment.appendChild(li);
}
ul.append(fragment)
// insertBefore
let p = document.createElement("p");
p.innerHTML = "insertBefore";
bodyy.insertBefore(p, ul);
// replaceChild
let h2 = document.createElement("h2");
h2.innerHTML = "replaceChild";
bodyy.replaceChild(h2, p)
// removeChild
bodyy.removeChild(ul)
</script>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
console.log("DOM fully loaded and parsed");
});
for(var i=0; i<1000000000; i++){
// 这个同步脚本将延迟DOM的解析。
// 所以DOMContentLoaded事件稍后将启动。
}
</script>
<p>DOM fully loaded and parsed</p>
</body>
</html>