美文网首页
DOM操作之元素集合使用Array数组的sort()等自带函数

DOM操作之元素集合使用Array数组的sort()等自带函数

作者: 何必如此为难 | 来源:发表于2019-01-08 20:43 被阅读0次

    通过使用纯JS或者jQuery获取到的元素集合:
    JS获取DOM元素的方法(8种):
    1、通过ID获取(getElementById)
    2、通过name属性(getElementsByName)
    3、通过标签名(getElementsByTagName)
    4、通过类名(getElementsByClassName)
    5、获取html的方法(document.documentElement)
    6、获取body的方法(document.body)
    7、通过选择器获取一个元素(querySelector)
    8、通过选择器获取一组元素(querySelectorAll)

    使用②③④⑧获取到的都是元素的集合,可以使用JS的Array数组的length,arr[i]这样的方法,但是不能使用Array数组的其他方法,比如arr.sort()数组的排序。如果想要使用Array数组的自带函数,就要通过循环把获取到的元素集合push进数组里面。然后再使用。例如:
     <ul id="ulList">
          <li>1<li/>
          <li>2<li/>
          <li>3<li/>
     <ul/>
    

    var oUl = document.getElementById('ulList');
    var aLi = document.getElementsByTagName('li');
    var arr = [];
    for(var i = 0; i<aLi.length; i++){
    arr[i]=aLi[i];
    //arr.push(aLi[i]);
    }
    arr.sort(function(li1,li2){
    var n1 = parseInt(li1.innerHTML);
    var n2 = parseInt(li2.innerHTML);
    return n1-n2;
    })
    for(var i = 0; i<arr.length; i++){
    oUl.appendChild(arr[i]);
    }

    其实同理,某些不是数组又想使用Array数组的特定函数方法,就可以通过转换来使用数组的特定函数方法。

    相关文章

      网友评论

          本文标题:DOM操作之元素集合使用Array数组的sort()等自带函数

          本文链接:https://www.haomeiwen.com/subject/rwgbrqtx.html