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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        ul,li{list-style:none;}

    </style>

</head>

<body>

<div id="wrap">

    <ul id="list"></ul>

</div>

<script>

    var oList = document.querySelector('#list');

    var lis1 = oList.querySelectorAll('li');

    var lis2 = oList.children;

    console.log(lis1.length);//

    console.log(lis2.length);//

    function createLi(){

        for(var i=0; i<10; i++){

            var li = document.createElement('li');

            li.innerHTML = i;

            oList.appendChild(li);

        }

    }

    createLi();

    console.log(lis1.length);//

    console.log(lis2.length);//

</script>

</body>

</html>

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

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

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

childNodes也和children一样是实时获取元素的字列表（但两者还是有区别的，这里不再详细叙说，关于两者的区别网上有很多啦）
---------------------
原文：https://blog.csdn.net/lhjuejiang/article/details/80615054

js中的children实时获取子元素的更多相关文章

  1. 获取子元素节点(children,childNodes)

    在js中获取元素节点有DOM对应的方法如getElementsByTagName()等等..对于获取子元素还有另外一种获取方法ChildNodes 不过ChidNodes在高级浏览器除(IE6-8)里 ...

  2. 原生js获取子元素

    感谢原文作者:归一山人 原文链接:https://www.cnblogs.com/guiyishanren/p/12214757.html 获取子元素的方法有 //获取第一个demo类 dom = d ...

  3. jquery获取子元素

    Jquery获取子元素的方法有2种,分别是children()方法和find()方法. 下面我们分别来使用这两种方法,看看它们有何差异. children()方法:获取该元素下的直接子集元素 find ...

  4. 【转】js中通过docment.cookie获取到的内容不完整! 在浏览器的application里的cookie里可以看到完整的cookie，个别字段无法通过document.cookie获取。 是否有其他办法可以获取到？？

    js中通过docment.cookie获取到的内容不完整!在浏览器的application里的cookie里可以看到完整的cookie,个别字段无法通过document.cookie获取.是否有其他办 ...

  5. js 下获取子元素的方法

    笔记核心: firstElementChild只会获取元素节点对象,从名称就可以看出来,firstChild则可以获取文本节点对象(当然也可以获取元素节点对象),比如空格和换行都被当做文本节点. js ...

  6. javascript获取iframe框架中页面document对象,获取子页面里面的内容,iframe获取父页面的元素,

    javascript获取iframe框架中,加载的页面document对象 因为浏览器安全限制,对跨域访问的页面,其document对象无法读取.设置属性 function getDocument(i ...

  7. Jquery学习笔记：利用find和children方法获取后代元素

    在很多场景下,需要根据一个已知的jquery对象,去查找其满足条件的后代节点. 这时可以利用 find函数和children来处理. find和children函数都可有一个参数,常见的是一个字符串, ...

  8. 在js中怎么样选择互斥的相邻元素

    在使用jquery中,我们通常会选择siblings()去选择相邻元素,使用eq()方法去匹配元素,使用index()获取对应元素的索引值,具体jquery代码如下: <style> *{ ...

  9. jQuery获取子元素个数的方法

    //获取id=div1下的子元素的个数 $('#id').children().length; //获取id=div1下的p元素个数 $('#id').children('p').length;

随机推荐

  1. LeetCode-52.N-Queen II

    The n-queens puzzle is the problem of placing n queens on an n×n chessboard such that no two queens ...

  2. Laravel展示产品-CRUD之show

    上一篇讲了Laravel创建产品-CRUD之Create and Store,现在我们来做产品展示模块,用到是show,①首先我们先修改controller,文件是在/app/Http/Control ...

  3. jquery 之ajax,get,post异步请求简单代码模版

    $.get(                        "../cart/cart_list.do", "productId="+productId, fu ...

  4. 手把手教你用 Git(转)

    转自:http://blog.jobbole.com/78960/ 一:Git是什么? Git是目前世界上最先进的分布式版本控制系统. 二:SVN与Git的最主要的区别? SVN是集中式版本控制系统, ...

  5. PHP 测试杂项

    // 驼峰转下划线 function humpToUnderline($str){ if(empty($str)){ return ""; } $arr = str_split($ ...

  6. Response实例

    Response部分方法介绍及实例 客户端浏览器每访问一次web服务器的页面都会提交一次请求,与request对象对应的是response对象,该对象可以用来对客户的请求做出响应,向客户端发送数据.输 ...

  7. python 内置方法expandtabs 把字符串格式化成列表输出

    #!/usr/bin/python3 # -*- coding: utf-8 -*- test = "username\tmail\tage\nzhangsen\tzhangsen@qq.c ...

  8. 23-Python3 File

    ''' file(文件)方法 ''' #open()对象 pass #file对象 ##file.close():关闭文件,关闭后不能再进行读写操作 fo1 = open('/Users/ligaij ...

  9. vue--项目文件

    build config:webpack的配置文件 node_modules: 依赖的npm包 src: 项目代码 static:依赖的第三方库 ps:static中有个文件.gitkeep 因为新建 ...

  10. JS日期格式化扩展

    1.扩展 //扩展日期 Date.prototype.Format = function (fmt) { //author: meizz var o = { , //月份 "d+" ...