僅IE支持clearAttributes/mergeAttributes方法使用介紹

更新時間：2012年05月04日 16:17:45 作者：

僅IE中HTMLElement元素具有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已經(jīng)沒有了“data-a”，“data-b”，“onclick=alert(1)”屬性。前兩個屬性是自定義的，onclick則是自有的但也清除了。

雖然outerHTML清除了，但事件并沒有真正清除。點擊div仍然會彈出1。（注意：對于元素自由屬性如id，name，style是不會被清除的）
以上發(fā)現(xiàn)onclick屬性在outerHTML雖然刪除了，但事件handler卻沒有刪除，點擊仍然可以觸發(fā)。那么通過attachEvent方式添加的事件能清除嗎？試試便知

復制代碼代碼如下:

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

測試發(fā)現(xiàn)，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上了。現(xiàn)在點擊p也能alert出1。

細心的同學會發(fā)現(xiàn)div的id沒有拷貝過來。的確，在IE5之前，attributes是只讀的，id/name不被合并。IE5.5后則可以通過指定第二個參數(shù)值決定是否拷貝id/name屬性。

只需將mergeAttributes的第二個參數(shù)指定為false，就可以拷貝id/name了。如
p.mergeAttributes(div,false);
效果