DOM的映射机制

最新推荐文章于 2018-02-28 11:32:35 发布

weixin_30655219

最新推荐文章于 2018-02-28 11:32:35 发布

阅读量64

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/2han/p/6364935.html

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

<body>
  <ul id="list">
      <li>1</li>
      <li>189</li>
      <li>18</li>
      <li>28</li>
  </ul>
  <script>
  var list = document.getElementById("list");
 // js获取到的元素集合
  var olis = list.getElementsByTagName("li");
  console.log(olis.length); // 4
  var li = document.createElement("li");
  list.appendChild(li);
 // 增加一个li后,元素集合自动改变,不需要重新获取
  console.log(olis.length); // 5
  </script>
</body>

需要注意的是,如果将集合变成数组,这个将失效,如这里将 olis = Array.prototype.slice.call(olis);这样的话,后面的就还是4

可以应用到表格排序上

就是想让表格按照某项排序

<body>
  <table id="table">
    <thead>
      <tr>
        <th>名字</th>
        <th>年龄</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>a</td>
        <td>23</td>
      </tr>
      <tr>
        <td>b</td>
        <td>27</td>
      </tr>
      <tr>
        <td>c</td>
        <td>22</td>
      </tr>
    </tbody>
  </table>
  <script>
  var otable = document.getElementById("table");
  var otBody = otable.tBodies[0]
  var otrs = otBody.getElementsByTagName("tr");
  otrs = Array.prototype.slice.call(otrs);
  otrs.sort(function(a, b) {
      return a.getElementsByTagName("td")[1].innerHTML - b.getElementsByTagName("td")[1].innerHTML;
    })
  // 将排序完之后的trs重新插入到文档中,结果会按照年龄从小到大排序
  var frg = document.createDocumentFragment();
  for (var i = 0; i < otrs.length; i++) {
    var cur = otrs[i];
    frg.appendChild(cur);
  }
  otBody.appendChild(frg);
  frg = null;
  </script>
</body>