Only IE supports clearAttributes/mergeAttributes method usage introduction

Only IE supports clearAttributes/mergeAttributes method usage introduction_javascript skills

WBOY

Release： 2016-05-16 17:53:50

Original

1530 people have browsed it

1. .clearAttributes()

This method is used to clear all user-defined attributes. As follows

Copy the code The code is as follows:

Division

<script> <br>var div = document.getElementsByTagName('div') [0]; <br>alert(div.outerHTML); <br>div.clearAttributes(); <br>alert(div.outerHTML); <br></script> 

After running, the following pops up

As you can see, the outerHTML generated by the second alert no longer has the "data-a", "data-b", and "onclick=alert(1)" attributes. The first two attributes are customized, while onclick is its own but also cleared.

Although outerHTML is cleared, the event is not actually cleared. Clicking on the div still pops up 1. (Note: The free attributes of elements such as id, name, and style will not be cleared)
It is found above that although the onclick attribute is deleted in outerHTML, the event handler is not deleted, and clicks can still be triggered. So can events added through attachEvent be cleared? Try it and you will know

Copy code The code is as follows:

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

The test found that clicking the div will not pop up 1 in IE6/7/8, but it will still pop up in IE9. That is, event handlers added by attachEvent cannot be cleared through clearAttributes in IE9.

2. .mergeAttributes()

This method is used to copy all the attributes of the specified element to itself, including attributes, events, and styles. As follows

Copy code The code is as follows:

Division

paragraph

Copy the outerHTML of the first p

Copy the outerHTML of p

By comparison, you can see that the style (styles), onclick (events), and data-a (user-defined attributes) of the div are all copied to p. Now clicking p can also alert 1.

Careful students will find that the ID of the div is not copied. Indeed, before IE5, attributes were read-only and id/name were not merged. After IE5.5, you can decide whether to copy the id/name attribute by specifying the second parameter value.

Just specify the second parameter of mergeAttributes as false to copy id/name. Such as
p.mergeAttributes(div,false);
Effect