1.
var oul = document.getElemntById("ul")
var olis = oul.getElementByTagName("li")
1) 先把元素集合类数组转化为数组
var ary = [].slice.call(olis)
2) 给数组进行排序:按照每一个li中的内容大小进行排序
ary.sort(function(a,b) {
return parseFloat(a.innerHTML) - parseFloat( b.innerHTML)
})
3)按照ary中存储的最新顺序,依次的把对应的li添加到页面当中
var frg = document.createDocumentFragment()
for (var i = 0;i<ary.length;i++) {
frg.appendChild(ary[i])
}
oul.appendChild(frg);
frg = null;
2.DOM映射机制
含义:页面中的标签和js获取到的元素对象(元素集合)是紧紧的绑定在一起的,页面中的html结构改变了,js中不需要重新获取,集合里面的内容也会跟着自动改变
var oul = document.getElementById("oul")
var olis = oul.getElementByTagName("li")
console.log(olis.length); // 5
var oli = document.createElement("li");
oul.appendChild(oli);
console.log(olis.length); // 6 没有重新获取,但是oli这个集合中的长度和内容会自动跟着发生改变