DOM之子节点

最新推荐文章于 2024-03-16 22:41:32 发布
最新推荐文章于 2024-03-16 22:41:32 发布
阅读量392 收藏
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31305965/article/details/89531887
版权

说明单独将子节点这一节单独拿出来记录的原因：在学习和实际开发中，发现了一些问题，为避免遗忘或在以后开发中造成疑惑，故将这一块单独记录。

1.childNodes

childNodes 是一个只读的类数组对象（ NodeList 对象），它是某一个节点的子节点的实时表示。

需要注意的是，这里面有一些坑。

<body><ul><li></li><li></li></ul></body>

对这个 html 片段， 使用 childNodes 得到 ul 的子节点的个数为2，但是在下面这个html片段中，

   <body>
   		<ul>
   			<li></li>
   			<li></li>
   		</ul>
   	</body>

IE 6 - IE 8 得到的子节点个数为 2 ，而 IE 高版本浏览器及其它浏览器中会得到子节点个数为5，因为这些浏览器将html片段里面的空格当成了文本节点。

为避免在使用时出错，所以一般 childNodes 与 noteType 一起使用。

2. nodeType

nodeType表示一个节点的类型。

  • 9 Document节点
  • 1 Element节点
  • 3 Text节点
  • 8 Comment节点
  • 11 DocumentFragmet节点

在使用 childNodes 时，为避免选错元素，一般两个一起使用，如

var oUl =  document.getElementsByTagName('ul')[0];
var aLi = oUl.childNodes;
for(var i= 0; i < aLi.length; i++){
	if(aLi[i].nodeType == 1){
	 		......
	}
	else{
			......
	}
}

3. firstChild 、lastChild

表示某一个节点的第一个和最后一个子节点，当这一个节点没有子节点时返回null。

这两个属性与childNodes属性有一样的问题，所以使用时也应当小心，最好也是跟nodeType一起使用。

4. firstElementChild 、lastElementChild

可以使用这个代替firstChild 、lastChild，这样就不会将文本节点参杂进来。但是需要注意的是，这俩方法不兼容低版本IE。

5. children

Text和Coment节点没有children属性，所以children属性只包含Element对象，所以可以使用它来代替childNodes，并且可以轻易的避免不必要节点的混入。

但是目前主流开发中，貌似很少看到有使用children属性，不知道是不是有什么问题还是大家都不习惯使用，可能本人信息比较落后而已哈。

6. 其它

本文所述均假设 开发过程只需要使用Element节点，当有情况于此相悖时，可适当甄别或做其它参考，详细参考可见 https://www.w3.org/TR/ElementTraversal/ 。

参考文献

【1】 《JavaScript权威指南第六版》
【2】 https://www.w3.org/TR/ElementTraversal/

蜡笔小逹
关注
专栏目录
DOM - 节点操作
m0_70552412的博客
09-04 1133
网页中所有的内容都是节点（标签，属性，文本，注释等），在DOM中，节点使用 node 来表示HTML DOM 树中所有的节点均可通过 java Script 进行访问，所有HTML元素（节点）均可被修改，也可以创建和删除。一般来说，节点至少拥有nodeType（节点类型） nodeName（节点名称）和nodeValue（节点值）这三个基本属性。元素节点 nodeType 为1属性节点 nodeType 为2文本节点 nodeType 为3 （文本节点包含文字，空格，换行等）
DOM基础——节点操作:子节点
和上帝躲猫猫
11-04 768
父节点、子节点 节点类型：元素节点、属性节点、文本节点、注释节点、document节点 nodeType属性：查看节点类型 返回值：1-->元素节点 2-->属性节点 3-->文本节点 8-->注释节点 9-->document节点 nodeName属性：查看节点名称 nodeValue属性：查看节点的值 childNodes（标准属性）：子节点 在ie9（包括ie9）以上及标准浏览器，会把标
DOM的概念及子节点类型
anbachun6816的博客
11-10 209
前言 DOM的作用是将网页转为一个javascript对象，从而可以使用javascript对网页进行各种操作(比如增删内容)。浏览器会根据DOM模型，将HTML文档解析成一系列的节点，再由这些节点组成一个树状结构。DOM的最小组成单位叫做节点(node)，文档的树形结构(DOM树)由12种类型的节点组成。 一：DOM ==> 全称： document Object Mo...
js DOM子节点
weixin_44154094的博客
01-17 498
DOM元素节点各个方法 各个方法 childNodes属性会获取包括文本节点在呢的所有节点,根据DOM标签标签间空白也会当成文本节点 firstChild可以获取到当前元素的第一个子节点，包括空白文本。 firstElementChild获取当前元素的第一个子元素,不支持IE8及以下的浏览器，如果需要兼容他们 尽量不要使用 previousSibling获取前一个兄弟节点，有可能获取到空白文本 previousElementSibling获取前一个兄弟元素，IE8及以下不
DOM子节点操作
baozouqianxun的博客
11-09 282
##DOM节点操作 1.访问元素 document.getElementById // 根据ID名获取 document.getElementsByClassName //根据类名获取 document.getElementsByTagName //根据标签名获取 document.getElementsByName //根据Name获取 document.querySelector //根据css选择器获取其第一个元素 document.querySelectorAll //根据css选择获取其所有元素
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
10-18
在给定的文件内容中，我们可以看到如何使用JavaScript来操作DOM，具体是在一个HTML文档中插入新的子节点和兄弟节点。 知识点1：DOM节点的分类 在DOM中，节点可以是不同类型的实体，例如元素节点、文本节点或属性...
dom-collection:DOM元素子节点的基于索引的集合操作方法
06-05
DOM 元素子节点的基于索引的集合操作方法。 应用程序接口 insertAt（元素，索引，父） 在特定索引处插入 DOM 元素。 moveAt（元素，索引，父） 将 DOM 元素移动到特定索引。 replaceAt（元素，索引，父） 替换...
JS实现访问DOM对象指定节点的方法示例
10-18
本示例主要讲解如何使用JavaScript实现访问DOM对象指定的节点，包括使用`getElementById()`方法，以及通过`nodeName`、`nodeType`和`nodeValue`属性获取节点的相关信息。 **一、介绍** 1. **getElementById()方法*...
利用vue.js插入dom节点的方法
12-29
本文主要介绍的是vue.js插入dom节点的方法，下面话不多说，来看看详细的介绍吧。 html代码： <div id=app></div> js代码： var MyComponent = Vue.extend({ template: '<div>Hello World</div>' }) var ...
Morris算法遍历二叉树
qq_40585050的博客
09-09 655
中序遍历步骤 如果当前节点左子节点(cur.left)为空，输出当前节点(cur)，进入右子节点(cur.right)。 如果当前节点左子节点(cur.left)非空，找到当前节点左子树的最右节点(mostRight)： 1）如果该节点的右子节点(mostRight.right)为空，则将其指针指向当前节点(cur)，进入左子节点(cur.left)。 2）如果该节点的右子节点(mostRight.right)非空，则将其指针置为空，输出当前节点(cur)，进入右子节点(cur.right)。
js DOM的概念及子节点类型
qq_35187942的博客
01-04 471
DOM:Document Object Model 文档对象模型 文档：html页面 文档对象：页面中元素 文档对象模型：定义为了能够让程序（js）去操作页面中的元素   DOM会把文档看作是一棵树，同时定义了很多方法来操作这棵树中的每一个元素（节点） 元素.childNodes:只读 属性 子节点列表集合 只包含一级子节点，不包含后辈孙级以下节点 DOM节点的类型有很多种 12种...
JavaScript DOM 获取子节点
MW
04-02 420
childNodes 访问当前节点下所有的子节点 firstChild 访问子节点中的首位 lastChild 访问子节点中的最后一位 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>获取子节点</t...
dom 子节点（获取）
qq_45827064的博客
05-17 173
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Do
【学习笔记40】DOM的节点操作
yizhiyang
11-27 1449
DOM的节点操作
dom获取节点（子节点、兄弟节点、父节点）
热门推荐
张木期的博客
07-16 1万+
今天在做一个项目拿兄弟节点的事，刚开始拿不到，后来网上查了一下，于是 便找到方法了，下面把我的问题写出来，话不多说直接上问题， 遇到的问题是我要通过点击删除按钮删除这一行数据，后端给的接口要传的参数就是设备编号（imei），重点是这个列表本身也是动态的数据，用框架渲染出来的，然后就想到了用dom节点来删除，还算比较简单， 我要获取的就是imei，然后通过ajxa调用接口删除，完美实现，下面是源码...
一文读懂JavaScript DOM节点操作（JavaScript DOM节点操作详解）
zhishunet
01-20 743
DOM模型是树状结构模型，二组成这棵树的就是一个个点，在网络术语中称之为节点。节点是一个模型中最基本的组成单位。DOM模型是由一个个节点组成的，DOM节点也有其不同的类型。
DOM访问关系（父节点 子节点）
darrk1234的博客
09-12 195
把下面的知识点掌握了，可以做一下下面的案例，都是工作中常用的，很有用 知识点 1、带Eleent和不带区别 a）带Element的获取的是元素节点 b）不带Element的获取文本节点和属性节点 关系访问节点 1、获取父节点 parentNode li.parentNode.style.background="green" ...
DOM元素子父节点的操作
我的博客
08-07 1690
1. 获取当前元素的子元素的个数 对象名.childElementCount 子元素只包含标签元素 2. 获取当前元素的子节点集合对象名.childNodes ——>NodeList集合 子节点包括：标签元素、文本元素 3.对某一节点的内容获取 ① 节点对象.nodeType: 其中1代表标签元素，3代表文本元素 ② 节点对象.nodeName: 节点对应的名称（li/#text/ul...
JavaScript-DOM-基础：节点查找与节点操作(1)
最新发布
m0_60635321的博客
03-16 654
由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】为了避免影响到大家的阅读体验，在此只以截图展示部分内容开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值