DOM(一)-18-(节点操作-删除节点)
2015-08-20 16:31
519 查看
演示DOM删除节点操作,记住,凡是删除或移除操作,就去API找包含delete或remove的方法,在DHTML API中的div对象中,有如下方法:
(1)removeAttribute:删除对象的给定标签属性。
(2)removeAttributeNode:从对象中删除删除 attribute 对象。
(3)removeBehavior:分离元素的行为。
(4)removeChild:从元素上删除子结点。
(5)removeExpression:从指定属性中删除表达式。
(6)removeNode:从文档层次中删除对象。
(详见DHTML API文档)
=============================================================================================================
【示例】单击button,div_2节点被删除
(1)removeAttribute:删除对象的给定标签属性。
(2)removeAttributeNode:从对象中删除删除 attribute 对象。
(3)removeBehavior:分离元素的行为。
(4)removeChild:从元素上删除子结点。
(5)removeExpression:从指定属性中删除表达式。
(6)removeNode:从文档层次中删除对象。
(详见DHTML API文档)
=============================================================================================================
【示例】单击button,div_2节点被删除
<html> <head> <style type="text/css"> div{ border:#0CF 1px solid; width:200px; padding:30px; margin:10px; } #div_1{ background-color:#0CF; } #div_2{ background-color:#FCF; } #div_3{ background-color:#C0F; } #div_4{ background-color:#0F0; } </style> </head> <body> <script type="text/javascirpt"> function delNode(){ //1.获取div_2节点 var oDivNode = document.getElementById("div_2"); //2.使用div节点的removeNode方法删除。根据DHTML API文档,该方法需要传入boolean型变量,不传默认false oDivNode.removeNode(true); /* *这里如果传入false,则会删除div_2区域,但是其中的内容"好好学习,day day up!"还在;如果传入true,则div_2区域连同内容 *一起删除。 */ /* *【注意】removeNode方法较少用,一般使用removeChild方法,即删除子节点 *所以先获取div_2的父节点,然后在父节点上使用removeChild将div_2删除。 */ oDivNode.parentNode.removeChild(oDivNode); } </script> <input type="button" value="删除节点" onclick="delNode()" /> <hr/> <div id="div_1"> </div> <div id="div_2"> 好好学习,day day up! </div> <div id="div_3"> div区域演示文字 </div> <div id="div_4"> 节点的增删改查 </div> </body> </html>
相关文章推荐
- linux调试工具
- JVM查看命令
- 二叉树的链式存储
- (14)[Xamarin.Android] 异步的网络图片下载
- ios delegate 使用注意 assign,weak
- HA之heartbeat3.0.6安装配置
- static作用整理
- 分数加减法
- 函数作用域和声明提前
- 虚拟化--001 esxi新建vm 3种数据存储磁盘格式
- Web开发之PHP框架(一)-Laravel环境搭建
- 关于cocos2dx编写的游戏由vs2013项目打包成apk文件
- UNIX Tutorial Two_files
- Vim编辑器——入门学习
- 重建二叉树
- 虚函数与虚继承寻踪
- DOM(一)-16-(节点操作-创建并添加_1)
- DOM(一)-17-(节点操作-创建并添加_2)
- ETL kettle 工具使用例子
- (13)[Xamarin.Android] 不同分辨率下的图片使用概论