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

<!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. mysql开发总结

    一.理解MySQL基本概念 1.MySQL软件:MySQL实际上就是一软件,是一工具,是关系型数据库管理系统软件 2.MySQL数据库:就是按照数据结构来组织.存储和管理数据的仓库 3.MySQL数据 ...

  2. dxRatingControl使用

    Properties AllowHover:是否鼠标滑动选择 CheckedGlyph:选中后显示的图像 Glyph:显示的图像 HoverGlyph:鼠标滑动时显示的图像 ItemCount:项目总 ...

  3. String扩展 让你在PadLeft和PadRight时不再受单双字节问题困扰

    /// <summary> /// 按单字节字符串向左填充长度 /// </summary> /// <param name="input">& ...

  4. SQL Anywhere .NET

    SQL Anywhere .NET 支持 1.ADO.NET 是 Microsoft 的 ODBC.OLE DB 和 ADO 系列中最新的数据访问 API.它是 Microsoft .NET Fram ...

  5. Python笔记:调用函数，带扩号和和不带括号的区别

    调用函数,如果带括号,那么是调用函数运行后的结果, 调用函数不带括号,调用的是函数本身 例如: def cun (a,b): return a+b print(cun) : 调用函数,打印的是函数 p ...

  6. vue proxyTable 跨域问题。

  7. $router.query和$router.params的区别

    类型于get(query) 和 post(params) 1.query方式传参和接收参数   传参: this.$router.push({ path:"/xxx" query: ...

  8. SQL Server2008 R2 数据库镜像实施手册(双机)SQL Server2014同样适用

    这篇文章主要介绍了SQL Server2008 R2 数据库镜像实施手册(双机)SQL Server2014同样适用,需要的朋友可以参考下 一.配置主备机 1. 服务器基本信息 主机名称为:HOST_ ...

  9. Linux学习笔记：常用100条命令（一）

    linux常用命令 1.关机 shutdown -h now 立刻关机 poweroff shutdown -r now 立刻重启 reboot logout 注销 2.进入图形界面 startx 3 ...

  10. 移动端--touch事件与点透问题

    也来说说touch事件与点击穿透问题: http://blog.csdn.net/alex8046/article/details/52299785