码迷,mamicode.com
首页 > 编程语言 > 详细

js学习总结----表格排序及dom映射

时间:2017-06-29 19:14:22      阅读:138      评论:0      收藏:0      [点我收藏+]

标签:oar   htm   获取   nts   pre   ++   listt   for   cti   

一、表格排序 

//1、先把元素集合类数组转化为数组
        var ary = utils.listToArray(oLis);//上几节封装好的listToArray
        //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;

二、DOM映射机制  

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

        var oLi = document.createElement(‘li‘);
        oUl.appendChild(oLi);
        console.log(oLis.length);//6没有重新的获取,但是oLis这个集合中的长度和内容会自动跟着发生改变

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

js学习总结----表格排序及dom映射

标签:oar   htm   获取   nts   pre   ++   listt   for   cti   

原文地址:http://www.cnblogs.com/diasa-fly/p/7095814.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!