仅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 CSS画图之基础篇
Jul 29 Javascript
JS 实现Table相同行的单元格自动合并示例代码
Aug 27 Javascript
网页广告中JS代码的信息监听示例
Apr 02 Javascript
JavaScript对象之深度克隆介绍
Dec 08 Javascript
JavaScript深度复制(deep clone)的实现方法
Feb 19 Javascript
javascript 中iframe高度自适应(同域)实例详解
May 16 Javascript
JavaScript中的高级函数
Jan 04 Javascript
微信小程序实现自定义modal弹窗封装的方法
Jun 15 Javascript
Vue实现双向绑定的原理以及响应式数据的方法
Jul 02 Javascript
JavaScript强制类型转换和隐式类型转换操作示例
May 01 Javascript
简单了解JavaScript中常见的反模式
Jun 21 Javascript
JS实现可视化音频效果的实例代码
Jan 16 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
索尼SONY ICF-7600A(W)电路分析
2021/03/01 无线电
PHP容易忘记的知识点分享
2013/04/30 PHP
php+js实现图片的上传、裁剪、预览、提交示例
2013/08/27 PHP
Laravel框架中实现使用阿里云ACE缓存服务
2015/02/10 PHP
WordPress特定文章对搜索引擎隐藏或只允许搜索引擎查看
2015/12/31 PHP
JS支持带x身份证号码验证函数
2008/08/10 Javascript
event.srcElement 用法笔记e.target
2009/12/18 Javascript
js自定义事件及事件交互原理概述(二)
2013/02/01 Javascript
javascript排序函数实现数字排序
2015/06/26 Javascript
webix+springmvc session超时跳转登录页面
2016/10/30 Javascript
AngularJs入门教程之环境搭建+创建应用示例
2016/11/01 Javascript
微信小程序 删除项目工程实现步骤
2016/11/10 Javascript
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
2017/05/02 Javascript
Node.JS利用PhantomJs抓取网页入门教程
2017/05/19 Javascript
AngularJS select设置默认值的实现方法
2017/08/25 Javascript
原生JS实现的双色球功能示例
2018/02/02 Javascript
Vue前端开发规范整理(推荐)
2018/04/23 Javascript
解决vue同一slot在组件中渲染多次的问题
2018/09/06 Javascript
JavaScript动态生成表格的示例
2020/11/02 Javascript
详解ES6 中的Object.assign()的用法实例代码
2021/01/11 Javascript
Python中比较特别的除法运算和幂运算介绍
2015/04/05 Python
Tensorflow实现卷积神经网络用于人脸关键点识别
2018/03/05 Python
python集合是否可变总结
2019/06/20 Python
PyQt5实现QLineEdit添加clicked信号的方法
2019/06/25 Python
Fanatics法国官网:美国体育电商
2019/08/27 全球购物
网络编辑职责
2014/03/01 职场文书
2014年最新党员对照检查材料汇总
2014/09/15 职场文书
2014年党员学习“三严三实”思想汇报
2014/09/15 职场文书
领导干部贪图享乐整改措施
2014/09/21 职场文书
幼儿园开学温馨提示
2015/07/15 职场文书
CSS3实现的侧滑菜单
2021/04/27 HTML / CSS
python非标准时间的转换
2021/07/25 Python
redis数据一致性的实现示例
2022/03/18 Redis
详细聊聊Oracle表碎片对性能有多大的影响
2022/03/19 Oracle
如何通过cmd 连接阿里云服务器
2022/04/18 Servers
Java 数组的使用
2022/05/11 Java/Android