Javascript的各种节点操作实例演示代码


Posted in Javascript onJune 27, 2012

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns=" http://www.w3.org/1999/xhtml"> 
<head> 
<title="Javascript的节点操作"></title> 
<script type="text/javascript" src="jquery-1.7.js"></script> 
</head> 
<body> 
<input type="button" id="test" name="nn" value="EFG"> 
<div id = "t">bbb</div> 
<div name="parent_test"> 
<div id = "t1"><span>aaa</span><span>bbb</span><span>ccc</span></div> 
</div> 
<div id = "fuzhi"><span>AAA</span><span>BBB</span><span>CCC</span></div><div id = "m"></div> 
<script type="text/javascript"> 
//搞清楚这三种 元素节点 属性节点 文本节点 
// 1:元素节点(对于元素节点,nodeName保存的始终是元素的标签名,而nodeValue的值始终是null) 
var element_node=document.getElementById('test'); 
//alert(element_node.nodeType); // 1 
//alert(element_node.nodeName); // input 
//alert(element_node.nodeValue); // null 
// 2:属性节点 
var attr_node=document.getElementById('test').getAttributeNode('name'); 
alert(attr_node.nodeType); // 2 
alert(attr_node.nodeName); // name 属性名 
alert(attr_node.nodeValue); // nn 属性值 
// 3:文本节点 
var all=document.getElementById('t').firstChild; 
//alert(all.nodeType); // 3 
//alert(all.nodeName); // #text 
//alert(all.nodeValue); // bbb 文本内容 
var tt1=document.getElementById('t1'); 
//alert(tt1.firstChild.innerHTML); // aaa 
//alert(tt1.lastChild.innerHTML); // ccc 
var tt2=tt1.childNodes[1].innerHTML; 
//alert(tt2);// bbb 
var tt3=tt1.parentNode.getAttribute('name'); 
//alert(tt3); // parent_test 
var tt4=tt1.childNodes[1]; 
//alert(tt4.nextSibling.innerHTML); // ccc 
//alert(tt4.previousSibling.innerHTML); //aaa 
// node方法的详细介绍 
var tt5=document.getElementById('test'); 
var tt6=document.getElementById('t') 
// hasChildNodes()方法:判定一个节点是否有子节点,有返回true,没有返回false 
//alert(tt5.hasChildNodes()); // false 
//alert(tt6.hasChildNodes()); // true 
//removeChild()方法:去除一个节点 
var first_node=document.getElementById('t1').firstChild; 
//document.getElementById('t1').removeChild(first_node); // 删除第一个节点 aaa 
// appendChild()方法:添加一个节点 如果文档树中已经存在该节点,则将它删除,然后在新位置插入。 
var first_node=document.getElementById('t1').firstChild; 
//document.getElementById('t1').appendChild(first_node); // aaa变成了最后一个节点 
// replaceChild()方法:从文档树中删除(并返回)指定的子节点,用另一个节点来替换它 
//insertBefore()方法:在指定节点的前面插入一个节点,如果已经存在,则删除原来的,然后在新位置插入。 
var newd=document.createElement("span"); 
newd.innerHTML="eee"; 
//document.getElementById('t1').appendChild(newd); // 加载一个子节点 
var oldd=document.getElementById('t1').lastChild; 
//document.getElementById('t1').replaceChild(newd,oldd); // 替换最后一个子节点 
//document.getElementById('t1').insertBefore(newd,oldd); // 在指定位置前面插入一个节点 aaabbbeeeccc 
// cloneNode()方法:复制一个节点,该方法有一个参数,true表示同时复制所有的子节点,false表示近复制当前节点。 
var what=document.getElementById('fuzhi').cloneNode(true).innerHTML; 
document.getElementById('m').innerHTML=what; 
</script> 
</body> 
</html>
Javascript 相关文章推荐
jquery miniui 教程 表格控件 合并单元格应用
Nov 25 Javascript
Extjs4 GridPanel的主要配置参数详细介绍
Apr 18 Javascript
javascript:void(0)是什么意思示例介绍
Nov 17 Javascript
asp.net刷新本页面的六种方法总结
Jan 07 Javascript
使用jQuery实现的掷色子游戏动画效果
Mar 14 Javascript
js实现Select列表各项上移和下移的方法
Aug 14 Javascript
jQuery采用连缀写法实现的折叠菜单效果
Sep 18 Javascript
js去字符串前后空格的实现方法
Feb 26 Javascript
JS实现页面打印(整体、局部)
Aug 18 Javascript
vue 动态改变静态图片以及请求网络图片的实现方法
Feb 07 Javascript
vue中组件的过渡动画及实现代码
Nov 21 Javascript
Vue中Table组件Select的勾选和取消勾选事件详解
Mar 19 Javascript
妙用Jquery的val()方法
Jun 27 #Javascript
jQuery.extend 函数的详细用法
Jun 27 #Javascript
浅谈Javascript事件处理程序的几种方式
Jun 27 #Javascript
javascript 事件处理程序介绍
Jun 27 #Javascript
jquery 获取自定义属性(attr和prop)的实现代码
Jun 27 #Javascript
IE事件对象(The Internet Explorer Event Object)
Jun 27 #Javascript
跨浏览器的事件对象介绍
Jun 27 #Javascript
You might like
php正则表达式使用的详细介绍
2013/04/27 PHP
php修改NetBeans默认字体的大小
2013/07/02 PHP
显示youtube视频缩略图和Vimeo视频缩略图代码分享
2014/02/13 PHP
PHP函数http_build_query使用详解
2014/08/20 PHP
PHP单例模式详解及实例代码
2016/12/21 PHP
TNC vs IO BO3 第二场2.13
2021/03/10 DOTA
ExtJS的FieldSet的column列布局
2009/11/20 Javascript
JavaScript判断窗口是否最小化的代码(跨浏览器)
2010/08/01 Javascript
浅谈JavaScript编程语言的编码规范
2011/10/21 Javascript
Js判断CSS文件加载完毕的具体实现
2014/01/17 Javascript
JS阻止用户多次提交示例代码
2014/03/26 Javascript
JavaScript事件委托的技术原理探讨示例
2014/04/17 Javascript
js操作cookie保存浏览记录的方法
2015/12/25 Javascript
微信QQ的二维码登录原理js代码解析
2016/06/23 Javascript
[js高手之路]原型式继承与寄生式继承详解
2017/08/28 Javascript
Vue.use源码学习小结
2018/06/20 Javascript
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
2019/11/19 Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
2020/08/13 Javascript
[01:21]DOTA2周边文化主题展 神秘商店火热开售
2017/07/30 DOTA
Python Json模块中dumps、loads、dump、load函数介绍
2018/05/15 Python
Python实现朴素贝叶斯分类器的方法详解
2018/07/04 Python
python实现根据指定字符截取对应的行的内容方法
2018/10/23 Python
在matplotlib的图中设置中文标签的方法
2018/12/13 Python
对python中GUI,Label和Button的实例详解
2019/06/27 Python
python爬虫刷访问量 2019 7月
2019/08/01 Python
建筑设计师岗位职责
2013/11/18 职场文书
长辈证婚人证婚词
2014/01/09 职场文书
大学生会计职业生涯规划范文
2014/02/28 职场文书
毕业实习自我鉴定范文2014
2014/09/26 职场文书
买卖合同协议书范本
2014/10/18 职场文书
2014年数学教研组工作总结
2014/12/06 职场文书
消费者理赔投诉书
2015/07/02 职场文书
高中班长竞选稿
2015/11/20 职场文书
文书工作总结(范文)
2019/07/11 职场文书
python内置进制转换函数的操作
2021/06/02 Python
Nginx代理Redis哨兵主从配置的实现
2022/07/15 Servers