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

<!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. unix下命令窗分屏工具

    运行 sudo apt-get install terminator 效果 新建分屏窗口:右键鼠标选择

  2. 20170724 Airflow官网资料学习

    -- 1  Apache Airflow 文档 AirFlow 对编程人员来讲就是一个平台,用于进行日程安排和监控.但是还在卵化期,严格来说,不是一个完整的成品.

  3. 爬虫解析库——BeautifulSoup

    解析库就是在爬虫时自己制定一个规则,帮助我们抓取想要的内容时用的.常用的解析库有re模块的正则.beautifulsoup.pyquery等等.正则完全可以帮我们匹配到我们想要住区的内容,但正则比较麻 ...

  4. SQLite数据库管理工具(SQLiteStudio)v3.1.1

    http://www.pc6.com/softview/SoftView_86552.html

  5. vant - 弹框 【Popup 弹出层】【DatetimePicker 时间选择】

    [HelloWorld.vue] <template> <div class="hello"> <van-row class="m-head ...

  6. golang 的 buffered channel 及 unbuffered channel

    The channel is divided into two categories: unbuffered and buffered. (1) Unbuffered channelFor unbuf ...

  7. content_type

    1.作用 将app名称与其中表关系进行保存 在models创建表时,关联到ContentType并不会产生实际的字段 2.使用 在models中代码 from django.db import mod ...

  8. centos7 下 apache nginx squid https正向代理 代理服务器

    apache yum install httpd mod_ssl -y vim /etc/httpd/conf.d/ssl.conf Listen https <VirtualHost *:&g ...

  9. jenkins windows slave 报错ERROR: Error cloning remote repo 'origin'

    在slave上是git clone ssh是可以成功的,但是jenkins调用slave节点就报如下错误: ERROR: Error cloning remote repo 'origin' huds ...

  10. 收藏住：金融&电商类原型模板重磅来袭，免费使用！

    经常有很多产品经理和设计师想要各行业的产品原型模板,可以直接下载使用.现在分享下一个资源渠道:墨刀的原型模板. 上新了金融类和电商类的主要App设计原型,可以直接免费使用,具体包括: 金融类 招商银行 ...