JS中Node节点总结
Node的三个基本属性:
1.nodeType:表明节点类型,1是元素节点,3是文本节点。
2.nodeName: 表明节点名称,元素节点为标签名,文本节点为#text。
3.nodeValue:表明节点值,元素节点为null,文本节点为文本内容。
Node的节点关系:
1.parentNode与childNodes
parentNode寻找当前节点的父节点,childNodes寻找当前节点的子节点,其中包括文本节点和元素节点(特别需要注意空白的文本节点也算是节点)如下程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>childNodes.length</title>
</head>
<body>
<ul id="ul">
<li></li>
<li></li>
<li></li>
</ul>
<script>
var oUl=document.getElementById('ul');
alert(oUl.childNodes.length);//是7不是3
</script>
</body>
</html>
2:firstChild与lastChild
分别对应父节点的第一个节点与最后一个节点,firstChild相当于childNodes[0]或childNodes.item(0)。
3.nextSibling与previousSibling
分别对应当前节点的前一个节点与当前元素的后一个节点。
Node的操作节点:
Node的操作节点有appendChild(),insertBefore(),replaceChild(),removeChild(),cloneNode(),normalize()
1.appendChild(newNode)是将newNode添加到当前节点的最后一个子节点的后面,如果newNode已经是文档的一部分,则appendChild操作相当于剪切;若果newNode是新创造的节点,则appendChild操作相当于添加。
2.insertBefore(newNode,oldNode)是将newNode添加到当前节点的oldNode子节点的前面,如果insertBefore(newNode,null),则insertBefore()的操作和appendChild()一样。
3.replaceChild(newNode,oldNode)是将oldNode替换为newNode,不过oldNode的所有关系指针newNode也都继承下来。
4.removeChild(oldNode)是删除oldNode节点。
5.cloneNode(true/false)是将已知节点复制一份,如果为true,包括子节点,若果为false,不包括子节点。然后通过appendChild(),insertBefore(),replaceChild()将其添加到文档中。
6.normalize()是将空文本节点删除或将相邻的文本节点合并为一个文本节点。
JS中Node节点总结的更多相关文章
- js中DOM 节点的一些操作方法
什么是DOM DOM:文档对象模型.DOM 为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构.目的其实就是为了能让js操作html元素而制定的一个规范. DOM就是由节点组成的. 解析过程 ...
- js中的节点遍历+类数组对象
firstChild 第一个子元素 lastChild 最后一个子元素 childNodes[n] = childNodes.item(n) 第n+1个子元素 parentNode ...
- 原生JS中DOM节点相关API合集
节点属性 Node.nodeName //返回节点名称,只读 Node.nodeType //返回节点类型的常数值,只读 Node.nodeValue //返回Text或Comment节点的文本值,只 ...
- js中属性节点的应用
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- JS中插入节点的方法appendChild和insertBefore的应用
1.appendChild() 方法:可以向节点的子节点列表的末尾添加新的子节点.比如:appendChild(newchild)括号里可以是创建的标签var newchild = document. ...
- JS中Text节点总结
文本节点有Text类型表示,包含的是可以找字面解释的纯文本内容.纯文本中可以包含转移后的HTML字符,但不能包含HTML代码.Text节点具有以下属性: 1.nodeType的值为3. 2.nodeN ...
- JS中Document节点总结
document对象是documentHTML的一个实例,也是window对象的一个属性,因此可以将document对象作为一个全局对象来访问. Document节点的子节点可以是DocumentTy ...
- js中对节点属性的操作和对节点的操作
常用的节点属性操作方法 1.setAttribute(name,value):给某个节点添加一个属性 2.getAttribute(name):获取某个节点属性的值. 3.removeAttribut ...
- Kubernetes容器集群管理环境 - Node节点的移除与加入
一.如何从Kubernetes集群中移除Node比如从集群中移除k8s-node03这个Node节点,做法如下: 1)先在master节点查看Node情况 [root@k8s-master01 ~]# ...
随机推荐
- 跟着刚哥梳理java知识点——集合(十二)
Java集合分为Collection和Map两种体系 一.Collection接口: Collections接口为我们提供了以下方法: size():返回集合中元素的个数 add(Object obj ...
- java多线程基本概述(七)——join()方法
在很多情况下,主线程创建并启动子线程,如果子线程中有大量的耗时运算,主线程将早于子线程结束,如果想让主线程等待子线程结束后再结束,那么我们可以使用join()方法.调用join()方法的意思是当前线程 ...
- HTML、CSS、JS 样式
把一个数组(一维或二维等)的内容转化为对应的字符串.相当于把print_r($array)显示出来的内容赋值给一个变量.$data= array('hello',',','world','!'); $ ...
- 单片机下载芯片max232,ch340,pl2303,hl340与下载接线
开发板上的下载口位置一般都有很多 340,232等芯片,这些芯片都是干嘛用的呢? 普及:TTL电平 : 二进制电平,+5V等价于逻辑"1",0V等价于逻辑"0&qu ...
- bootstrap table分页后刷新跳到第一页
之前这样写是不行的,这时候页数还是原来的页数 $('#tb_departments').bootstrapTable(('refresh')); 需要改成: $("#tb_departmen ...
- 2017河工大校赛补题CGH and 赛后小结
网页设计课上实在无聊,便开始补题,发现比赛时候僵着的东西突然相通了不少 首先,"追妹"这题,两个队友讨论半天,分好多种情况最后放弃(可是我连题目都没看啊),今天看了之后试试是不是直 ...
- c# 基础算法(一) 九九乘法
闲来无事,偶见某贴子里面讨论面试题.突然对一题产生了兴趣,做一道99乘法打印(主要是我工作了2家单位,还没有一家单位在面试时给我出这一道题)于是试着自己写写看.大概逻辑如下 class program ...
- python基础教程第二版 第一章
1.模块导入python以增强其功能的扩展:三种方式实现 (1). >>> Import math >>> math.floor(32.9) 32.0 #按照 模块 ...
- 二、AspNet Core添加EF的基本方法(简略版):
_/\__ ---==/ \\ |. \|\ | ) \\\ \_/ | //|\\ / \\\/\\ 1.在Project.json的dependencies选项中添加以下引用: "Mic ...
- Elasticsearch 全量遍历数据
1,利用分页,from,to参数,但是当数据量特别大的时候(大约100w),分页是不现实的,排序排不开. 2,利用scan功能. 上 Python代码 from elasticsearch impor ...