30.表格排序及DOM映射

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这个集合中的长度和内容会自动跟着发生改变

  

原文地址:https://www.cnblogs.com/z-dl/p/8962980.html