IE 및 FireFox_javascript 기술에서 Javascript의 다양한 성능에 대한 간략한 분석

1.document.formName.item("itemName") 문제
설명: IE에서는 document.formName.item("itemName") 또는 Firefox에서는 document.formName.elements["elementName"]을 사용할 수 있습니다. document.formName.elements["elementName"]만 사용할 수 있습니다.
해결 방법: document.formName.elements["elementName"]을 균일하게 사용하세요.
컬렉션 클래스 개체 문제
설명: IE에서는 () 또는 []를 사용하여 컬렉션 객체를 얻을 수 있습니다.
해결책: 사용자 정의 속성 문제를 얻으려면 []만 사용할 수 있습니다.
참고: IE에서는 일반 속성을 가져오는 방법을 사용하여 사용자 정의 속성을 얻을 수 있고, getAttribute()를 사용하여 사용자 정의 속성을 얻을 수 있지만, Firefox에서는 getAttribute()만 사용하여 사용자 정의 속성을 얻을 수 있습니다. 🎜>해결책: 통합 getAttribute()를 통해 사용자 정의 속성을 가져옵니다.
4.eval("idName") 문제
설명: IE에서는 eval("idName") 또는 getElementById("idName")를 사용하여 idName HTML 개체로 ID를 가져옵니다. Firefox에서는 ID가 idName인 HTML 개체를 얻으려면 getElementById("idName")만 사용할 수 있습니다.
해결책: HTML 개체를 얻으려면 getElementById("idName")를 균일하게 사용하세요.
5. 변수명이 HTML 객체의 ID와 동일하다는 문제
참고: IE에서는 HTML 객체의 ID를 변수명으로 직접 사용할 수 있습니다. Firefox에서는 문서의 하위 개체를 사용할 수 없습니다. Firefox에서는 HTML 개체의 ID를 IE에서는 사용할 수 없습니다.
해결책: document.idName 대신 document.getElementById("idName")를 사용하십시오. 오류를 줄이려면 동일한 HTML 객체 ID를 가진 변수 이름을 사용하지 않는 것이 가장 좋습니다. 변수를 선언할 때 모호함을 피하기 위해 항상 var를 추가하세요. >7.Input.type 속성 문제
설명: IE의 input.type 속성은 읽기 전용이지만 Firefox에서는 input.type 속성이
9.event.x 및 이벤트입니다. y 문제
참고: IE에서는 짝수 개체에 x, y 속성이 있지만, Firefox에서는 짝수 개체에 pageX, pageY 속성이 있지만 x, y 속성은 없습니다.
해결책: mX(mX = event.x ? event.x : event.pageX;)를 사용하여 IE에서는 event.x를, Firefox에서는 event.pageX를 바꾸세요.
10.event.srcElement 문제
설명: IE에서는 이벤트 객체에 srcElement 속성이 있지만 대상 속성이 없습니다. Firefox에서는 이벤트 객체에 대상 속성이 있지만 srcElement 속성이 없습니다.
해결책: obj를 사용하세요(obj = event.srcElement ? event.srcElement : event.target;) 대신 Firefox의 IE event.srcElement 또는 event.target
13.Frame 문제
다음 프레임을 예로 들어 보겠습니다.

(1) 프레임 개체에 액세스합니다.
IE: window.frameId 또는 window.frameName을 사용하여 이 프레임 개체에 액세스합니다.
Firefox: window.frameName만 사용할 수 있습니다.
또한 IE와 Firefox 모두에서 window.document.getElementById("frameId")를 사용하여 이 프레임 객체에 액세스할 수 있습니다.
(2) 프레임 콘텐츠 전환:
될 수 있습니다. IE와 Firefox 모두에서 사용됩니다. window.document.getElementById("testFrame").src = "xxx.html" 또는 window.frameName.location = "xxx.html"을 사용하여 프레임 내용을 전환하세요.
프레임의 매개변수를 부모 창으로 다시 전달해야 하는 경우 frme의 부모를 사용하여 부모 창에 액세스할 수 있습니다. 예: parent.document.form1.filename.value="Aqing";
14.body 문제
Firefox의 본문은 브라우저에서 본문 태그를 완전히 읽기 전에 존재하지만 IE의 본문은 다음과 같습니다.
예:
Firefox:

코드를 복사하세요 코드는 다음과 같습니다:

IE >


코드 복사

코드는 다음과 같습니다. ; document.body.onclick = function(evt){ evt = evt ||alert(evt);

} script>

15. 이벤트 위임 방법
IE: document.body.onload = inject; //이전에 함수 inject()가 구현되었습니다. Firefox: document.body.onload = inject();
어떤 사람들은 다음과 같이 말합니다:

코드 복사

document.body.onload=new Function('inject()')
16. firefox와 IE의 상위 요소(parentElement)의 차이점
IE: obj.parentElement
firefox: obj.parentNode
해결책: firefox와 IE 모두 DOM을 지원하므로 obj를 사용합니다. .parentNode는 좋은 선택입니다.
17.innerText는 IE에서 정상적으로 작동하지만, innerText는 FireFox에서 작동하지 않습니다.
해결책:

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

if(navigator.appName.indexOf("Explorer") > -1){
document.getElementById('element' ).innerText = "내 텍스트";
} else{
document.getElementById('element').textContent = "내 텍스트"
}

18. FireFox에서 obj.style.height = imgObj.height가 유효하지 않습니다
해결책:

코드를 복사하세요 코드는 다음과 같습니다.

obj.style.height = imgObj.height 'px';

19. IE에서는 테이블 태그가 모두 다르게 작동합니다. table 및 tr에 innerHTML 값을 할당하는 것은 허용되지 않습니다. js를 사용하여 tr을 추가하는 경우 AppendChile 메서드가 작동하지 않습니다.
해결책:

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

//하나 추가 테이블에 빈 행:
var row = otable.insertRow(-1);
var cell = document.createElement("td")
cell.innerHTML = " "
cell. className = " XXXX";
row.appendChild(cell);

padding 문제
padding 5px 4px 3px 1px FireFox는 약어를 해석할 수 없습니다.
를 다음으로 변경해야 합니다. padding-top:5px ; padding-right:3px; padding-left:1px;
21. ul, ol 및 기타 목록의 들여쓰기를 제거하려면
스타일을 사용하세요. : list-style:none; margin:0px ;padding:0px;
margin 속성은 IE에 유효하고, padding 속성은 FireFox
CSS 투명성
IE에 유효합니다. DXImageTransform.Microsoft.Alpha(style=0,opacity=60) .
FF:불투명도:0.6.
23. CSS 둥근 모서리
IE: 둥근 모서리는 지원되지 않습니다.
FF: -moz-border-radius:4px 또는 -moz-border-radius-topleft:4px;-moz-border-radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz -국경 반경-하단 오른쪽:4px;.
24. CSS 이중선 범프 테두리
IE: border:2px outset;.
FF: -moz-경계-상단-색상: #d4d0c8 흰색;-moz-경계-왼쪽-색상: #d4d0c8 흰색;-moz-경계-오른쪽-색상:#404040 #808080;-moz-경계- 하단 색상:#404040 #808080
25． IE는 document.all을 지원하지만 Firefox는 지원하지 않습니다.
document.all 대신 다음 세 가지 태그 중 하나를 사용
getElementsByTagName("tagName")하여 모든 태그 요소 컬렉션 가져오기
getElementById("idName ") ) id
getElementsByName("Name")으로 요소를 가져올 수 있습니다. name 속성으로 요소를 가져올 수 있습니다
26. Firefox에서 innerHTML을 사용하는 방법

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

document.all.online . innerHTML; //이 방법은 IE에서 사용할 수 있지만 표준 방법은 아닙니다.
document.getElementById("online").innerHTML; //이 방법으로 Firefox는 innerHTML을 사용할 수 있습니다

>27 , eval() 및 window.execScript()는 스크립트를 실행합니다
IE와 Firerox는 모두 eval()을 지원하지만 Firefox는 window.execScript()를 지원하지 않습니다
해결책: eval()을 균일하게 사용하세요
28 . 이벤트 처리 함수 재작성
해결 방법: (예): 문서의 onclick()을 재작성하는 경우 document.onclick = function(){…}을 사용하세요.