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 相关文章推荐
基于jsTree的无限级树JSON数据的转换代码
Jul 27 Javascript
Jquery刷新页面背景图片随机变换的实现方法
Mar 15 Javascript
Javascript字符串拼接小技巧(推荐)
Jun 02 Javascript
基于vuejs实现一个todolist项目
Apr 11 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 jQuery
Swiper实现轮播图效果
Jul 03 Javascript
原生JS实现自定义滚动条效果
Oct 27 Javascript
jQuery实现的页面遮罩层功能示例【测试可用】
Oct 14 jQuery
QQ跳转支付宝并自动领红包脚本(最新)
Jun 22 Javascript
在vue项目中引用Iview的方法
Sep 14 Javascript
Vue+Bootstrap收藏(点赞)功能逻辑与具体实现
Oct 22 Javascript
javascript this指向相关问题及改变方法
Nov 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
一个程序下载的管理程序(三)
2006/10/09 PHP
PHP 日期加减的类,很不错
2009/10/10 PHP
php实现向javascript传递数组的方法
2015/07/27 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
PHP mongodb操作类定义与用法示例【适合mongodb2.x和mongodb3.x】
2018/06/16 PHP
4种Windows系统下Laravel框架的开发环境安装及部署方法详解
2020/04/06 PHP
js实现简单模态窗口,背景灰显
2008/11/14 Javascript
JS 自动安装exe程序
2008/11/30 Javascript
jQuery总体架构的理解分析
2011/03/07 Javascript
jquery.pagination.js 无刷新分页实现步骤分享
2012/05/23 Javascript
可插入图片的TEXT文本框
2013/12/27 Javascript
Json实现异步请求提交评论无需跳转其他页面
2014/10/11 Javascript
jquery插件Jplayer使用方法简析
2016/04/22 Javascript
TypeScript入门-基本数据类型
2017/03/28 Javascript
自定义vue组件发布到npm的方法
2018/05/09 Javascript
vue this.reload 方法 配置
2018/09/12 Javascript
ES10 特性的完整指南小结
2019/03/04 Javascript
Vue Autocomplete 自动完成功能简单示例
2019/05/25 Javascript
浅析TypeScript 命名空间
2020/03/19 Javascript
前端性能优化建议
2020/09/17 Javascript
jQuery实现购物车全功能
2021/01/11 jQuery
Python学习笔记(一)(基础入门之环境搭建)
2014/06/05 Python
Python三种遍历文件目录的方法实例代码
2018/01/19 Python
python3调用百度翻译API实现实时翻译
2018/08/16 Python
Python实现正则表达式匹配任意的邮箱方法
2018/12/20 Python
python查看数据类型的方法
2019/10/12 Python
python使用pip安装SciPy、SymPy、matplotlib教程
2019/11/20 Python
python入门:argparse浅析 nargs='+'作用
2020/07/12 Python
Foot Locker意大利官网:全球领先的运动鞋和服装零售商
2017/05/30 全球购物
中式婚礼主持词
2014/03/13 职场文书
结婚喜宴主持词
2014/03/14 职场文书
网站创业计划书
2014/04/30 职场文书
亲子运动会的活动方案
2014/08/17 职场文书
2016年暑假学生家长评语
2015/12/01 职场文书
Memcached介绍及php-memcache扩展安装
2021/04/01 PHP
Spring JPA 增加字段执行异常问题及解决
2022/06/10 Java/Android