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 相关文章推荐
DEFER怎么用?
Jul 01 Javascript
一个判断email合法性的函数[非正则]
Dec 09 Javascript
用Jquery重写windows.alert方法实现思路
Apr 03 Javascript
含有CKEditor的表单如何提交
Jan 09 Javascript
jquery插件qrcode在线生成二维码
Apr 26 Javascript
arcgis for js 修改infowindow样式的方法
Nov 02 Javascript
js实现前端分页页码管理
Jan 06 Javascript
Vue如何实现组件的源码解析
Jun 08 Javascript
详解vue中使用protobuf踩坑记
May 07 Javascript
使用JS location实现搜索框历史记录功能
Dec 23 Javascript
js面向对象之实现淘宝放大镜
Jan 15 Javascript
浅谈vue中get请求解决传输数据是数组格式的问题
Aug 03 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
sony ICF-2010 拆解与改装
2021/03/02 无线电
PHP防止post重复提交数据的简单例子
2014/06/07 PHP
javascript事件模型代码
2007/07/01 Javascript
javascript感应鼠标图片透明度显示的方法
2015/02/24 Javascript
JavaScript更改原始对象valueOf的方法
2015/03/19 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
2015/12/09 Javascript
jQuery禁用键盘后退屏蔽F5刷新及禁用右键单击
2016/01/22 Javascript
封装属于自己的JS组件
2016/01/27 Javascript
javascript中FOREACH数组方法使用示例
2016/03/01 Javascript
AngularJS中指令的四种基本形式实例分析
2016/11/22 Javascript
javascript实现多张图片左右无缝滚动效果
2017/03/22 Javascript
解决bootstrap下拉菜单点击立即隐藏bug的方法
2017/06/13 Javascript
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
2017/11/20 Javascript
解决npm安装Electron缓慢网络超时导致失败的问题
2018/02/06 Javascript
VUE预渲染及遇到的坑
2018/09/03 Javascript
angular将html代码输出为内容的实例
2018/09/30 Javascript
JavaScript模板引擎原理与用法详解
2018/12/24 Javascript
Vue 3.x+axios跨域方案的踩坑指南
2019/07/04 Javascript
Vue+Node服务器查询Mongo数据库及页面数据传递操作实例分析
2019/12/20 Javascript
JS使用setInterval计时器实现挑战10秒
2020/11/08 Javascript
原生JS运动实现轮播图
2021/01/02 Javascript
python检测服务器是否正常
2014/02/16 Python
TensorFlow实现模型评估
2018/09/07 Python
Python tkinter 下拉日历控件代码
2020/03/04 Python
html5+css3之CSS中的布局与Header的实现
2014/11/21 HTML / CSS
使用HTML5的表单验证的简单示例
2015/09/09 HTML / CSS
GUESS Factory加拿大:牛仔裤、服装及配饰
2019/09/20 全球购物
Claire’s法国:时尚配饰、美容、珠宝、头发
2021/01/16 全球购物
会计电算化应届生求职信
2013/11/03 职场文书
房产继承公证书
2014/04/09 职场文书
工业设计专业自荐书
2014/06/05 职场文书
学校综治宣传月活动总结
2014/07/02 职场文书
2014年民政工作总结
2014/11/26 职场文书
市场营销计划书
2015/01/17 职场文书
Python Numpy之linspace用法说明
2021/04/17 Python
Python中文纠错的简单实现
2021/07/07 Python