JS中，children和childNodes的不同之处

最新推荐文章于 2024-03-23 11:14:01 发布
原创 最新推荐文章于 2024-03-23 11:14:01 发布 · 1.4w 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript

本文介绍了一个简单的DOM操作示例，展示了如何使用JavaScript获取HTML元素集合并遍历这些元素。通过这个例子，读者可以了解到基本的DOM操作方法，包括选择元素和获取元素数量。
<ul id="ul">
<li></li>
<li></li>
<li><span></span></li>
<li></li>
<li></li>
</ul>
<script type="text/javascript">
var ul = document.getElementById("ul");
var children =  ul.children;
console.log(children.length);//children 只选择元素节点,没有兼容性问题（但是IE678 会包含注释节点，尽量不在里面写注释）  children常用

//childnodes方法获取孩子节点  
//var children =  ul.childNodes;
// for(var i=0; i<children.length; i++){
// if(children[i].nodeType == 1){//nodeType == 1只要元素节点，不要换行，和空格
// console.log(children[i]);
// }
// }
// console.log(children.length);
</script>
</body>
</html>
JavaScript childNodes
m0_37996243的博客
04-06 379
JS中的childNodes 获取的不仅仅是html元素，同时连续的文本也是一个子节点，如： <p id="demo">&nbsp;&nbsp;<input />&nbsp;</p> alert(document.getElementById("demo").childNodes.length);// 结果是 3 ...
js中的children实时获取子元素
热门推荐
冰雪为融的博客
06-07 3万+
先看下面一个小例子的结果&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; ul,li{list-sty
牛客刷题——前端面试【八】谈一谈组件化开发中父访问子（children、ref）
yzq0820的博客
10-01 1704
refs方式：ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例。​ 父组件访问子组件，有时候需要直接操作子组件的方法，或是属性，此时需要用到$children。并不保证顺序，也不是响应式的。**如果你发现自己正在尝试使用。来生成子组件，并且使用 Array 作为真正的来源。直接获取**当前实例的直接子组件，需要注意。来进行数据绑定，考虑使用一个数组配合。
JavaScript 节点概述 、父节点 parentNode、子节点children、兄弟节点、创建节点 添加节点、删除节点、复制拷贝节点 ★案例★
MDR_0820的博客
10-22 2352
一般 节点至少拥有nodeType(节点类型）.nodeName(节点名称）和nodeValue(节点值）这三个基本属性 元素节点 nodeType 为 1 属性节点 nodeType 为 2 文本节点 nodeType 为 3（文本节点包含文字、空格、换行等） 开发中 节点操作主要操作的是元素节点 父节点 parentNode 获得里元素最近的父级节点 <body> <div class="nav"> <div class="jiedian"&gt
javascript 中 parentNode，childNodes、children 应用
fox123871的专栏
07-12 1万+
"parentNode"常用来获取某个元素的父节点. 把 parentNodes 理解为容器, 在容器中有个子节点     例: My text 在上面的代码中, 你看到把"爹"作为一个 div 容器, 该容器中有个"孩子", 就是粗体的文字部分. 如果你打算用getElemen
JavaScript操作DOM元素的childNodes和children区别
10-24
与childNodes不同的是，children属性仅返回指定元素的所有元素节点（ElementNode）。也就是说，使用children属性不会获取到文本节点、注释节点等其他类型的节点。这使得children属性非常适合用于获取一个元素下的...
javascript中parentNode,childNodes,children的应用详解
10-26
JavaScript中的parentNode, childNodes, children是DOM操作中非常基础且重要的属性，它们能够帮助开发者获取元素之间的层级关系和结构。在本篇文章中，我们将详细探讨这些属性的用途、区别和最佳实践。 首先，让...
Js中parentNode,parentElement,childNodes,children之间的区别
10-26
在上面的例子中，`test1`元素有两个子`div`元素和一个文本节点（"bbb"），所以`childNodes.length`为3，而`children.length`为2，因为`children`不包含文本节点。 总结来说，`parentNode`和`childNodes`是符合W3C...
js对节点 属性的操作
qq_61896295的博客
05-22 1289
一. 利用节点关系进行获取 1 . 父子关系 父节点 parentElement // 获取到父节点 var parent = document.getElementById("parent"); 所有子节点 children // 获取到所有的子节点 console.log(parent.children); 第一个子节点 firstElementChild // 第一个子节点 var first = parent.firstElementChild; console.log("
JS——DOM操作（childNodes、nodeType和children区别与用法）
weixin_30545285的博客
05-25 920
DOM中节点的类型 DOM中一共有12中类型。但是我们常用的只有几种。 首先我们了解下DOM中一般常见的节点类型有哪些？ 1、元素节点 DOM中的原子都是元素节点，比如<body><table><div>等等。 如果把Web上的文档比作一座大厦，则元素就是构成这块大厦的砖石。一个文档是由N个元素组成的。元素可包含其他元素。 2、文本节点 任意的文字...
js下firstElementChild firstChild 以及childNodes和children方法
weixin_30482383的博客
10-12 426
一、 <div> <p>123</p> </div> 在上面这段代码中，如果使用以下js代码 var oDiv=document.getElementByTagName("div")[0]; alert(oDiv.firstChild.nodeName) 在ie9以下，alert出来的是p（p标签名字）...
JavaScript使用childNodes和children
JOKER0707的博客
02-08 729
　　childNodes用来获取一个元素的所有子元素，这个包括元素节点和文本节点。 　　children用来获取一个元素的子元素节点，注意只是元素节点 其中DOM中常见的三种节点分别如下： 　　元素节点：<body>，<p>，<a>，<div>，<head>.....等等这些标签，都是元素节点 　　属性节点：title，...
js使用多种方法取出嵌套对象数组中的所有 children 的值
南北极之间
04-24 6380
这些方法都会遍历整个嵌套对象数组，并返回包含所有 children 的数组。请注意，使用递归方法时要小心，确保没有无限循环。2.使用 reduce 递归方法进行深度优先遍历。3.使用 flatMap 方法进行深度优先遍历。
JS children和childNodes的区别
xx_xiaoxinxiansen的博客
07-25 1万+
属性介绍 children children：返回父元素所有的直系子节点的集合，注意，children只返回HTML元素节点，不包括文本节点和属性节点。 childNodes childNodes：返回父元素所有的直系子节点的集合，注意，与children不同的是，childNodes会返回HTML元素节点，属性节点，文本节点。 代码演示<!DOCTYPE html> <html> <h
JS利用递归遍历数组，筛选得到需要的数据
Jack, what else can you do besides holding your little darling?
10-15 1678
前言 本文章是开发中遇到的问题，对于后端返回的数据中需要进行筛选的问题 代码如下 后端返回的数据中很多是我不需要的，所以进行筛选，如果使用axios中发送请求获取数据的话，可以在拦截器中进行操作 数据： let list = [ { "id": 1, "name": "11", "code": "22", "parentId": 0, "level": 0, "sort": 1, "isActive.
javascript基础学习系列五百二十八：观察子节点
最新发布
m0_68635815的博客
03-23 328
MutationObserver 可以观察目标节点子节点的添加和移除。要观察子节点，需要在Mutation-对子节点重新排序（尽管调用一个方法即可实现）会报告两次变化事件，因为从技术上会涉及先移。ObserverInit 对象中将childList 属性设置为true。// 发生了两次变化：第一次是节点被移除，第二次是节点被添加。// 创建两个初始子节点。// 交换子节点顺序。
children()方法使用详细介绍
weixin_44907833的博客
09-16 6810
children() 方法 1、定义及用法：返回被选元素的所有 儿子辈的 子元素不包括孙子辈。 $(selector).children(filter); 参数可选，规定缩小搜索子元素范围的选择器表达式。 2、简单 示例： $(“ul”).children().css({“color”:“red”})； 返回所有标签的直接子标签，颜色为红色。 $(“ul”).children(“li.1”).css({“color”:“red”}); 标签下
JavaScript 练习 模拟 children() 方法
凝弧
03-22 810
HTMLDocument.prototype.getChildrenAll = function(node){ // childs存放子元素 var els = {},childs = []; // 判断选择器类型，id、class switch(node.substr(0,1)) { case '#': els[0...
js中有关children和childNodes的区别
weixin_40626699的博客
01-18 3047
children：子元素 childNodes：子节点
JavaScript中parentNode,childNodes,children属性深度解析
`parentNode`, `childNodes`和`children`是三个非常重要的属性，它们帮助我们理解和操作元素之间的关系。 1. `parentNode` `parentNode`属性用于获取当前元素的直接父节点。在HTML文档中，每个元素都有一个父节点...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值