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

<!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. Pycharm快捷键大全（windows + Mac）

    Windows快捷键 1.编辑 Ctrl + Space    基本的代码完成(类.方法.属性) Ctrl + Alt + Space  快速导入任意类 Ctrl + Shift + Enter    ...

  2. what's the python之面向对象

    编程分为面向过程和面向对象,首先我们要了解什么是面向对象. 面向对象 面向过程就是我们之前学的内容,主要是函数式,其核心是过程,过程即解决问题的步骤,面向过程的设计就好比精心设计好一条流水线,考虑周全 ...

  3. 多线程2.md

    # 多线程  VS 多进程 - 程序:一堆代码以文本形式存入一个文档 - 进程: 程序运行的一个状态 - 包含地址空间.内存.数据栈等 - 每个进程由自己完全独立的运行环境,多进程共享数据是一个问题 ...

  4. 有关java反射机制 小结

    111111111111 Class<?> cls = Class.forName("包名.类名"); Object o = cls.newInstance(); 22 ...

  5. Angular1和Aangular4剖析

    字面解析: 1.Angular1又名angularJs,从angular2,angular4都不带JS 2.变化:angular2跳转到angular4 架构: 1.angular1是基于MVC 2. ...

  6. node微信公众号开发--设置自定义菜单

    var request = require("request"); const querystring = require("querystring"); re ...

  7. 常用的Lunix命令 记录

    使用normal模式下的  v命令,进入visual模式,v+ j/k/h/l   进行文本选中 对于选中的文本进行如下按键: (1.1)d   ------ 剪切操作 (1.2)y   ------ ...

  8. Kibana5.x界面简要介绍（含x-pack插件）

    简介:Kibana是一个为 ElasticSearch 提供的数据分析的 Web 接口(5601).可使用它对日志进行高效的搜索.可视化.分析等各种操作.Kibana目前最新的版本5.3.X-Pack ...

  9. python-lambda、filter、reduce、map

    python-lambda.map.filter.reduce lamdba python关键字,用于在表达式中创建匿名函数. 注意:lambda函数的定义体只能用纯表达式,不能赋值,不能使用whil ...

  10. linux 编译 'aclocal-1.14' is missing on your system

    centos编译出现:类似情况: $tar -xvf libpcap-1.0.0.tar.gz      $cd libpcap-1.0.0.tar.gz      $./configure      ...