1.  //获取我们要操作的元素
    2.     var oDiv = document.getElementById('J-box');
    3.     var oUl = oDiv.getElementsByTagName('ul')[0];
    4.     var oLis = oDiv.getElementsByTagName('li'); //我这会获取的时候是不是新添加的
    5.     for(var i=0; i<oLis.length; i++){
    6.         oLis[i].onmouseover = function (){
    7.             this.style.backgroundColor = 'pink';
    8.         }
    9.         oLis[i].onmouseout = function (){
    10.             this.style.backgroundColor = '';
    11.         }
    12.     }
    13.     //1.利用动态创建元素节点和把它追加到页面中的方式实现数据绑定
    14. //    for(var i=0;i<ary.length;i++){
    15. //        var cur = ary[i];
    16. //        var oLi = document.createElement("li");
    17. //        oLi.innerHTML = "<span>" + (i+4) + "</span>"+cur.title;
    18. //        oUl.appendChild(oLi);
    19. //    }
    20.     //优势：把需要动态绑定的内容一个个的追加到页面中，对原来的元素没有任何的影响
    21.     //弊端：每当创建一个li，我们就添加到页面当中，引发一次DOM的回流，最后引发回流的次数过多，影响我们的性能
    23.     //2.字符串拼接的方式：首先循环需要绑定的数据，然后把需要动态绑定的标签以字符串的方式拼接
    24.     // 到一起，拼接完成后最好统一的追加到页面中 ->"字符串拼接绑定数据是我们以后工作中最常用的一种绑定数据的方式"
    26. //    var str=""
    27. //    for(var i=0;i<ary.length;i++){
    28. //        var cur = ary[i];
    29. //        str+="<li>"
    30. //        str+="<span>"+(i+4)+"</span>"
    31. //        str+=cur.title;
    32. //        str+="</li>"
    33. //    }
    34. //    oUl.innerHTML+=str; //oUl.innerHTML=oUl.innerHTML(把之前的三个li以字符串的方式获取到)+str；
    35. //   (拼接完成的整体还是字符串，最有把字符串统一的添加到页面中，浏览器还需要把字符串渲染成为对应的标签)
    36.     //弊端：我们把新拼接的字符串添加到#ul中，原有的三个li的鼠标滑过的效果都消失了(原来标签绑定的事件，都消失了)
    37.     //优势：事先把内容拼接好，最后统一添加到页面当中，只引发一次回流
    39.     //JS中DOM深入知识：
    40.     //回流(重排 reflow): 当页面中的HTML结构发生改变(增加、删除、位置发生改变...)，浏览器都需要重新的计算一遍
    41.     // 最新的DOM结构，重新的对当前的页面进行渲染
    43.     //重绘：某一个元素的部分样式发生改变了(背景颜色),浏览器只需要渲染当前的元素即可
    46.     //3. 文档碎片
    47. //    var frg = document.createDocumentFragment();
    48. //    for(var i=0;i<ary.length;i++){
    49. //        var cur =ary[i];
    50. //        var oLi = document.createElement("li");
    51. //        oLi.innerHTML="<span>"+ (i+4) +"</span>"+cur.title;
    52. //        frg.appendChild(oLi);
    53. //    }
    54. //    oUl.appendChild(frg);
    55. //    frg=null; // 手动释放堆内存