Javascript 节点 全面解析
源文:http://w3c.web600.net/html/JavaScript/JavaScriptb/20090404/700.html
Node的属性介绍:
nodeType:显示节点的类型
nodeName:显示节点的名称
nodeValue:显示节点的值
attributes:获取一个属性节点
firstChild:表示某一节点的第一个节点
lastChild:表示某一节点的最后一个子节点
childNodes:表示所在节点的所有子节点
parentNode:表示所在节点的父节点
nextSibling:紧挨着当前节点的下一个节点
previousSibling:紧挨着当前节点的上一个节点
ownerDocument:(不知)
Node有各种各样的节点,我们先花一些时间认识他们,同时一并了解nodeType,nodeName和nodeValue属性:
名称:元素节点
nodeType:ELEMENT_NODE
nodeType值:1
nodeName:元素标记名
nodeValue:null
<body>
<div id = "t" ><span></span></div>
</body>
<script>
var d = document.getElementById("t");
document.write(d.nodeType);
document.write(d.nodeName);
document.write(d.nodeValue);
//显示 1 DIV null
</script>
名称:属性节点
nodeType:ATTRIBUTE_NODE
nodeType值:2
nodeName:属性名
nodeValue:属性值
<body>
<div id = "t" name="aaa"><span></span></div>
</body>
<script>
var d = document.getElementById("t").getAttributeNode("name");
document.write(d.nodeType);
document.write(d.nodeName);
document.write(d.nodeValue);
//显示 2 name aaa
</script>
名称:文本节点
nodeType:TEXT_NODE
nodeType值:3
nodeName:#text
nodeValue:文本内容
<body>
<div id = "t">bbb</div>
</body>
<script>
var d = document.getElementById("t").firstChild;
document.write(d.nodeType);
document.write(d.nodeName);
document.write(d.nodeValue);
//显示 3 #text bbb
</script>
名称:CDATA文本节点(XML中传递文本的格式)
nodeType:CDATA_SECTION_NODE
nodeType值:4
nodeName:#cdata-section
nodeValue:CDATA文本内容
(作者省略8个属性,需技术补充)
attributes属性,直接获取一个属性节点,注意这里要使用[],保持IE和FF的兼容性。
<body name="ddd">
<div id = "t" name = "aaa"><span>aaa</span><span>bbb</span><span>ccc</span></div>
</body>
<script>
var d = document.getElementById("t").attributes["name"];
document.write(d.name);
document.write(d.value);
//显示 name aaa
</script>
firstChild和lastChild属性,表示某一节点的第一个和最后一个子节点:
<body>
<div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>
</body>
<script>
var d = document.getElementById("t");
document.write(d.firstChild.innerHTML);
document.write(d.lastChild.innerHTML);
//显示 aaa ccc
</script>
childNodes和parentNode属性,表示所在节点的所有子节点和所在节点的父节点,这里的childNodes注意是一个数组:
<body name="ddd">
<div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>
</body>
<script>
var d = document.getElementById("t");
document.write(d.childNodes[1].innerHTML);
document.write(d.parentNode.getAttribute("name"));
//显示 bbb ddd
</script>
nextSibling和previousSibling属性,分别表示在parentNode的childNodes[]数组中,紧挨着当前节点的上一个和下一个节点:
<body name="ddd">
<div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>
</body>
<script>
var d = document.getElementById("t").childNodes[1];
document.write(d.nextSibling.innerHTML);
document.write(d.previousSibling.innerHTML);
//显示 ccc aaa
</script>
ownerDocument属性(不知如何使用)
Node的方法介绍:
hasChildNodes():判定一个节点是否有子节点
removeChild():去除一个节点
appendChild():添加一个节点
replaceChild():替换一个节点
insertBefore():指定节点位置插入一个节点
cloneNode():复制一个节点
normalize():(不知)
hasChildNodes()方法:判定一个节点是否有子节点,有返回true,没有返回false
<body name="ddd">
<div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>
<div id = "m"></div>
</body>
<script>
alert(document.getElementById("t").hasChildNodes());
alert(document.getElementById("m").hasChildNodes());
// 第一个true,第二个false
</script>
removeChild()方法:去除一个节点
<body name="ddd">
<div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>
</body>
<script>
var d = document.getElementById("t").firstChild;
document.getElementById("t").removeChild(d);
// <span>aaa</span>被去除
</script>
appendChild()方法:添加一个节点,如果文档树中已经存在该节点,则将它删除,然后在新位置插入。
<body name="ddd">
<div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>
</body>
<script>
var d = document.getElementById("t").firstChild;
document.getElementById("t").appendChild(d);
// <span>aaa</span>成了最后一个节点
</script>
replaceChild()方法:从文档树中删除(并返回)指定的子节点,用另一个节点来替换它。
<body name="ddd">
<div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>
</body>
<script>
var newd = document.createElement("span");
newd.innerHTML = "eee";
var oldd = document.getElementById("t").lastChild;
document.getElementById("t").replaceChild(newd,oldd);
// 最后一项成了 eee
</script>
insertBefore()方法:在指定节点的前面插入一个节点,如果已经存在,则删除原来的,然后在新位置插入
<body name="ddd">
<div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>
</body>
<script>
var newd = document.createElement("span");
newd.innerHTML = "eee";
var where = document.getElementById("t").lastChild;
document.getElementById("t").insertBefore(newd,where);
// 在最后一项的前面多了一项 eee
</script>
cloneNode()方法:复制一个节点,该方法有一个参数,true表示同时复制所有的子节点,false表示近复制当前节点
<body name="ddd">
<div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div><div id = "m"></div>
</body>
<script>
var what = document.getElementById("t").cloneNode(false).innerHTML;
document.getElementById("m").innerHTML = what;
// 增加了一个aaabbbccc
</script>
Javascript 节点 全面解析相关推荐
- JavaScript重难点解析5(对象高级、浏览器内核与事件循环模型(js异步机制))
JavaScript重难点解析5(对象高级.浏览器内核与事件循环模型(js异步机制) 对象高级 对象创建模式 Object构造函数模式 对象字面量模式 工厂模式 自定义构造函数模式 构造函数+原型的组 ...
- JavaScript的语法解析与抽象语法树
抽象语法树(Abstract Syntax Tree)也称为AST语法树,指的是源代码语法所对应的树状结构.也就是说,对于一种具体编程语言下的源代码,通过构建语法树的形式将源代码中的语句映射到树中的每 ...
- 转JavaScript的语法解析与抽象语法树
JavaScript的语法解析与抽象语法树 Jul 10, 2015 抽象语法树(Abstract Syntax Tree)也称为AST语法树,指的是源代码语法所对应的树状结构.也就是说,对于一种具体 ...
- JavaScript重难点解析6(Promise)
JavaScript重难点解析6(Promise 概念 为什么要使用Promise Promise 的状态 Promise 对象的值 Promise工作流程 基本用法 Promise其他方法 asyn ...
- JavaScript重难点解析4(作用域与作用域链、闭包详解)
JavaScript重难点解析4(作用域与作用域链.闭包详解) 作用域与作用域链 作用域 作用域与执行上下文 作用域链 闭包 闭包理解 将函数作为另一个函数的返回值 将函数作为实参传递给另一个函数调用 ...
- JavaScript重难点解析3(原型与原型链、执行上下文与执行上下文栈)
JavaScript重难点解析3(原型与原型链.执行上下文与执行上下文栈) 原型与原型链 原型(prototype) 显示原型与隐式原型 原型链 instanceof是如何判断 执行上下文与执行上下文 ...
- JavaScript重难点解析2(立即执行函数IIFE,this关键字)
JavaScript重难点解析2(立即执行函数IIFE,this关键字) 立即执行函数 this关键字 立即执行函数 也叫做匿名函数自调用,可以在定义一段函数之后直接让其执行. ;(function ...
- JavaScript重难点解析1(数据类型——var、let、const区别,类型补充,“===”、“typeof”、“instanceof”区别,Symbol数据类型)
JavaScript重难点解析1(数据类型) var.let.const区别: 类型补充 "==="."typeof"."instanceof&quo ...
- JavaScript数组常用方法解析和深层次js数组扁平化
前言 数组作为在开发中常用的集合,除了for循环遍历以外,还有很多内置对象的方法,包括map,以及数组筛选元素filter等. 注:文章结尾处附深层次数组扁平化方法操作. 作为引用数据类型的一种,在处 ...
最新文章
- 修改MySql默认存储引擎为InnoDB,启动报错
- 虚拟机共享文件夹引发的一点思考
- Python之路(第三十一篇) 网络编程:简单的tcp套接字通信、粘包现象
- 学习ModSecrity Handbook之摘录
- 腾讯地图api修改信息窗口样式_DOTA2 地图编辑器指南(二):总览
- python与材料计算公式_《从问题到程序:用Python学编程和计算》——2.11 补充材料-阿里云开发者社区...
- phpstudy(自己电脑主机做服务器,手机网站界面打不开)
- echarts 地图常见效果
- php图片滑动代码,基于mootools 1.3框架下的图片滑动效果代码_Mootools
- 基于DEV控件库的webservice打印.repx模板
- unity 调c++的dll
- 华为机试4.27:购买水果最便宜的方案
- 计数器verilog代码(quartus II)
- 强烈推荐 20 个免费和开源数据可视化工具
- 科目二 侧方位停车 流程记录 LTS
- Ubuntu | ubuntu下安装edge
- php修改服务器ip地址,php修改服务器ip地址
- 无线连接中心服务器连接异常,解决Win7/Win8.1的无线网络连接受限故障
- 湖北武汉施工员报考施工员安全意识的建立方法建筑七大员报考
- T470P笔记本安装固态以及固态中安装系统_完整步骤
热门文章
- 在Visual C++下搭建OpenGL的开发环境
- 博为峰Java技术题 ——JavaSE Java Swing组件类的层次
- Spring(三)AOP面向切面编程
- Android使用ksoap2-android调用WebService学习
- Hyper-V 网卡 load failed
- @ResponseBody 和 @RequestBody 的作用
- 异常处理(try/catch)
- SpringMVC过程中@RequestBody接收Json的问题 总是报415
- nginx之upsream实现负载均衡
- Mysql中文乱码问题完美解决方案