IE의 js와 FF_javascript 기술의 차이점에 대한 자세한 분석

js调试工具推荐firefox的firebug插件

能够给js设置断点执行

能够运行时修改css样式

查看dom模型等

☆IE8自带的developerbar也很不错

☆打开firefox所有js警告:
在地址栏里录入:about:config
双击,设置javascriptoptionrestict打开为true能够看到很多警告,利于纠错

☆IE->firefoxjavascript类

△document.all("id")->document.getElementById("id")
并且控件尽量用id,而不是name标识

提示:
如果控件只有name,没有id,用getElementById时:
IE:也可以找到对象
FF:返回NULL

△获得form里某个元素的方法
elForm.elements['name'];

△取集合元素时,ie支持[],()2种写法,但是ff仅支持[],如:
table.rows(5).cells(0)
改为:
table.rows[5].cells[0]

△判断对象是否是object的方法应该为
if(typeof对象变量=="object")
而不是if(对象变量=="[object]")

△eval(对象名称)->document.getElementById
FF支持eval函数

△通过id直接调用对象
对象id.value=""
改为
document.getElementById("name").value=""

△obj.insertAdjacentElement("beforeBegin",objText);

改为用
obj.parentNode.insertBefore(objText,obj);

△FF的createElement不支持HTML代码

用document.write(esHTML);

或者创建元素后再设置属性,对input元素来说,需要先设置type再加入到dom里
varobj=createElement("input");
obj.type="checkbox";

varobj2=document.getElementById("id2");
obj2.parentNode.insertBefore(obj,obj2);

如果是直接插入html代码,则可以考虑用
createContextualFragment

△innerText->textContent

△对象名称中的$不能识别,建议改为_
objName="t1$spin"
改为
objName="t1_spin"

△FF里设置Attribute为某个对象,然后再取出来,这时候对象的属性都丢失了?
objText.setAttribute("obj",obj);

alert(obj.id)//正确的名字
obj=objText.getAttribute("obj");
alert(obj.id)//null

在IE下没有问题,FF对setAttribute来说,第2个参数都是字符串型的!!!
所以如果第2个参数是对象时,相当于调用对象的toString()方法了

解决的方法是用下面的调用方式:
objText.dropdown_select=obj;
obj=objText.dropdown_select

△className->class
FF下用class代替IE下的className
由于class是关键字,所以需要用setAttribute/getAttribute才行
setAttribute("class","css样式名称");

△在html里定义的属性,必须用getAttribute才行

获取时:
document.getElementByID("TD1").isOBJ总返回undefined,IE下是可以的

应该用:
document.getElementByID("TD1").getAttribute("isOBJ")

△FF里select控件不再是:总是在顶端显示
所以可能需要设置控件的zIndex
IE里覆盖select控件的方法是,用ifame

△对于if(vars==undefined)下面的值用于判断是等同的
undefined
null
false
0

△如果FF调用obj.focus();报错,请尝试改为:
window.setTimeout(function(){obj.focus();},20);

△FF下,keyCode是只读的,那把回车转换为tab怎么办?在录入时进行键值转换怎么办??

变通的方法是:
1.回车跳转->自己写跳转处理代码.
遍历dom里所有的元素,找到当前元素的下一个能够设置焦点的元素,给其设置焦点

2.在能够录入的控件里,
把选中的部分替换为新录入的内容:vartext=String.fromCharCode(event.keyCode);
同时阻止按键事件上传,调用:event.preventDefault()

△会被firefox解释为提交form或者刷新页面???
需要写标准
或者在onclick="原函数调用();returnfalse;"

△在firefox里,document.onfocus里获得不到实际获得焦点的控件?
为什么document.keydown可以呢?

△children->childNodes

△sytle.pixelHeight->style.height

△判断函数或者变量是否存在
if(!("varName"inwindow))varVarName=1;

△document.body.clientWidth

如果html包含上面的语句,则应该用下面的方法获取
document.documentElement.clientWidth

△window.createPopup

FF는 지원하지 않습니다

Δdocument.body.onresize

FF는 지원하지 않습니다

window.onresize 사용

페이지가 열릴 때 onresize 이벤트가 실행되지 않는다는 점에 유의하세요. onload에서 한 번 호출해야 합니까?

Δ박스 모델의 문제점

IE에서 기본값은 통합을 위한 콘텐츠 상자이며, 사용 가능한 설정은 다음과 같습니다.

div,td{-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;}

은 문서 헤더에 추가할 수도 있습니다:

그러나 이전 IE 코드에 더 큰 영향을 미칩니다

Δ이벤트 등록

IE:이벤트 첨부

FF:addEventListener("blur",myBlur,false);

첫 번째 매개변수 이벤트 이름에는 "on"이 포함될 필요가 없습니다

세 번째 매개변수 false는 이벤트가 DOM 트리를 따라 이벤트 객체에서 몸체 방향으로 전달됨을 나타냅니다.

Δ트리거 이벤트

IE:obj.fireEvent("onclick");

FF:

vare=document.createEvent("이벤트");

e.initEvent("click",true,false);

element.dispatchEvent(이벤트)

Δ 이벤트 핸들러 함수에서 객체 핸들 얻기

varoThis=this;

obj.onfocus=function(evt){

oThis.doOnFocus(evt);

}

△통합 이벤트 처리 프레임워크 코드

doOnFocus(evt){

evt=evt||window.event;

varel=evt.target||evt.srcElement;

//후속처리

}

ΔFF는 onpropertychange 이벤트를 지원하지 않습니다

그러나 아래와 같이 FF에서 속성의 setter 메서드를 정의할 수 있습니다.

HTMLElement.prototype.__defineSetter__("readOnly",function(readOnly){

//가상 이벤트 객체 생성

varevt=[];

evt["target"]=this;

evt["propertyName"]='readOnly'

//onpropertychange 함수는 evt 매개변수를 정의해야 합니다. 통합 이벤트 처리 프레임워크 코드를 참조하세요

if(this.onpropertychange)this.onpropertychange(evt);

});

☆IE->firefoxcss 클래스

Δ커서:손->커서:포인터

△expressionfirefox는

을 지원하지 않습니다.

표현식은 IE에서도 CPU를 많이 소모하므로 사용하면 안됩니다!!

더 나은 결과를 얻으려면 자바스크립트 처리 기능에 대한 자신만의 표현식을 만들어야 합니다

이렇게 하면 IE와 FF 모두에서 사용할 수 있습니다.

ΔFILTER 파이어폭스는

를 지원하지 않습니다.

필터:알파(불투명도=50);

를

로 교체

-moz-불투명도:0.5;

Δ텍스트 오버플로

지원되지 않음

Δ투명

firefox에서는 obj.setAttribute("bgColor","#ffffff")가 색상만 지원합니다

obj.style.BackgroundColor="transparent"를 사용해야 합니다

△FF의 텍스트 컨트롤 높이가 IE와 다르니 통일해주세요

입력[유형=텍스트]{

높이:20px;

}

입력과 [!

사이에는 공백이 있어서는 안 됩니다.

△font는 IE의 body와 td에서 작동하지 않지만 FF는 가능합니다.

글꼴군을 균일하게 사용