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节点总结的更多相关文章

  1. js中DOM 节点的一些操作方法

    什么是DOM DOM:文档对象模型.DOM 为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构.目的其实就是为了能让js操作html元素而制定的一个规范. DOM就是由节点组成的. 解析过程 ...

  2. js中的节点遍历+类数组对象

    firstChild  第一个子元素 lastChild  最后一个子元素 childNodes[n]  =   childNodes.item(n)    第n+1个子元素 parentNode  ...

  3. 原生JS中DOM节点相关API合集

    节点属性 Node.nodeName //返回节点名称,只读 Node.nodeType //返回节点类型的常数值,只读 Node.nodeValue //返回Text或Comment节点的文本值,只 ...

  4. js中属性节点的应用

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  5. JS中插入节点的方法appendChild和insertBefore的应用

    1.appendChild() 方法:可以向节点的子节点列表的末尾添加新的子节点.比如:appendChild(newchild)括号里可以是创建的标签var newchild = document. ...

  6. JS中Text节点总结

    文本节点有Text类型表示,包含的是可以找字面解释的纯文本内容.纯文本中可以包含转移后的HTML字符,但不能包含HTML代码.Text节点具有以下属性: 1.nodeType的值为3. 2.nodeN ...

  7. JS中Document节点总结

    document对象是documentHTML的一个实例,也是window对象的一个属性,因此可以将document对象作为一个全局对象来访问. Document节点的子节点可以是DocumentTy ...

  8. js中对节点属性的操作和对节点的操作

    常用的节点属性操作方法 1.setAttribute(name,value):给某个节点添加一个属性 2.getAttribute(name):获取某个节点属性的值. 3.removeAttribut ...

  9. Kubernetes容器集群管理环境 - Node节点的移除与加入

    一.如何从Kubernetes集群中移除Node比如从集群中移除k8s-node03这个Node节点,做法如下: 1)先在master节点查看Node情况 [root@k8s-master01 ~]# ...

随机推荐

  1. 腾讯云上PhantomJS用法示例

    崔庆才 前言 大家有没有发现之前我们写的爬虫都有一个共性,就是只能爬取单纯的html代码,如果页面是JS渲染的该怎么办呢?如果我们单纯去分析一个个后台的请求,手动去摸索JS渲染的到的一些结果,那简直没 ...

  2. Java线程池ThreadPoolExecutor使用和分析(三) - 终止线程池原理

    相关文章目录: Java线程池ThreadPoolExecutor使用和分析(一) Java线程池ThreadPoolExecutor使用和分析(二) - execute()原理 Java线程池Thr ...

  3. 用C#写经理评分系统

    先写需求: 01.显示员工信息      02.实现项目经理给员工评分的功能 第一步:      建立两个类,员工类和项目经理类      定义属性和方法     员工类:工号.年龄.姓名.人气值.项 ...

  4. 树状数组 && 线段树

    树状数组 支持单点修改 #include <cstdio> using namespace std; int n, m; ], c[]; int lowbit(int x) { retur ...

  5. 使用Dockerfile制作自己的Docker镜像

    一.背景 一直以来的开发流程都是先从Docker Hub中获取到基础镜像,之后在这个镜像的基础上做开发,以满足一定的需求或者提供某种服务,并由此产生新的镜像,然后就可以push到Docker Hub中 ...

  6. 除去ubuntu的grub引导

    除去ubuntu的grub引导 step如下>> 进入ubuntu终端 sudo gedit /etc/defauli/grub 将 #GRUB_HIDDEN_TIMEOUT=0 最前面的 ...

  7. 【转】JDBC学习笔记(2)——Statement和ResultSet

    转自:http://www.cnblogs.com/ysw-go/ Statement执行更新操作 Statement:Statement 是 Java 执行数据库操作的一个重要方法,用于在已经建立数 ...

  8. python在cmd上导包成功,但是python charm上面就提示找不到

    失败 成功 原因:我的python file名称和numpy 的名字一样了,把python file 的名字改了就好了

  9. IDEA第五章----Git常用技能

    前几篇已经介绍了idea的环境搭建及基础配置常用模板等,这一章我们介绍下idea中git的一些常用技能,包括提交文件,排除提交文件,合并分支,解决冲突,还原代码等等等. 第一节:Git常用技能 Git ...

  10. webstorm快捷键收集【转发】

    WebStorm快捷键收集   1.webstorm快捷键: IntelliJ-Idea 的快捷键 Ctrl+/ 或 Ctrl+Shift+/ 注释(// 或者/*…*/ ) Shift+F6 重构- ...