仅IE支持clearAttributes/mergeAttributes方法使用介绍


Posted in Javascript onMay 04, 2012

一、.clearAttributes()

该方法用来清除所有用户定义的属性。如下

<div style="color:red;" onclick="alert(1)" data-a="a" data-b="b">Division</div> 
<script> 
var div = document.getElementsByTagName('div')[0]; 
alert(div.outerHTML); 
div.clearAttributes(); 
alert(div.outerHTML); 
</script>

运行后依次弹出如下

仅IE支持clearAttributes/mergeAttributes方法使用介绍

仅IE支持clearAttributes/mergeAttributes方法使用介绍

可以看到,第二次alert出的outerHTML已经没有了“data-a”,“data-b”,“onclick=alert(1)”属性。前两个属性是自定义的,onclick则是自有的但也清除了。

虽然outerHTML清除了,但事件并没有真正清除。点击div仍然会弹出1。(注意:对于元素自由属性如id,name,style是不会被清除的)
以上发现onclick属性在outerHTML虽然删除了,但事件handler却没有删除,点击仍然可以触发。那么通过attachEvent方式添加的事件能清除吗? 试试便知

<div>division</div> 
<script> 
var div = document.getElementsByTagName('div')[0]; 
div.attachEvent('onclick', function(){alert(1)}); 
div.clearAttributes(); 
</script>

测试发现,IE6/7/8中点击该div不会弹出1,但IE9中仍然会弹出。即IE9中不能通过clearAttributes清除attachEvent方式添加的事件handler。

二、.mergeAttributes()

该方法用来把指定元素的所有属于拷贝到自己身上,包括attributes、events、styles。如下

<div id="head" style="color:red;" onclick="alert(1)" data-a="a">Division</div> 
<p>paragraph</p> 
<script> 
var div = document.getElementsByTagName('div')[0]; 
var p = document.getElementsByTagName('p')[0]; 
alert(p.outerHTML); 
p.mergeAttributes(div); 
alert(p.outerHTML); 
</script>

拷贝前p的outerHTML

仅IE支持clearAttributes/mergeAttributes方法使用介绍

拷贝后p的outerHTML

仅IE支持clearAttributes/mergeAttributes方法使用介绍

对比就知道div的style(styles)、onclick(events)、data-a(user-defined attributes)都拷贝到p上了。现在点击p也能alert出1。

细心的同学会发现div的id没有拷贝过来。的确,在IE5之前,attributes是只读的,id/name不被合并。IE5.5后则可以通过指定第二个参数值决定是否拷贝id/name属性。

只需将mergeAttributes的第二个参数指定为false,就可以拷贝id/name了。如
p.mergeAttributes(div,false);
效果

仅IE支持clearAttributes/mergeAttributes方法使用介绍

相关:
http://msdn.microsoft.com/en-us/library/ie/ms536350%28v=vs.85%29.aspx
http://msdn.microsoft.com/en-us/library/ie/ms536614%28v=vs.85%29.aspx

Javascript 相关文章推荐
JavaScript 中的replace方法说明
Apr 13 Javascript
javascript中获取下个月一号,是星期几
Jun 01 Javascript
javascript 星级评分效果(手写)
Dec 24 Javascript
window.open以post方式将内容提交到新窗口
Dec 26 Javascript
页面按钮禁用与解除禁用的方法
Feb 19 Javascript
jQuery中阻止冒泡事件的方法介绍
Apr 12 Javascript
简单纯js实现点击切换TAB标签实例
Aug 23 Javascript
JavaScript仿flash遮罩动画效果
Jun 15 Javascript
jQuery鼠标悬停内容动画切换效果
Apr 27 jQuery
实例分析js事件循环机制
Dec 13 Javascript
axios简单实现小程序延时loading指示
Jul 30 Javascript
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
Jul 11 Javascript
js查错流程归纳
May 04 #Javascript
iphone safari不支持position fixed的解决方法
May 04 #Javascript
JavaScript之自定义类型
May 04 #Javascript
Javascript 键盘事件的组合使用实现代码
May 04 #Javascript
仿中关村在线首页弹出式广告插件(jQuery版)
May 03 #Javascript
jQuery 开发者应该注意的9个错误
May 03 #Javascript
jQuery Ajax请求状态管理器打包
May 03 #Javascript
You might like
php数组函数序列 之array_count_values() 统计数组中所有值出现的次数函数
2011/10/29 PHP
教大家制作简单的php日历
2015/11/17 PHP
ThinkPHP模板Volist标签嵌套循环输出多维数组的方法
2016/03/23 PHP
PHP实现链式操作的三种方法详解
2017/11/16 PHP
jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包
2011/04/06 Javascript
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
2012/03/01 Javascript
js相册效果代码(点击创建即可)
2013/04/16 Javascript
VueJs单页应用实现微信网页授权及微信分享功能示例
2017/07/26 Javascript
JavaScript体验异步更好的解决办法
2018/01/08 Javascript
Angular5升级RxJS到5.5.3报错:EmptyError: no elements in sequence的解决方法
2018/04/09 Javascript
对angular 实时更新模板视图的方法$apply详解
2018/10/09 Javascript
如何用JavaScript实现功能齐全的单链表详解
2019/02/11 Javascript
详解如何在Vue项目中导出Excel
2019/04/19 Javascript
利用d3.js制作连线动画图与编辑器的方法实例
2019/09/05 Javascript
layui 富文本图片上传接口与普通按钮 文件上传接口的例子
2019/09/23 Javascript
JS中准确判断变量类型的方法
2020/06/01 Javascript
[40:16]TFT vs Mski Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
python下setuptools的安装详解及No module named setuptools的解决方法
2017/07/06 Python
selenium+python 对输入框的输入处理方法
2018/10/11 Python
django框架创建应用操作示例
2019/09/26 Python
使用Fabric自动化部署Django项目的实现
2019/09/27 Python
Python实现多线程下载脚本的示例代码
2020/04/03 Python
如何使用Python调整图像大小
2020/09/26 Python
CSS3常用的几种颜色渐变模式总结
2016/11/18 HTML / CSS
详解Html5微信支付爬坑之路
2018/07/24 HTML / CSS
使用html5新特性轻松监听任何App自带返回键的示例
2018/03/13 HTML / CSS
Giglio德国网上精品店:奢侈品服装和配件
2016/09/23 全球购物
机关保密承诺书
2014/06/03 职场文书
2014年小学重阳节活动策划方案
2014/09/16 职场文书
就业协议书盖章的注意事项
2014/09/28 职场文书
党员个人对照检查材料
2014/10/01 职场文书
优秀教师推荐材料
2014/12/16 职场文书
2014年结对帮扶工作总结
2014/12/17 职场文书
离婚起诉状范本
2015/05/19 职场文书
少年派的奇幻漂流观后感
2015/06/08 职场文书
学校少先队工作总结
2015/08/12 职场文书