仅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 相关文章推荐
JS 非图片动态loading效果实现代码
Apr 09 Javascript
jquery URL参数判断,确定菜单样式
May 31 Javascript
JavaScrip单线程引擎工作原理分析
Sep 04 Javascript
基于jquery 的一个progressbar widge
Oct 29 Javascript
jquery中dom操作和事件的实例学习-表单验证
Nov 30 Javascript
js 程序执行与顺序实现详解
May 13 Javascript
jquery控制表单输入框显示默认值的方法
May 22 Javascript
js实现瀑布流的三种方式比较
Jun 28 Javascript
js替换字符串中所有指定的字符(实现代码)
Aug 17 Javascript
jQuery progressbar通过Ajax请求实现后台进度实时功能
Oct 11 Javascript
js canvas实现写字动画效果
Nov 30 Javascript
微信小程序实现订单倒计时
Nov 01 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
基于qmail的完整WEBMAIL解决方案安装详解
2006/10/09 PHP
Yii框架关联查询with用法分析
2014/12/02 PHP
php中Array2xml类实现数组转化成XML实例
2014/12/08 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
js获取当前日期时间及其它操作汇总
2015/04/17 Javascript
jQuery右下角旋转环状菜单特效代码
2015/08/10 Javascript
将JSON字符串转换成Map对象的方法
2016/11/30 Javascript
js 博客内容进度插件详解
2017/02/19 Javascript
vue-router 学习快速入门
2017/03/01 Javascript
微信小程序开发图片拖拽实例详解
2017/05/05 Javascript
深入理解vue.js中的v-if和v-show
2017/06/22 Javascript
详解vue 自定义marquee无缝滚动组件
2019/04/09 Javascript
vue.config.js中配置Vue的路径别名的方法
2020/02/11 Javascript
taro 实现购物车逻辑的实例代码
2020/06/05 Javascript
jQuery 移除事件的方法
2020/06/20 jQuery
vue 解决data中定义图片相对路径页面不显示的问题
2020/08/13 Javascript
编程语言Python的发展史
2014/09/26 Python
Python内置函数Type()函数一个有趣的用法
2015/02/18 Python
python显示生日是星期几的方法
2015/05/27 Python
Python中enumerate()函数编写更Pythonic的循环
2018/03/06 Python
django将图片上传数据库后在前端显式的方法
2018/05/25 Python
python实现抽奖小程序
2020/04/15 Python
Python合并2个字典成1个新字典的方法(9种)
2019/12/19 Python
Python字典dict常用方法函数实例
2020/11/09 Python
用python爬虫批量下载pdf的实现
2020/12/01 Python
Python爬虫分析微博热搜关键词的实现代码
2021/02/22 Python
两种CSS3伪类选择器详细介绍
2013/12/24 HTML / CSS
2014年元旦联欢会活动策划方案
2014/02/16 职场文书
学雷锋活动总结报告
2014/06/26 职场文书
廉政文化进校园广播稿
2014/10/20 职场文书
遗嘱继承权公证书
2015/01/26 职场文书
苏州园林导游词
2015/02/03 职场文书
2015年办公室主任工作总结
2015/04/09 职场文书
2015年手术室工作总结
2015/05/11 职场文书
自制短波长线天线频率预选器 - 成功消除B2K之流的镜像
2021/04/22 无线电
教你如何让spark sql写mysql的时候支持update操作
2022/02/15 MySQL