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

<!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. python实现图片隐藏信息技术

    隐秘通信的3种典型方式: ①将秘密信息隐于网络通信协议中. ②将秘密信息隐于数字签名等密码协议中 . ③将秘密信息隐于数字图像中. 第三种是利用图像或音频数据对人类感官系统的冗余. 隐藏域数字图像中的 ...

  2. 前端 HTML body标签相关内容 常用标签 超链接标签 a标签

    超链接标签 <a> 超级链接<a>标记代表一个链接点,是英文anchor(锚点)的简写.它的作用是把当前位置的文本或图片连接到其他的页面.文本或图像,也可以是相同网页上的不同位 ...

  3. Dockerfile语法解析

    Dockfile介绍 从上到下依次执行 每次执行一条指令就创建一个镜像层 第一条指令必须是FROM    表示需要构建的镜像是由哪个镜像为基础镜像   后续的指令运行于此基准镜像所提供的运行环境 可以 ...

  4. nginx 启动报错403

    nginx 安装完成以后启动的时候报403, 网上找的答案是在配置文件nginx.conf里面加上 user root owner;这个要加在配置文件的第一行才行,否则还是会报错,配置文件截图为: 参 ...

  5. Math.max.apply(null,arr)求最大值

    1.首先了解一下call和apply call 和 apply 的第一个参数是null/undefined时函数内的this指向window 或global call/apply 用来改变函数的执行上 ...

  6. HBuilder 自动整理代码格式快捷键设置

    工具 ->选项

  7. linux下禁止root远程登录和添加新用户

    https://www.cnblogs.com/jianz/p/7979250.html 一.添加和root权限一样的用户 1. adduser admin passwd  admin (修改密码) ...

  8. [Leetcode] Template to rotate matrix

    Rotate the image by 90 degrees (clockwise). Given input matrix = [ [1,2,3,4], [5,6,7,8], [9,10,11,12 ...

  9. koa2的文件上传

    使用koa2搭建文件上传服务,后端代码 const os = require('os'); const path = require('path'); const koaBody = require( ...

  10. C# sapnco支持.net 4.5了，真是个意外的发现

    意外篇: 需要用C#写一个RFC直连的类库,需要引用sapnco.dll   sapnco_utils.dll两个文件 之前都是从网上下载的sapnco3.0,引用开发,在win10机器上使用没有问题 ...