DOM映射

发表于

DOM映射

  • 页面中的元素通过DOM方法来获取回来的集合，这个集合任然和页面中的元素存在这种一一对应的关系就是DOM映射,并且及时这个元素暂时不存在那么这变量lis集合任然会随着页面内li的增加而增加，减少而减少
  • dom回流：只要页面中的元素发生了位置上的改变（增加，删除）都会引起dom回流。
  • dom重绘：一般就是元素样式的改变会引起重绘。

    动态创建和innerHTMl

  • 动态创建的范式不会影响原有元素的任何属性，但操作不便还有可能引起多次回流；
    1
    2
    3
    4
    5
    6
    //1. 在页面中原有的基础上再增加4个；-->不会破坏原有元素的属性
    for (i = 5; i < 9; i++) {
        var li = document.createElement("li");
        li.innerHTML += i;
        list.appendChild(li);
    }
1
2
3
4
5
var frg = document.createDocumentFragment(); //创建一个文档碎片
  for(i = 0;i< a.length;i++){
      frg.appendChild(a[i]); //循环吧已经排序好的这些li重新添加到页面中 =-》页面中多了元素还是调换了位置
  }
   list.appendChild(frg); //将包含所有li的文档碎片，放到list里面；
  • innerHTML的范式：

排序li的代码

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,body,ul,li{
            margin:0;
            padding: 0;
            list-style: none;
        }
        #list{
            margin: 100px auto;
            width: 500px;
            border:3px solid blue;
            text-align: center;
            line-height: 30px;
        }
        #list li{
            height:30px;
            background: lime;
            margin:1px 0;
        }
    </style>
</head>
<body>
<ul id="list">
    <li>1</li>
    <li>3</li>
    <li>2</li>
    <li>4</li>
</ul>
<script src="../../utils.js"></script>
<script>
     var list = document.getElementById("list");
     var lis = list.getElementsByTagName("li");
     //通过dom方法获取回来的集合；
//     console.log(u)
     var a =utils.toArray(lis); //把数组排序
    console.log(lis);  //数组集合 --》 依然和页面内的li元素存在这种一一对应的关系
    for(var i = 0;i< lis.length;i++){
        lis[i].onmouseover = function () {
            this.style.background = "red";
        };
        lis[i].onmouseout = function () {
            this.style.background = "lime";
        };
    }
     a.sort(function(a,b){
         return a.innerHTML-b.innerHTML;
     });
     var frg = document.createDocumentFragment(); //创建一个文档碎片
    for(i = 0;i< a.length;i++){
        frg.appendChild(a[i]); //循环吧已经排序好的这些li重新添加到页面中 =-》页面中多了元素还是调换了位置
    }
     list.appendChild(frg); //将包含所有li的文档碎片，放到list里面；
     //在页面中原有的基础上再增加4个；-->不会破坏原有元素的属性
     for (i = 5; i < 9; i++) {
         var li = document.createElement("li");
         li.innerHTML += i;
         list.appendChild(li);
     }
     //innerHTML的方式
     //会破坏原有元素的属性
/*     var str = "";
     for(i = 9 ;i<=10;i++){
         str = "<li>"+i+"</li>";
         list.innerHTML+=str;
     }
     */
     frg = null;//释放内存
    //经过验证就是把原有元素重新调换位置 --》哪些增加的属性依然还在
    //说明使用appendChild(动态添加)的方式不会影响元素的任何属性，曾经绑定过的事件现在还存在
</script>
</body>
</html>