DOM映射

表格排序及dom映射

@(前端)

<script src="utils.js"></sript>//这是我们的类数组转换为数组的
 var oUl = document.getElementById("ul1");
 var oLis = oUl.getElementsByTagName("li");
 //第一步:先把元素集合类数组转化为数组
 var ary = utils.listToArray(oLis);//listToArray是我们写的一个方法
 //第二部:给数组进行排序:按照每一个li中的内容大小进行排序
 ary.sort(function(a,b){
        return parseFloat(a.innerHTML)-parseFloat(b.innerHTML);
});
//第三步:按照ary中存储的最新顺序一次的把对应的li添加到页面中
var frg=document.createDocumentFragment();
for(var i = 0; i<ary.length;i++){
    frg.appendchild(ary[i]);
    }
oUl.appendchild(frg);//文档碎片模式
frg=null;//手动释放堆内存

//parsefloat();使用方法以及结果
document.write(parseFloat("10")) 
document.write(parseFloat("10.00")) 
document.write(parseFloat("10.33")) 
document.write(parseFloat("34 45 66")) 
document.write(parseFloat(" 60 ")) 
document.write(parseFloat("40 years"))
document.write(parseFloat("He was 40"))
10
10
10.33
34
60
40
NaN

DOM映射(很重要)

DOM映射机制:页面中的标签和JS中获取到的元素对象或者(元素集合)是紧紧的绑定在一起的,页面中的HTML结构改变了,JS中不需要重新获取,集合里面的内容也会跟着自动改变

var oUl = document.getElementById("ul1");
var oLis = oUl.getElementByTagName("li");
console.log(oLis.length);//->5

var oLi = document.createElement("li");
oUl.appendChild(oLi);
console.log(oLis.length);//->6没有重新获取,但是oLis这个集合中的长度和内容跟着发生改变
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值