logo
搜索
我的图书馆

发文章

发文工具

其他工具

留言交流
搜索
分享

js中的children实时获取子元素

 学习妄长生 2019-12-04

先看下面一个小例子的结果

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         ul,li{list-style:none;}
  8.     </style>
  9. </head>
  10. <body>
  11. <div id="wrap">
  12.     <ul id="list"></ul>
  13. </div>
  14. <script>
  15.     var oList = document.querySelector('#list');
  16.     var lis1 = oList.querySelectorAll('li');
  17.     var lis2 = oList.children;
  18.     console.log(lis1.length);//0
  19.     console.log(lis2.length);//0
  20.     function createLi(){
  21.         for(var i=0; i<10; i++){
  22.             var li = document.createElement('li');
  23.             li.innerHTML = i;
  24.             oList.appendChild(li);
  25.         }
  26.     }
  27.     createLi();
  28.     console.log(lis1.length);//0
  29.     console.log(lis2.length);//10
  30. </script>
  31. </body>
  32. </html>

从上面的结果我们发现，我们发现同样是一开始就获取了ul的子列表，但是通过.querySelectorAll获取的子列表，在创建列表前和创建列表后，长度都为0，而通过.children方法获取的字列表，在列表创建前，长度为0，而创建之后，长度为10，为什么呢？

使用.children获取的是元素对象是一个实时更新的列表 可以看做一个数组对象 而使用querySelectorAll获取的是NodeList 与其他方式获取的NodeList不同 它不是节点集合 而是元素集合 并且是静态的 不会实时更新 相当于克隆了一个新数组

所以，我们在使用的时候要注意了哦，如果想要实时获取列表的变化，可以使用.children，反之，则使用.querySelectorAll（当然也包括getElementsByClassName和getElementsByTagNama）

childNodes也和children一样是实时获取元素的字列表（但两者还是有区别的，这里不再详细叙说，关于两者的区别网上有很多啦）

    本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。
    转藏 分享 献花（0）

    来自： 学习妄长生 > 《JavaScript》

    举报/认领

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多