僅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>
運(yùn)行后依次彈出如下
可以看到，第二次alert出的outerHTML已經(jīng)沒有了“data-a”，“data-b”，“onclick=alert(1)”屬性。前兩個(gè)屬性是自定義的，onclick則是自有的但也清除了。
雖然outerHTML清除了，但事件并沒有真正清除。點(diǎn)擊div仍然會(huì)彈出1。（注意：對于元素自由屬性如id，name，style是不會(huì)被清除的）
以上發(fā)現(xiàn)onclick屬性在outerHTML雖然刪除了，但事件handler卻沒有刪除，點(diǎn)擊仍然可以觸發(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中點(diǎn)擊該div不會(huì)彈出1，但I(xiàn)E9中仍然會(huì)彈出。即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上了?，F(xiàn)在點(diǎn)擊p也能alert出1。
細(xì)心的同學(xué)會(huì)發(fā)現(xiàn)div的id沒有拷貝過來。的確，在IE5之前，attributes是只讀的，id/name不被合并。IE5.5后則可以通過指定第二個(gè)參數(shù)值決定是否拷貝id/name屬性。
只需將mergeAttributes的第二個(gè)參數(shù)指定為false，就可以拷貝id/name了。如
p.mergeAttributes(div,false);
效果
相關(guān)：
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
相關(guān)文章
js函數(shù)參數(shù)設(shè)置默認(rèn)值的一種變通實(shí)現(xiàn)方法
js函數(shù)中有個(gè)儲(chǔ)存參數(shù)的數(shù)組arguments，因此js版支持參數(shù)默認(rèn)值的函數(shù)可以通過另外一種變通的方法實(shí)現(xiàn)2014-05-05
這段時(shí)間看了下bootstrap的時(shí)間控件，發(fā)現(xiàn)使用起來還是很簡單的，趁著有時(shí)間的時(shí)候整理了一下，特此分享到腳本之家平臺(tái)，感興趣的朋友參考下2017-07-07
css中對于定寬的非浮動(dòng)元素用margin:0 auto進(jìn)行水平居中，對于不定寬的浮動(dòng)元素也有一個(gè)常用技巧，這篇文章就給大家介紹下css如何讓浮動(dòng)元素水平居中，需要的朋友可以來學(xué)習(xí)下2015-08-08
通過Three.js的材質(zhì)和幾何體,我們可以很方便的創(chuàng)建基礎(chǔ)3D模型,下面這篇文章主要給大家介紹了關(guān)于three.js載入常用類型3D模型的幾種方法,需要的朋友可以參考下2024-04-04
TypeScript判斷兩個(gè)數(shù)組的內(nèi)容是否相等的實(shí)現(xiàn)
本文主要介紹了TypeScript?判斷兩個(gè)數(shù)組的內(nèi)容是否相等，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-11-11
今天小編就為大家分享一篇淺談layer彈出層按鈕顏色修改方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要為大家詳細(xì)介紹了原生js拖拽實(shí)現(xiàn)圖形的伸縮效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-02-02
本文主要對html5 canvas的使用進(jìn)行了詳細(xì)的介紹。具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
JavaScript面試必備之垃圾回收機(jī)制和內(nèi)存泄漏詳解
垃圾回收機(jī)制和內(nèi)存泄漏是JavaScript面試時(shí)常常問到的問題，這篇文章就為大家詳細(xì)整理了他們的相關(guān)知識(shí)，感興趣的小伙伴可以跟隨小編一起了解一下2023-05-05
本文通過實(shí)例代碼給大家介紹了ES6中的Promise，感興趣的朋友參考下吧2017-10-10