IE에서만 ClearAttributes/mergeAttributes 메소드 사용을 지원합니다. Introduction_javascript 기술

1. .clearAttributes()

이 메소드는 모든 사용자 정의 속성을 지우는 데 사용됩니다. 다음과 같습니다

코드를 복사합니다 코드는 다음과 같습니다.

Division

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

실행 후 아래와 같은 창이 뜹니다

보시다시피 두 번째 경고에 의해 생성된 외부 HTML에는 더 이상 "data-a", "data-b" 및 "onclick=alert(1)" 속성이 없습니다. 처음 두 속성은 사용자 정의되는 반면 onclick은 자체 속성이지만 지워집니다.

outerHTML이 지워지더라도 이벤트가 실제로 지워지는 것은 아닙니다. div를 클릭하면 여전히 팝업이 표시됩니다. 1. (참고: id, name, style 등 요소의 자유 속성은 삭제되지 않습니다.)
위에서 확인된 바에 따르면 onclick 속성은 externalHTML에서 삭제되지만 이벤트 핸들러는 삭제되지 않으며 여전히 클릭이 가능합니다. 트리거되었습니다. 그럼 AttachEvent를 통해 추가된 이벤트를 지울 수 있나요? 사용해 보시면 알 수 있습니다

코드 복사 코드는 다음과 같습니다.

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

테스트 결과 IE6/7/8에서는 div가 팝업되지 않는 것으로 나타났습니다. IE9에서는 여전히 팝업됩니다. 즉, IE9에서는 attachmentEvent에 의해 추가된 이벤트 핸들러를 clearAttributes를 통해 지울 수 없습니다.

2. .mergeAttributes()

이 메소드는 속성, 이벤트 및 스타일을 포함하여 지정된 요소의 모든 속성을 자체에 복사하는 데 사용됩니다. 다음과 같습니다

코드 복사 코드는 다음과 같습니다.

Division

단락

<script> <BR>var div = document.getElementsByTagName('div')[0]; <BR>var p = document.getElementsByTagName('p')[0]; <BR>alert(p.outerHTML); .mergeAttributes(div ); <BR>alert(p.outerHTML) <BR></script>
첫 번째 p의 외부HTML을 복사합니다

p의 외부 HTML 복사

비교해 보면 div의 스타일(styles), onclick(이벤트), data-a(사용자 정의 속성)가 모두 p에 복사되는 것을 볼 수 있습니다. 이제 p를 클릭하면 1에도 경고할 수 있습니다.

조심스럽게 공부하는 학생들은 div의 ID가 복사되지 않는다는 것을 알게 될 것입니다. 실제로 IE5 이전에는 속성이 읽기 전용이었고 ID/이름이 병합되지 않았습니다. IE5.5 이후에는 두 번째 매개변수 값을 지정하여 id/name 속성을 복사할지 여부를 결정할 수 있습니다.

ID/이름을 복사하려면 mergeAttributes의 두 번째 매개변수를 false로 지정하면 됩니다.

p.mergeAttributes(div,false)
효과
등



관련:

http://msdn.microsoft.com/en-us/library/ie/ms536350(v=vs.85).aspx

http: //msdn.microsoft.com/en-us/library/ie/ms536614(v=vs.85).aspx