JavaScript - Node.children和Node.childNodes的区别

最新推荐文章于 2024-09-14 18:52:56 发布
最新推荐文章于 2024-09-14 18:52:56 发布
阅读量121 收藏
点赞数
文章标签： javascript 面试 ViewUI
原文链接：http://www.cnblogs.com/osyo/p/7103924.html
版权

写到这个也是因为群里的学长面试的时候遇到了这个问题，然后顺手分享了一下

首先是MDN里面对两个API的解释

children

Node.children is a read-only property that returns a live HTMLCollection of the child elements of Node.

childNodes

The Node.childNodes read-only property returns a live collection of child nodes of the given element where the first child node is assigned index 0.

所以children会返回你查找的节点里所有element子节点，而childNodes会返回所有element、文本、注释之类的节点，大概这样↓

 

转载于:https://www.cnblogs.com/osyo/p/7103924.html

weixin_30355437
关注
JS树结构操作:查找、遍历、筛选、树结构和列表结构相互转换
weixin_42069147的博客
04-08 5261
JS树结构操作:查找、遍历、筛选、树结构和列表结构相互转换 经常有同学问树结构的相关操作，在这里总结一下JS树形结构一些操作的实现思路，并给出了简洁易懂的代码实现。 本文内容结构大概如下： 遍历树结构 1. 树结构介绍 JS中树结构一般是类似于这样的结构： let tree = [ { id: '1', title: '节点1', children: [ { id: '1-1', title: '节点1-1' },
js dom node.children与node.childNodes区别
weixin_30597269的博客
11-07 194
不同点：node.children不会取到节点下面的TextNode但是node.childNodes会取到 共同点：两者都是集合类数组，可以通过索引的方式取到值也可以用for循环遍历 转载于:https://www.cnblogs.com/ppphs/p/7799093.html...
js node.children与node.childNodes与node.firstChild,node,lastChild之间的关系
weixin_30443895的博客
11-06 100
博客搬迁，给你带来的不便，敬请谅解！ http://www.suanliutudousi.com/2017/11/06/js-node-children%e4%b8%8enode-childnodes%e4%b8%8enode-firstchildnodelastchild%e4%b9%8b%e9%97%b4%e7%9a%84%e5%85%b3%e7%b3%bb/ 转载于:https://www...
children()和children以及childrenNode的区别
长河落日的博客
10-21 3820
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>遍历节点</title> <script src="js/Jquery.min.js" type="text/javascript"
Js中childNode与children的区别
qq_43690370的博客
06-16 3504
childNodes: 标准的，它返回指定元素的子元素集合，包括html节点，所有属性，文本。可以通过nodeType来判断是哪种类型的节点，只有当nodeType==1时才是元素节点，2是属性节点，3是文本节点。如果代码中有换行、空格就会增加文本节点，这样用它来返回真正的子节点就会不准确，具体见下面的例子。 除了IE9和Firefox，其他浏览器都支持通过childNodes[i]获取第i个子节点。 children: 非标准的，它返回指定元素的子元素集合。经测试，它只返回html节点，甚至不返回文本节点
从element与node看node.childNodes和node.children 区别
zhuanggenhua的博客
06-08 252
node.childNodes和node.children 区别 children返回HTMLCollection，是一个动态集合，随dom树更新。childNodes返回的NodeList不会 children返回的只是元素节点，childNodes还包括文本节点等等 即children得到的是Element的属性，childNodes得到的是Node的属性 引申：element和node的区别 Node(节点)是DOM层次结构中的任何类型的对象的通用名称，Node有很多类型，如元素节点，属性节点，
08-HTMLCollection-NodeList-区别.md
03-31
### Node和Element的区别 - **Node**：节点是DOM树中的单个点，是所有DOM节点的基类。它是一个抽象接口，意味着不能直接实例化。Node提供了所有DOM节点共有的方法和属性，如`appendChild()`, `removeChild()`等。...
JavaScript操作DOM元素的childNodes和children区别
10-24
本文将重点讲解两个属性——childNodes和children的差别。 首先需要了解的是，DOM实际上是以树形结构来表示HTML文档，每一个HTML元素都被视为树中的一个节点。在JavaScript中，可以使用多种属性和方法来访问这些...
javascript中parentNode,childNodes,children的应用详解
12-04
`parentNode`、`childNodes`和`children`是DOM操作中常用的属性，它们分别用于获取元素的父节点、所有子节点和子元素。 1. `parentNode`： `parentNode`属性用于获取当前元素的直接父节点，即包含当前元素的那个...
js -- childNodes
03-05
`childNodes`与`children`属性的区别在于，`children`仅返回元素节点，忽略了文本节点和注释节点。这使得`children`在处理元素级遍历时更为方便，因为它提供了一个只包含元素节点的“干净”列表。 在实际编程中，...
js中firstChild和childNodes[0]以及children[0]之间的点滴问题
走在前端
03-11 6985
示例： js中firstChild和childNodes[0]以及children[0]之间的点滴问题 pppppppppppppppp window.onload = function() { if (!document.getElementById("div1")) return false; var
JavaScript之childNodes 和 children 区别
LVXIANGAN的专栏
07-24 7516
 1、先让我们来看看childNodes的用法，以及是如何计算节点数量：   为什么输出是7而不是3呢？原来Internet Explorer 会忽略节点之间生成的空白文本节点（比如换行字符），而 Mozilla 不这么做。   2、两者区别： children() 方法返回被选元素的所有直接子元素。因此上面直接输出3。 注意：children()在...
JS中children与childNodes的区别
u013001531的博客
08-16 1376
博主"不知所言"在https://blog.csdn.net/yhn1121/article/details/52461353中已经写得很生动形象了,    个人做一点点补充,      var childNode = nodes.childNodes返回的是一个集合, 可以用childNode.forEach(n=>{console.log(n)});遍历,     而var ch...
js中【Worker】相关知识点详细解读
2301_79858914的博客
09-11 862
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
【JavaScript】LeetCode：707设计链表
最新发布
weixin_45980065的博客
09-14 503
【代码】【JavaScript】LeetCode：707设计链表。
echarts.js+china.js实现中国地图各省数据案例
qq_58258855的博客
09-11 453
实现中国地图各省数据案例
JS笔记
2201_76100326的博客
09-11 883
javascript中的对象分为3种：自定义对象，内置对象，浏览器对象 JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。在 JavaScript 中，对象是拥有属性和方法的数据。属性是与对象相关的值。方法是能够在对象上执行的动作。.关键词（）
JavaScript基础
zhangh040629的博客
09-10 1310
//** 控制浏览器弹出一个警告框* alert()*/alert;/** 让计算机在页面中输出一个内容*/write;/** 向控制台输出一个内容*/log;</</</</
深入解析JavaScript中parentNode, childNodes, children的用法及其层次关系
在JavaScript中，`parentNode`, `childNodes`, 和 `children` 是三种用于处理DOM（文档对象模型）节点关系的关键概念，它们在操作HTML元素时非常实用。这些属性主要用于导航和定位元素在DOM树中的位置。 1. ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值