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 标题的自动翻转实现代码
Oct 14 Javascript
浅析jQuery对select操作小结(遍历option,操作option)
Jul 04 Javascript
jQuery ajax调用WCF服务实例
Jul 16 Javascript
JavaScript定义变量和变量优先级问题探讨
Oct 11 Javascript
js识别uc浏览器的代码
Nov 06 Javascript
javascript如何定义对象数组
Jun 07 Javascript
微信小程序教程之本地图片上传(leancloud)实例详解
Nov 16 Javascript
vue自定义filters过滤器
Apr 26 Javascript
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
Sep 10 jQuery
Vue基础配置讲解
Nov 29 Javascript
Vue父子之间值传递的实例教程
Jul 02 Javascript
解决ant-design-vue中menu菜单无法默认展开的问题
Oct 31 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
WINDOWS下php5.2.4+mysql6.0+apache2.2.4+ZendOptimizer-3.3.0配置
2008/03/28 PHP
Ext.data.PagingMemoryProxy分页一次性读取数据的实现代码
2010/04/07 PHP
php is_file 判断给定文件名是否为一个正常的文件
2010/05/10 PHP
JSON在PHP中的应用介绍
2012/09/08 PHP
PHP随机字符串生成代码(包括大小写字母)
2013/06/24 PHP
如何修改和添加Apache的默认站点目录
2013/07/05 PHP
PHP开发Apache服务器配置
2015/07/15 PHP
理解php依赖注入和控制反转
2016/05/11 PHP
php实现socket推送技术的示例
2017/12/20 PHP
为jquery.ui.dialog 增加“自动记住关闭时的位置”的功能
2009/11/24 Javascript
使用jQuery实现dropdownlist的联动效果(sharepoint 2007)
2011/03/30 Javascript
js获取通过ajax返回的map型的JSONArray的方法
2014/01/09 Javascript
JavaScript取得WEB安全颜色列表的方法
2015/07/14 Javascript
利用BootStrap弹出二级对话框的简单实现方法
2016/09/21 Javascript
javaScript基础详解
2017/01/19 Javascript
JSON 数据详解及实例代码分析
2017/01/20 Javascript
深入理解vue路由的使用
2017/03/24 Javascript
解决JS内存泄露之js对象和dom对象互相引用问题
2017/06/25 Javascript
详解Vue2中组件间通信的解决全方案
2017/07/28 Javascript
基于js 本地存储(详解)
2017/08/16 Javascript
vue项目中应用ueditor自定义上传按钮功能
2018/04/27 Javascript
Vue的全局过滤器和私有过滤器的实现
2020/04/20 Javascript
详解C++编程中一元运算符的重载
2016/01/19 Python
详解Python_shutil模块
2019/03/15 Python
利用pyuic5将ui文件转换为py文件的方法
2019/06/19 Python
浅谈PyQt5中异步刷新UI和Python多线程总结
2019/12/13 Python
Django微信小程序后台开发教程的实现
2020/06/03 Python
Html5 页面适配iPhoneX(就是那么简单)
2019/09/05 HTML / CSS
澳大利亚制造的羊皮靴:Original UGG Boots
2017/11/13 全球购物
Static Nested Class 和 Inner Class的不同
2013/11/28 面试题
城市精细化管理实施方案
2014/03/04 职场文书
李培根演讲稿
2014/05/22 职场文书
预备党员思想汇报1000字
2014/10/07 职场文书
2014年工程工作总结
2014/11/25 职场文书
Python Django ORM连表正反操作技巧
2021/06/13 Python
MySQL自定义函数及触发器
2022/08/05 MySQL