Mozilla Firefox 및 Opera에서 innerHTML 실행의 특별한 경우입니다. _자바스크립트 기술

CSDN 포럼에서 본 질문입니다. 저는 평소에 크게 관심을 두지 않거나 이런 식으로 사용하지 않습니다. 코드를 보세요

<h4> </h4>두 텍스트 상자의 값을 변경하고 이 컨테이너의 innerHTML을 d2에 할당합니다<button onclick="foo()"> </button>foo()<div id="d1" style="color:red"> <input value="blog.never-online"> <input value=""> </div> <div id="d2"> </div>
[모두 선택하려면 Ctrl A 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다

]


예상했던 결과 아닌가요? Opera에서의 실행 상황도 Firefox에서와 동일합니다. Opera에서 실행해 보시면 이해하실 것입니다.

기대했던 결과를 얻을 수 있다면 어떨까요? Mozilla에서 모든 innerHTML을 가져오기 위해 __defineGetter__ 메서드를 사용하려고 시도했지만 여기서는 몇 가지 팁을 제공했습니다. 예:

<h4></h4> <button onclick="foo()">두 텍스트 상자의 값을 변경하고 이 컨테이너의 innerHTML을 d2에 할당합니다</button> <div id="d1" style="color:red">foo()<input value="blog.never-online"> <input value="script by never-online"> </div> <div id="d2"> </div>
[Ctrl A 모두 선택 참고:

외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다
]

위 코드는 기대한 목적을 달성할 수는 없지만 속성의 값을 얻어야 한다는 것을 알아야 하므로 다음과 같은 방법을 사용해 보았습니다. <h4></h4> <button onclick="foo()"> </button>두 텍스트 상자의 값을 변경하고 이 컨테이너의 innerHTML을 d2에 할당합니다<div id="d1"> <input value="blog.never-online" onkeyup="this.setAttribute('value',this.value)">foo()<input value="script by never-online"> </div> <div id="d2"> </div>

[모두 선택하려면 Ctrl A 참고:
외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다
]

이 방법은 성공했습니다. 즉, Mozilla의 innerHTML은 요소의 모든 노드의 tagName과 속성을 순회하여 innerHTML을 얻습니다. 따라서 첫 번째 예의 innerHTML은 수정된 값을 얻을 수 없습니다.
<script> var foo = function() { var $ = function() { return document.getElementById(arguments[0]); } $("d2").innerHTML = $("d1").innerHTML; } //]]> </script>동시에 이 트릭은 오페라에서도 사용할 수 있습니다. 이는 또한 Opera의 innerHTML이 요소의 모든 노드의 tagName과 속성을 탐색하여 innerHTML을 얻는다는 것을 증명합니다. 이것이 w3c의 표준인가요? 아직 w3c 정보를 확인할 시간이 없어서 오페라와 모질라의 우연인지, 아니면 IE 아래 개발자들에게 더 편한 디자인인지는 알 수 없습니다.