仅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 相关文章推荐
jQuery阻止同类型事件小结
Apr 19 Javascript
jquery弹出框的用法示例(2)
Aug 26 Javascript
javascript 弹出的窗口返回值给父窗口具体实现
Nov 23 Javascript
javascript setinterval 的正确语法如何书写
Jun 17 Javascript
jQuery实现新消息在网页标题闪烁提示
Jun 23 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
Jul 27 Javascript
JS正则表达式比较常见用法
Jan 26 Javascript
Node.js 日志处理模块log4js
Aug 28 Javascript
JS逻辑运算符短路操作实例分析
Jul 09 Javascript
Vue.js实现tab切换效果
Jul 24 Javascript
react 不用插件实现数字滚动的效果示例
Apr 14 Javascript
基于JavaScript实现年月日三级联动
Jun 22 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
关于二级目录拖拽排序的实现(源码示例下载)
2013/04/26 PHP
php5.5中类级别的常量使用介绍
2013/10/02 PHP
对于ThinkPHP框架早期版本的一个SQL注入漏洞详细分析
2014/07/04 PHP
PHP函数shuffle()取数组若干个随机元素的方法分析
2016/04/02 PHP
PHP判断是手机端还是PC端 PHP判断是否是微信浏览器
2017/03/15 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
jQuery使用技巧简单汇总
2013/04/18 Javascript
javaScript面向对象继承方法经典实现
2013/08/20 Javascript
js 遍历json返回的map内容示例代码
2013/10/29 Javascript
JS 根据子网掩码,网关计算出所有IP地址范围示例
2020/04/23 Javascript
什么是JavaScript中的结果值?
2016/10/08 Javascript
js实现选项卡内容切换以及折叠和展开效果【推荐】
2017/01/08 Javascript
简单实现js无缝滚动效果
2017/02/05 Javascript
JavaScript读写二进制数据的方法详解
2018/09/09 Javascript
JavaScript禁用右键单击优缺点分析
2019/01/20 Javascript
Vue 3.0双向绑定原理的实现方法
2019/10/23 Javascript
python 随机数生成的代码的详细分析
2011/05/15 Python
两个命令把 Vim 打造成 Python IDE的方法
2016/03/20 Python
Python简单实现Base64编码和解码的方法
2017/04/29 Python
Python3实现的旋转矩阵图像算法示例
2019/04/03 Python
python3-flask-3将信息写入日志的实操方法
2019/11/12 Python
基于python实现雪花算法过程详解
2019/11/16 Python
python3 实现调用串口功能
2019/12/26 Python
python + selenium 刷B站播放量的实例代码
2020/06/12 Python
python文件操作seek()偏移量,读取指正到指定位置操作
2020/07/05 Python
详解KMP算法以及python如何实现
2020/09/18 Python
python 窃取摄像头照片的实现示例
2021/01/08 Python
IE矩阵Matrix滤镜旋转与缩放及如何结合transform
2012/11/29 HTML / CSS
基于Html5实现的语音搜索功能
2019/05/13 HTML / CSS
澳大利亚香水在线:Price Rite Mart
2017/12/28 全球购物
劳力士官方珠宝商:J.R. Dunn Jewelers
2018/09/29 全球购物
枚举与#define宏的区别
2014/04/30 面试题
优秀学生评语大全
2014/04/25 职场文书
商超业务员岗位职责
2015/02/13 职场文书
运动会主持人开幕词
2016/03/04 职场文书
用python实现监控视频人数统计
2021/05/21 Python