理解Dom的childNodes

最新推荐文章于 2025-10-08 10:46:27 发布
原创 最新推荐文章于 2025-10-08 10:46:27 发布 · 801 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript dom chil

本文介绍了DOM中Node类型的12种分类，包括元素节点、属性节点、文本节点等，并解释了如何通过nodeType属性获取这些节点类型。同时，文中提到了通过childNodes获取子节点时可能遇到的问题。

Node类型，大概分为12种，可以通过nodeType属性获取。

Node.ELEMENT_NODE(1)  元素节点

Node.ATTRIBUTE_NODE(2)  属性节点

Node_TEXT_NODE(3)  文本节点

Node_CDATA_SECTION_NODE(4)

...

Node.COMMENT_NODE(8)  注释节点

Node.DOCUMENT_NODE(9)  文档节点

...

Node.DOCUMENT_FRAGMENT_NODE(11)  文档片节点

Node.NOTATION_NODE(12)

上面简单列出了常用节点，其他详细可以网上搜索下

所以通过childNodes获取所有子节点就会和你想要的不一致

<?xml version="1.0" encoding="UTF-8"?>
<a>
	<b>false</b>	
	<c>reason</c>
</a>

详细原因参考： http://www.iteye.com/topic/21904

js中firstChild和childNodes[0]以及children[0]之间的点滴问题
走在前端
03-11 7120
示例： js中firstChild和childNodes[0]以及children[0]之间的点滴问题 pppppppppppppppp window.onload = function() { if (!document.getElementById("div1")) return false; var
13. Element childNodes 属性
enlyhua的专栏
08-05 928
实例获得 body 元素的子节点集合：document.body.childNodes;定义和用法childNodes 属性返回节点的子节点集合，以 NodeList 对象。 提示：您可以使用 length 属性来确定子节点的数量，然后您就能够遍历所有的子节点并提取您需要的信息。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> </he
HTML DOM －奇怪的childNodes
溺水的鱼 - Later equals never.
04-29 1995
 以下内容在IE浏览器下测试：firstChild 获取对象的 childNodes 集合的第一个子对象的引用。span-cnbrucepre-cnbrucelastChild 获取该对象 childNodes 集合中最后一个子对象的引用。span-cnbrucepre-cnbruce在标签内再加一行lastChild就找不到了span-cnbrucep
关于对DOM的childNodes的理解
阿达King哥的博客
01-25 1863
DOM是对Html和XML的对象描述。它有个childNodes 属性，这个属性的意思是返回当前元素所有子元素数组。我们来看看下面这段代码：table>    tr>        td id="state1">            Minnesota        td>        td id="state2">            California        td>
html dom子对象属性,html DOM 对象之childNodes属性简介说明
weixin_42303803的博客
06-09 444
摘要:下文讲述childNodes属性简介说明,如下所示:childNodes属性简介childNodes属性功能:返回当前html元素的所有子节点。childNodes属性语法:let childList = node.childNodes—–返回值说明—–返回所有元素子节点childNodes属性注意事项:市面上流行的浏览器都可以获取此属性值childNodes属性举例说明猫猫教程(www.m...
DOM的childNodes兼容的问题
weixin_30509393的博客
11-07 117
因为FF下，会把标签之间的空格也算进去，所以很多时候，oParent.childNodes.length在FF和IE下是不同的，为了排除这种影响可以和nodeType结合起来用 当nodeType=1时是元素节点 当nodeType=2时是属性节点 当nodeType=3时是文本节点 那么可以结合nodeType得到父元素的子节点，具体函数代码如下： function getChil...
Element与Node的区别，children与childNodes的区别
一天 一小步
11-14 2912
原帖地址： http://www.cnblogs.com/jscode/archive/2012/09/04/2670819.html
深入理解JavaScript childNodes属性
在前端开发中，`childNodes` 是一个常用的属性，它属于JavaScript中DOM操作的一部分。通过`childNodes`属性，开发者可以访问一个节点的直接子节点，包括元素节点、文本节点、注释节点等。`childNodes`属性返回一个...
理解DOM：文档对象模型详解
"DOM是文档对象模型的缩写，它将网页内容转化为可操作的对象结构。...本文将深入解析DOM的构成及其作用。...当你创建了一个网页并在浏览器中加载...理解DOM的工作原理并熟练掌握DOM操作，对于任何前端开发者来说都至关重要。
理解DOM：文档对象模型详解与操作技巧
"这篇资源主要介绍了DOM的基本概念、分类以及如何使用CoreDOM操作HTML文档，同时提到了HTML文档在浏览器中的解析方式，包括...通过不断实践和学习，可以更好地理解和驾驭DOM，从而创建出更具交互性和动态性的网页应用。
4、深入理解DOM操作：从基础到实践
最新发布
g9h0i1的博客
10-08 19
本文深入讲解了DOM操作的核心概念与实践技巧，涵盖DOM基础、元素属性与文本修改、样式控制、节点的增删改查、元素复制与创建，并通过可扩展表单实例展示实际应用。同时强调ID唯一性、浏览器兼容性和性能优化等关键注意事项，帮助开发者高效、规范地进行动态网页开发。
php domdocument selectnodes,详解PHP使用DOMDocument类遍历、增加、修改、删除XML节点操作...
weixin_30630377的博客
03-12 276
详解PHP使用DOMDocument类遍历、增加、修改、删除XML节点操作Dom(Document object model)文档-对象-模型，核心思想是把一个Xml文件看成一个对象模型，然后通过对象的方式来操作Xml文件。我们先总结出DOM对象的属性方法，在分别用案例说明其应用！DOMDocument属性：Attributes存储节点的属性列表(只读)childNodes存储节点的子节点列表(只...
利用DOM来遍历所有元素（children和childNodes的区别）
热门推荐
Allenyhy的博客
09-30 1万+
如果一个元素的子元素里还有子元素，那么我们常常用到的一个方法就是递归 例子如下图所示： function traversal(dom){ var len = dom.length; var d = null; for(var i=0; i&lt;len; i++){ d = dom[i]; console.log(d); if(d....
DOM树、childNodes、节点的创建与操作
wu520xin的博客
03-06 982
DOM树中有4中节点类型            元素节点            属性节点            文本节点            注释节点        element对象        node对象            两者统称为DOM对象        节点的属性            nodeType 必须要了解            nodeName            ...
关于Dom的childNodes和childrens以及相关节点的获取
LXY224的博客
04-02 2027
进入春天的加州，慵懒的天气让我想起大学的午后DOM-文档对象模型Node类型 每个DOM节点都有一个nodeType的属性用来表示这个节点的类型。一共有12中类型，常见的的ELEMENT_NODE=1;ATTRIBUTE_NODE=2;TEXT_NODE=3例子&lt;div class="p"id="p"&gt;    p    &lt;div class="doughter"&gt;     ...
javascript DOM中的childNode问题
ljh_shuai的博客
12-05 3022
javascript DOM中的childNode问题childNodes到底怎么计算？如何准确找到想要的那个childNode？在看书时觉得childNodes就那么回事，可是真正用起来发现根本不知道如何准确找到想要的那个childNode。firstChild和lastChild也经常不知道是哪个。 首先说一下childNodes属性，返回子节点列表，这里子节点不包括子子节点，firstChi
JavaScript操作DOM元素的childNode…
aa_mmnn的博客
03-18 962
对于DOM元素，children是指DOM Object类型的子对象，不包括tag之间隐形存在的TextNode，而childNodes包括tag之间隐形存在的TextNode对象。 具体看一下针对children和childNodes在chrome环境下的测试：                       function test() { var o =
JavaScript DOM元素的childNodes和children的区别
10-08 1万+
对于DOM元素 children是指DOM Object类型的子对象，不包括tag之间隐形存在的TextNode； childNodes包括tag之间隐形存在的TextNode对象。 具体看一下针对children和childNodes在chrome环境下的测试： html> html> head> meta charset="UTF-8"> title
获取子元素节点(children,childNodes)
aoyi2760的博客
05-04 2352
在js中获取元素节点有DOM对应的方法如getElementsByTagName()等等。。对于获取子元素还有另外一种获取方法ChildNodes 不过ChidNodes在高级浏览器除（IE6-8）里面来说是"不太正常"的,因为它除了获取到了元素节点的同时也获取到了文本节点，这就是传说中的买一送一？不过，这个送一的活动咱们不想要的时候可以和nodeType结合，就可以进行筛选。代码如下...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值