zoukankan      html  css  js  c++  java
  • DOM的映射机制

     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>
  • 相关阅读:
    第08组 Alpha冲刺(4/6)
    2019 SDN阅读作业
    第08组 Alpha冲刺(3/6)
    2019 SDN上机第3次作业
    第08组 Alpha冲刺(2/6)
    答疑
    八、对抗样本1
    九、产生和防御对抗样本的新方法 | 分享总结--廖方舟(论文11)
    02-NLP-08-条件随机场与应用
    02-NLP-07-词向量及相关应用
  • 原文地址:https://www.cnblogs.com/2han/p/6364935.html
Copyright © 2011-2022 走看看