js中的children实时获取子元素

最新推荐文章于 2024-05-29 21:52:44 发布
最新推荐文章于 2024-05-29 21:52:44 发布
阅读量3.7w 收藏 21
点赞数 7
分类专栏： js学习笔记整理 文章标签： js children
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lhjuejiang/article/details/80615054
版权


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

<!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);//0
    console.log(lis2.length);//0
    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);//0
    console.log(lis2.length);//10
</script>
</body>
</html>

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

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

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

childNodes也和children一样是实时获取元素的字列表（但两者还是有区别的，这里不再详细叙说，关于两者的区别网上有很多啦）


冰雪为融
关注
  • 7
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
html获取孩子节点,JS实现JQuery children()方法，获取某个元素下所有子元素节点或者某个元素下指定标签元素 – Fakin's Blog...
weixin_34576293的博客
06-07 2229
想必大家都知道jquery中有个children()是一个遍历的方法，作用是获取某个指定元素下所有子元素，那么今天我们来用原生JS实现一个这个children()，其实很简单，只不过需要处理一下IE678兼容的问题，大家都知道IE678是一个‘很标准的浏览器’对于前端人员来说，这可真是爽歪歪的浏览器啊，最喜欢IE678了。好了，那咱们来实现下。Titlewindow.onload = functi...
牛客刷题——前端面试【八】谈一谈组件化开发中父访问子（children、ref）
yzq0820的博客
10-01 1463
refs方式：ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例。​ 父组件访问子组件，有时候需要直接操作子组件的方法，或是属性，此时需要用到$children。并不保证顺序，也不是响应式的。**如果你发现自己正在尝试使用。来生成子组件，并且使用 Array 作为真正的来源。直接获取**当前实例的直接子组件，需要注意。来进行数据绑定，考虑使用一个数组配合。
JS查找孩子节点简单示例
12-08
本文实例讲述了JS查找孩子节点功能。分享给大家供大家参考，具体如下： 以前看了JS方面的书，如今用到了，书看得再多，不用就忘了，所以经常用用你所学到的知识，温故知新。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <title>www.jb51.net 查找孩子结点</title> <meta keywords="商品目录"/> <meta description="JS查找孩子节点"/> <script type="text/javascri
JS怎么获取一个元素的子元素
最新发布
Lipn_的博客
05-29 165
了解JS怎么获取一个元素的子元素
JS children函数用法
热门推荐
qq_54684701的博客
07-12 1万+
在这次的项目里，我在用JS做轮播图时出现了一个问题，控制台一直报错说children未定义，但我的程序里children是一个方法，在检查了其他部分无果后，我以为是html结构的问题导致程序没有有效找到子元素，于是用二分法进行注释，也没有找到问题的所在。最终，仔细研究了JS里children这个方法，我找到了问题的所在。 首先，children这个方法是获取一个DOM所有子元素的集合，在轮播图中，我们可以对整体部分用一个盒子包住，利用children这个方法获取这个盒子所有的子元素（即每一张图片），然后用
js使用多种方法取出嵌套对象数组中的所有 children 的值
南北极之间
04-24 4435
这些方法都会遍历整个嵌套对象数组，并返回包含所有 children 的数组。请注意，使用递归方法时要小心，确保没有无限循环。2.使用 reduce 递归方法进行深度优先遍历。3.使用 flatMap 方法进行深度优先遍历。
javascript中children和childNodes的区别
weixin_33938733的博客
12-08 145
1，childNodes：它是标准属性，它返回指定元素的子元素集合，包括HTML节点，所有属性，文本节点。 可以通过nodeType来判断是哪种类型的节点，只有当nodeType==1时才是元素节点，2是属性节点，3是文本节点。 有些人错误的使用()去取该集合元素，下表列出各浏览器对childNodes(i)的支持情况： IE6/7/8/Safari/Chrome/Opera IE...
Jquery实现获取子元素的方法分析
10-16
本篇文章将深入探讨jQuery如何实现获取子元素的方法，包括`children()`和`find()`两个主要方法，并通过实例来解析它们之间的差异。 首先，`children()`方法是jQuery提供的一种获取元素直接子级的方法。它接受一个可...
js获取元素下的第一级子元素的方法(推荐)
12-01
在JavaScript中，获取HTML元素下的第一级子元素是一项常见的任务，尤其在进行DOM操作时。在给定的标题和描述中，提到了一种通过`getElementsByTagName('*')`和遍历节点类型来实现的方法。这里我们将详细解释这个过程...
jQuery获取this当前对象子元素对象的方法
10-21
在JavaScript和jQuery中，`this`关键字经常被用于引用当前上下文的对象，特别是在事件处理函数中。当涉及到DOM操作时，`this...希望这个详细的解释对您理解jQuery中的`this`关键字及其在获取子元素方面的应用有所帮助。
JS中用childNodes获取子元素换行会产生一个子元素
11-28
在进行DOM操作时，应根据实际需求选择合适的属性来获取子元素。对于那些需要忽略文本节点的情况，`children`无疑是一个更好的选择。在编写JavaScript代码时，尤其是涉及到DOM操作时，理解这些细节能够帮助我们写出更...
JS 使用for循环遍历子节点查找元素
11-30
在JavaScript中，遍历DOM（文档对象模型）子节点是常见的任务，特别是在处理网页交互时。`for`循环是实现这一目标的一种基本方法。这里，我们深入探讨如何使用`for`循环来遍历子节点，并查找具有特定属性的元素。 ...
childNodes与children
恒为艺术-记录程序学习的点点滴滴
05-18 204
[b]1，childNodes 属性[/b]，标准的，它返回指定元素的子元素集合，包括HTML节点，所有属性，文本。可以通过nodeType来判断是哪种类型的节点，只有当nodeType==1时才是元素节点，2是属性节点，3是文本节点。 有些人错误的使用()去取该集合元素，下表列出各浏览器对childNodes(i)的支持情况： [table] |浏览器|IE6/7/8/Safari...
JavaScript 练习 模拟 children() 方法
凝弧
03-22 721
HTMLDocument.prototype.getChildrenAll = function(node){ // childs存放子元素 var els = {},childs = []; // 判断选择器类型，id、class switch(node.substr(0,1)) { case '#': els[0...
js递归遍历树形json数据（找到children数据）
Ginger博客
09-30 3092
var returnedItem; //定义一个不不赋值的变量 var find = function(arr, id){ arr.forEach((item) => { //利用foreach循环遍历 if(item.id==id)//判断递归结束条件 { returnedItem = item; .
js中DOM有关,children(),appendChild()实现的排序
Alex十年的博客
03-14 1844
1、childNodes和nodeType childNodes获取子节点，但是会把中一个标签与另一个标签的空格当做文本节点来计算。nodeType判断一个节点是什么类型的节点。只有当nodeType==1时才是元素节点，2是属性节点，3是文本节点。 2、children获取子节点，它只返回HTML节点，甚至不返回文本节点，虽然不是标准的DOM属性，但它和innerHTML方法一样，得到了几乎...
JavaScript 节点概述 、父节点 parentNode、子节点children、兄弟节点、创建节点 添加节点、删除节点、复制拷贝节点 ★案例★
MDR_0820的博客
10-22 1843
一般 节点至少拥有nodeType(节点类型）.nodeName(节点名称）和nodeValue(节点值）这三个基本属性 元素节点 nodeType 为 1 属性节点 nodeType 为 2 文本节点 nodeType 为 3（文本节点包含文字、空格、换行等） 开发中 节点操作主要操作的是元素节点 父节点 parentNode 获得里元素最近的父级节点 <body> <div class="nav"> <div class="jiedian"&gt
js遍历树形数据-children
咖啡味的小认真
05-17 2942
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>递归遍历children</title> </head> <body> </body> <script> let arr = [{ name: 'test1' }, { name: '
js子节点children和childnodes的用法
dk2319193的博客
08-07 462
想要获取子节点的数量，有几种办法。 childNodes 它会把空的文本节点当成节点， <ul> 文本节点 <li>元素节点</li> 文本节点 <li>元素节点</li> 文本节点 </ul> 所以childNodes.length就是5 而另一种方法 Children...
获取元素子元素JS
05-25
获取元素的子元素可以使用 JavaScript 中的 `children` 属性或 `childNodes` 属性。 `children` 属性返回一个 HTMLCollection 对象，它包含了该元素的所有子元素节点（不包括文本节点和注释节点）。 示例代码如下： ```javascript const element = document.getElementById("myElement"); const children = element.children; for (let child of children) { console.log(child); } ``` 另外，`childNodes` 属性返回一个 NodeList 对象，它包含了该元素的所有子元素节点（包括文本节点和注释节点）。 示例代码如下： ```javascript const element = document.getElementById("myElement"); const children = element.childNodes; for (let child of children) { console.log(child); } ``` 需要注意的是，`childNodes` 返回的是一个动态的 NodeList 对象，如果你修改了子节点，它会立即反映在 `childNodes` 中。而 `children` 返回的是一个静态的 HTMLCollection 对象，不会随着子节点的变化而变化。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值