/*
* Dom回流：（重排reflow）：是指html文档结构发生改变（增加删除元素，位置改变等。。），然后浏览器重新渲染html页面
* Dom重绘：是指某一个元素的部分样式变了，浏览器只需要渲染那些改变的样式。例如：背景颜色
* Dom映射：js中获取的元素与html文档当中相对应的元素是呈映射关系，无论样式的改变还是节点的增删,只要html当中元素改变，相对应的js当中获取相应的元素也会跟着改变
* */
var ary = [{
"content": "css是层叠样式表",
"title": "css"
},
{
"content": "html是标记性语言",
"title": "html"
},
{
"content": "js是一门编程语言",
"title": "js"
},
]
var oUl = document.getElementById("uls");
var oLi = oUl.getElementsByTagName("li");
console.log(oLi);
for(var i = 0; i < oLi.length; i++) {
oLi[i].onmouseover = function() {
this.style.backgroundColor = "red";
}
oLi[i].onmouseout = function() {
this.style.backgroundColor = "";
}
}
//一、
//1.动态绑定数据 优势：不会影响原来的页面节点。缺点：使Dom多次回流，消耗内存
// for(var j = 0; j < ary.length; j++) {
// var cur = ary[j];
// var lis = document.createElement("li");
// lis.innerHTML ="<span>"+cur.title+"</span>";
// oUl.appendChild(lis);
// }
//2.字符串拼接的方式绑定数据 优点：Dom只回流一次省内存。 缺点：会影响原来页面的节点
// var str = "";
// for(var j = 0; j < ary.length; j++) {
// var cur = ary[j];
// str += "<li>";
// str += cur.title;
// str += "</li>";
// }
// oUl.innerHTML+=str;
//3.文档碎片 优点节省内存，不会影响原来页面的节点
// var frg = document.createDocumentFragment();
// for(var j = 0; j < ary.length; j++) {
// var cur = ary[j];
// var lis = document.createElement("li");
// lis.innerHTML+= cur.title;
// frg.appendChild(lis);
// }
// oUl.appendChild(frg);
// frg = null;
//二、Dom映射
var ary = Array.prototype.slice.call(oLi);
ary.sort(function(a, b) {
return parseInt(a.innerHTML) - parseInt(b.innerHTML);
});
var frg = document.createDocumentFragment();
for(var j = 0; j < ary.length; j++) {
frg.appendChild(ary[j]);
}
oUl.appendChild(frg);
frg = null;
