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

一、.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>

运行后依次弹出如下

可以看到，第二次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

拷贝后p的outerHTML

对比就知道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);
效果

相关：
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

赞 (0)

相关推荐

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

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

    一..clearAttributes() 该方法用来清除所有用户定义的属性.如下 复制代码 代码如下: <div style="color:red;" onclick="alert(1)" data-a="a" data-b="b">Division</div> <script> var div = document.getElementsByTagName('div')[0]; alert

  • Linux通过命令仅获取IP地址的方法

    Linux通过命令仅获取IP地址的方法

    一同事的朋友正在参加笔试,遇到这么一个问题让他帮忙解决,结果同事又找到我帮他搞定.真是感慨:通讯发达在某些方面来说,真不知是不是好事啊!题目大致如下所示,一般我们使用ifconfig查看网卡信息,请问你可以通过什么命令,让其只输出IP地址192.168.42.128 看似简单的问题,实现起来也不是太简单.看看下面的思路吧 [root@DB-Server ~]# ifconfig eth0 eth0 Link encap:Ethernet HWaddr 00:0C:29:9E:70:0E inet

  • Atom-IDE 的使用方法简单介绍

    Atom-IDE 的使用方法简单介绍

    Atom-IDE 的使用方法简单介绍 今日,GitHub 宣布与 Facebook 合作推出了 Atom-IDE -- 它包括一系列将类 IDE 功能带到 Atom 的可选工具包. 初次发布的版本包括更智能.感知上下文的自动完成:导航功能,如大纲视图和 goto-definition,以及其他有用的功能:还包括错误.警告提醒和格式化文档功能. 查看 Atom 博客以了解更多. Atom-IDE 包括适用于 C#, Flow, Java, JavaScript, PHP, 和 TypeScript

  • jQuery通过控制节点实现仅在前台通过get方法完成参数传递

    jQuery通过控制节点实现仅在前台通过get方法完成参数传递

    本文实例讲述了jQuery通过控制节点实现仅在前台通过get方法完成参数传递.分享给大家供大家参考.具体分析如下: 这样也是HTML DOM那部分的内容,javascript与jquery等前端脚本语言的核心就是要控制每一个节点,对每一个节点进行增删改查,这样才能够真正地活用javascript与jquery等前端脚本写出一个又一个华丽丽的东西. javascript控制节点,笔者已经在之前的[JavaScript针对网页节点的增删改查用法实例]有过相关介绍,现在是通过jquery这一javas

  • JQuery的常用选择器、过滤器、方法全面介绍

    1.jQuery对象转换成DOM对象 a. var $cr = $("#cr"); //jQuery对象 var cr=$cr[0]; //DOM对象 alert(cr.checked); //检测checkbox是否被选中了 b. var $cr=$("#cr"); //jQuery对象 var cr=$cr.get(0); //DOM对象 alert(cr.checked); //检测checkbox是否被选中了 2.DOM对象转换成jQuery对象 var c

  • Android 中LayoutInflater.inflate()方法的介绍

    Android 中LayoutInflater.inflate()方法的介绍 最近一直想弄明白LayoutInflater对象的inflate方法的用法,今天做了实例. <LinearLayout android:id="@+id/ll_item_Group" android:layout_width="match_parent" android:layout_height="200dp" android:background="

  • Android中imageview.ScaleType使用方法详细介绍

    Android中imageview.ScaleType使用方法详细介绍 ScaleType属性用以表示显示图片的方式,共有8种取值: ScaleType.CENTER:图片大小为原始大小,如果图片大小大于ImageView控件,则截取图片中间部分,若小于,则直接将图片居中显示. ScaleType.CENTER_CROP:将图片等比例缩放,让图像的短边与ImageView的边长度相同,即不能留有空白,缩放后截取中间部分进行显示. ScaleType.CENTER_INSIDE:将图片大小大于Im

  • nginx下支持PATH_INFO的方法实例详解

    本文实例分析了nginx下支持PATH_INFO的方法.分享给大家供大家参考,具体如下: 要想让nginx支持PATH_INFO,首先需要知道什么是pathinfo,为什么要用pathinfo? pathinfo不是nginx的功能,pathinfo是php的功能. php中有两个pathinfo,一个是环境变量$_SERVER['PATH_INFO']:另一个是pathinfo函数,pathinfo() 函数以数组的形式返回文件路径的信息;. nginx能做的只是对$_SERVER['PATH

  • ie支持function.bind()方法实现代码

    前端开发者应该很清楚 Javscript 脚本的 function 函数对象可以通过 call 或 apply 方法,使其改变内部作用域(this)所指向的对象,实现更多可扩展的功能开发.ie 原生支持 function 对象的 call 和 apply 方法,在 firefox 或其它浏览器下也得到支持,但是 call 和 apply 方法是立即作用并执行,例如: 复制代码 代码如下: var func = function () { alert(this); }.apply(window);

  • Java编程实现服务器端支持断点续传的方法(可支持快车、迅雷)

    本文实例讲述了Java编程实现服务器端支持断点续传的方法.分享给大家供大家参考,具体如下: 大家知道Tomcat之流对静态资源可以实现断点续传支持,但是如果是一个被控制的流,如有权限控制,或下载地址仅是个代理的时候,这时候需要自己实现断点续传的支持,小弟不才,这里提供基本断点续传[a-,-b,a-b]的简单实现,经验证,可支持迅雷7和火狐的多次断点续传.现贴出代码,大家共同分享: Servlet import java.io.BufferedOutputStream; import java.i

随机推荐