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 相关文章推荐
JS 参数传递的实际应用代码分析
Sep 13 Javascript
JQuery select标签操作代码段
May 16 Javascript
jquery.form.js实现将form提交转为ajax方式提交的方法
Apr 07 Javascript
AngularJS 使用$sce控制代码安全检查
Jan 05 Javascript
jquery+json实现动态商品内容展示的方法
Jan 14 Javascript
JS实现自定义状态栏动画文字效果示例
Oct 12 Javascript
vue中引用阿里字体图标的方法
Feb 10 Javascript
详解如何webpack使用DllPlugin
Sep 30 Javascript
使用vuepress搭建静态博客的示例代码
Feb 14 Javascript
package.json各个属性说明详解
Mar 11 Javascript
js+css3实现炫酷时钟
Aug 18 Javascript
js中延迟加载和预加载的具体使用
Jan 14 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针对数字的加密解密类
2014/03/20 PHP
PHP高手需要要掌握的知识点
2014/08/21 PHP
WordPress中重置文章循环的rewind_posts()函数讲解
2016/01/11 PHP
PHP实现UTF8二进制及明文字符串的转化功能示例
2017/11/20 PHP
javascript 点击整页变灰的效果(可做退出效果)。
2008/01/09 Javascript
jQuery 入门讲解1
2009/04/15 Javascript
javascript textContent与innerText的异同分析
2010/10/22 Javascript
探讨javascript是不是面向对象的语言
2013/11/21 Javascript
jquery获得同源iframe内body下标签的值的方法
2014/09/25 Javascript
利用Angularjs实现幻灯片效果
2016/09/07 Javascript
基于angularJS的表单验证指令介绍
2016/10/21 Javascript
jQuery Easyui 下拉树组件combotree
2016/12/16 Javascript
JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】
2017/04/01 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
2018/01/20 Javascript
微信小程序如何获取openid及用户信息
2018/01/26 Javascript
JS实现倒序输出的几种常用方法示例
2019/04/13 Javascript
详解如何运行vue项目
2019/04/15 Javascript
VUE前后端学习tab写法实例
2019/08/06 Javascript
Vue.extend 编程式插入组件的实现
2019/11/18 Javascript
js canvas实现俄罗斯方块
2020/10/11 Javascript
Python打包可执行文件的方法详解
2016/09/19 Python
python 列表,数组和矩阵sum的用法及区别介绍
2018/06/28 Python
基于python的selenium两种文件上传操作实现详解
2019/09/19 Python
Python字符串中删除特定字符的方法
2020/01/15 Python
使用pandas库对csv文件进行筛选保存
2020/05/25 Python
Python urlopen()参数代码示例解析
2020/12/10 Python
Feelunique中文官网:欧洲最大化妆品零售电商
2020/07/10 全球购物
广播电视新闻学专业应届生求职信
2013/10/08 职场文书
高中生学习生活的自我评价
2013/11/27 职场文书
优秀团员事迹材料2000字
2014/08/20 职场文书
2015年审计人员工作总结
2015/05/26 职场文书
劳动保障事务所个人工作总结
2015/08/12 职场文书
感恩主题班会教案
2015/08/12 职场文书
Python anaconda安装库命令详解
2021/10/16 Python
Nginx内网单机反向代理的实现
2021/11/07 Servers
基于Python实现流星雨效果的绘制
2022/03/18 Python