JS与DOM的兼容性

一、JS与DOM的兼容性：

(一) DOM节点的访问：

1.以前对DOM节点访问一般用“document.All.元素ID属性值”或者“document.元素ID属性值”这种简化的方法，在FireFox中有时不支持此方法。
解决办法：标准的方法为“document.getElementByIdx_x_xx(‘元素ID属性值’)”或者“document.getElementByName(‘元素Name属性值’)[0]”或者“document.getElementByTagName(‘元素标签名’)[0]”；

2.集合类对象的()与[]的问题：以前的代码中很多集合类对象的访问使用()，IE可以正常解析，FireFox不支持。
解决办法：改用[]作为下标符号。如：document.Forms(‘FormName’)改为document.Forms[‘FormName’]；又如：document.getElementsByName(‘元素Name属性值’)(1)改为document.getElementsByName(‘元素Name属性值’)[1]；

3.document.Form.Item的问题：FireFox不能正常解析形如：document.FormName.Item("ItemName")这样的语句,但IE与FireFox都支持document.FormName.Elements["ElementName"]。
解决办法：改用如下语句形式：document.FormName.Elements["ElementName"]；

4.在IE中，可以利用eval_r(‘元素ID属性值’)的方法取得改HTML对象，FireFox不支持此种对象访问方法。
解决办法：用“document.getElementByIdx_x_xx(‘元素ID属性值’)”的方法取得对象；

5.在IE中可以通过ID属性值或者Name属性访问这个Frame对象,而FireFox只可以通过Name属性来访问这个Frame对象;
IE和FireFox均可通过window.document. getElementById(‘FrameId属性值’)来访问这个Frame对象

6.在IE中body对象要在<body>标签完全读入才会存在，而在FireFox中一开始就存在

7.在IE中input标签的type属性是只读的，但在FireFox中是可读写的

8.在IE中getElementsByName()、document.all[name]均不能用来取得div元素

9.IE,FireFox以及其它浏览器对于Table标签的操作都各不相同，在IE中不允许对Table和TR的innerHTML赋值，使用JS增加一个TR时，使用appendChild方法也不管用。

解决办法：
//向Table追加一个空行：
var row = otable.insertRow(-1);
var cell = document.createElement_x_x_x_x_x("td");
cell.innerHTML = " ";
cell.className = "XXXX";
row.appendChild(cell);

10.在FireFox节点中没有removeNode方法，必须使用如下方法 node.parentNode.removeChild(node)

11.IE或者FireFox2.0.x下,可以使用window.location或window.location.href;但在FireFox1.5下，只能使用window.location
解决方法:使用window.location来代替window.location.href

12.IE与FireFox的访问父元素有区别，IE为Obj.ParentElement属性;FireFox为Obj.ParentNode属性
解决办法：因为FireFox与IE都支持DOM，因此统一用ParentNode属性

13.FireFox不支持元素的innerText属性，需用textContent
解决办法：
if(navigator.appName.indexOf("Explorer") > -1){
document.getElementByIdx_x_xx(‘element‘).innerText = "my text";
} else{
document.getElementByIdx_x_xx(‘element‘).textContent = "my text";
}

14.FireFox不支持元素的HtmlText属性
解决办法：
rng = document.createRange();
el = document.getElementByIdx_x_xx(ElementId);
rng.setStartBefore(el);
htmlFrag = rng.createContextualFragment(content);
while (el.hasChildNodes()){ //清除原有内容，加入新内容
el.RemoveChild(el.LastChild);
}
el.AppendChild(htmlFrag);

15.在IE下可以用<Img Id="pic" OnClick="this.src= ‘aa.php’" src="aa.php" style="cursor: pointer"/> 可以刷新图片，但在FireFox下由于缓存问题不行。
解决办法：在地址后面加个随机数：编辑onclick事件代码如下："this.src=this.src+’?’+Math.random()"

16.在访问某一节点如childNodes[i]时，要获得该节点的值而这个值是<![CDATA[]]类型，那么在IE中可支持这样访问childNodes[i].text或childNodes[i].firstChild.nodeValue；在FireFox只支持childNodes[i].firstChild.nodeValue
解决办法：统一用childNodes[i].firstChild.nodeValue方法访问节点元素值

17.在形如
<root>
<en>text</en>
</root>
格式的XML,在IE中<en>是<root>的第一个子节点，可通过root.childNodes[0]或root.firstChild访问，但在FireFox中<en>是<root>的第二个子节点，第一个子元素是换行符，NodeType是#text;如果将XML换成如下格式
<root><en>text</en></root>
在IE和FireFox中<en>都是<root>的第一个子节点

18.在用JS创建单选按钮上的方法上，IE与其它浏览器不同，要写出通用的创建方法就需要一种浏览器嗅探机制(browser-sniffing);IE是唯一能够识别uniqueID这一document对象专属属性的浏览器，故可用该属性区分浏览器类型；代码如下：

if(document.uniqueID){
//Internet Explorer
var radioButtion = document.createElement_x_x_x_x_x("<input type=‘radio‘ name=‘radioButtion‘ value =‘checked‘>");
}else{
//Standards Compliant
var readioButtion = document.createElement_x_x_x_x_x("input");
readioButtion.setAttribute("type","radio");
readioButtion.setAttribute("name","radioButtion");
readioButtion.setAttribute("value","checked");
}

19.删除select列表标签的列表项应该用obj.remove(i);而不是用obj.options.remove(i);

20.添加select列表标签的列表项应该用
var oOption = document.createElement_x_x_x_x_x(‘option‘);
oOption.text = text;
oOption.value = value;
targetArea.options[targetArea.options.length]= oOption; //new Option(text,value);
而不是用
var oOption = document.createElement_x_x_x_x_x(‘option‘);
oOption.text = text;
oOption.value = value;
targetArea.options.add(oOption);

21.IE中一般这样初始化一个XMLDOM对象

var xmlDom = new ActiveXObject("Microsoft.XMLDOM");
FireFox不支持该方法(具体原因参见四.JS的语法兼容性.6.)，兼容性代码如下
if (window.ActiveXObject){
var xmlDom = new ActiveXObject("Microsoft.XMLDOM");
}else{
if (document.implementation && document.implementation.createDocument){
var xmlDom = document.implementation.createDocument("","",null);
}
}
有关不同浏览器对XMLDOM操作的异同请参见《IE和FireFox浏览器读取XML方法比较》

(二) DOM节点属性的访问：

1.原来在IE中设置HTML对象属性的方法如：document.all.apple.width=100或者apple.width=100；现在为了能够和FireFox兼容，对象属性的设置写为：document.getElementByIdx_x_xx(‘元素ID属性值’).setAttribute(‘width’, ‘100’)
document.getElementsByTagName_r(‘元素标签名’)[0].setAttribute(‘width’, ‘100’)
对象属性的获取写为：
document.getElementByIdx_x_xx(‘元素ID属性值’).getAttribute(‘width’)
document.getElementsByTagName_r(‘元素标签名’)[0].getAttribute(‘width’)

2.(接上条) 在IE下不能正确使用setAttribute来设置对象的style、class以及事件响应属性, 因此还得按原来的方法来访问和设置，以达到兼容各种浏览器的效果
如下例：
document.getElementByIdx_x_xx(‘元素ID属性值’).class
document.getElementByIdx_x_xx(‘元素ID属性值’).style.color
document.getElementByIdx_x_xx(‘元素ID属性值’).onclick
document.getElementByIdx_x_xx(‘元素ID属性值’).class="classname"
document.getElementByIdx_x_xx(‘元素ID属性值’).style.color="colorname"
document.getElementByIdx_x_xx(‘元素ID属性值’).onclick= function(){alert(‘函数内容’)}

3.在FireFox中，自己定义的属性必须用getAttribute()方法获取，不能像在IE下直接获取
解决办法：统一用getAttribute()方法获取

4.img标签具有title和alt两个属性，title用作图片的tip说明，alt用在图片不存在或加载失败时的提示；在IE中若未定义title则alt也承担了title的作用，但在FireFox则各司其职；因此为保证浏览器兼容最好各尽其用

5.IE中要操作某个节点(Node)的class要用”classname”做为属性名来设置或取得，FireFox和其它浏览器用”class”做为属性名来设置或取得

6.设置某个节点(Node)的style,如果用”style” 做为属性名其它浏览器都能解析，但IE会忽略；如果用”cssText” 做为属性名其它浏览器都能解析，但Opera会忽略;通用代码如下：
var oStyle = oNode.getAttribute("style");
if(oStyle == "[object]"){
oStyle.setAttribute("cssText", strStyle);
oNode.setAttribute("style", oStyle);
}else{
oNode.setAttribute("style", strStyle);
}

(三) DOM事件(event)的使用：
1.IE下一般用document.body.onload = onload_func这样的方法注册onload响应事件函数，其中function onload_func()在这之前已经被实现，但是在FireFox下却无法执行; FireFox下一般用document.body.onload = onload_func()这样的方法。
解决办法：都采用window.onload = onload_func这种方法;或者都采用document.body.onload = new Function(‘onload_func‘); 或者都采用document.body.onload = function(){}。(注意Function与function的区别)

2.FireFox的event只能在事件发生的现场使用，此问题暂无法解决。可以这样变通：

原代码(可在IE中运行)：
<input type="button" name="someButton" value="提交" onclick="javascript:gotoSubmit()"/>
...
<script language="javascript">
function gotoSubmit(){
...
alert(window.event); // use window.event
...
}
</script>

新代码(可在IE和FireFox中运行)：
<input type="button" name="someButton" value="提交" onclick="javascript:gotoSubmit(event)"/>
...
<script language="javascript">
function gotoSubmit(evt) {
evt = evt ? evt : (window.event ? window.event : null);
...
alert(evt); // use evt
...
}
</script>

此外，如果新代码中第一行不改，与原代码相同的话(即gotoSubmit调用没有给参数)，则仍然只能在IE中运行，但不会报错。

3.在IE中，event对象有x、y两属性，FireFox中没有;相对的在FireFox中，event对象有pageX、pageY两属性，IE中没有。
解决办法：用event.clientX、event.clientY代替，缺陷是在页面中存在滚动条时与pageX、pageY有细微差别；或者用如下方法代替：
pgX = event.x ? event.x : event.pageX;
pgY = event.y ? event.y : event.pageY;
可取得无差别数值。

4.在IE中event对象有srcElement属性,但是没有target属性; 在Firefox中event对象有target属性,但是没有srcElement属性
解决办法：用obj = event.srcElement ? event.srcElement : event.target;来代替IE下的event.srcElement或者Firefox下的event.target,请同时注意event的兼容性问题。

5.添加事件捕获 IE中：obj.setCapture()、obj.releaseCapture()
FireFox中：document.addEventListener( "mousemover",mousemovefunction,true);
document.removeEventListener( "mousemove ",mousemovefunction,true);

6.禁止选取网页内容 IE中用JS：obj.OnSelectStart=function(){return false;}
FireFox中用CSS：-moz-user-select:none

(四) JS的语法兼容性：
1.在FireFox中可以使用与HTML节点对象ID属性值相同的JS变量名称，但是IE中不行。
解决办法：在命名上区分HTML节点对象ID属性值和JS变量

2.IE不支持JS的const,无法定义JS常量
解决办法：全部用var定义为变量

3.在JS中书写URL地址字符串时&字符就直接写为“&”(去掉双引号),不要写“&amp;”，否则容易出现URL识别不正常的错误

4.在IE中可以通过showModalDialog和showModelessDialog打开模式和非模式窗口，FireFox下则不能
解决办法：使用Window.Open方法。如果需要将子窗口中的参数传递回父窗口，可以在子窗口中使用Window.Opener属性来访问父窗口；如果需要父窗口控制子窗口的话，使用Var subWindow = Window.Open(pageURL,Name,Parameters); 来获得新开的窗口对象

5.在IE中向表格里添加一行的方法insertRow()如果不指定参数，默认参数为-1,将自动向Table中追加1行；在FireFox中一定要指定参数如-1,参数为空会报错

6.在IE中可以使用new ActiveXObject()的方法实例化对象，如var xmlDom = new ActiveXObject("Microsoft.XMLHTTP");但是FireFox不支持ActiveXObject,只能通过这种方法如var xmlDom = new XMLHttpRequest();实例化对象

二、CSS兼容性：

1.CSS中几种浏览器对不同关键字的支持，可进行浏览器兼容性重复定义

!important 可被FireFox和IE7识别
* 可被IE6、IE7识别
_ 可被IE6识别
*+ 可被IE7识别

2.IE专用的条件注释
<!--其他浏览器 -->
<link rel="stylesheet" type="text/css" href="css.css" />
<!--[if IE 7]>
<!-- 适合于IE7 -->
<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->
<!--[if lte IE 6]>
<!-- 适合于IE6及一下 -->
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

3.几个浏览器对实际像素的解释
IE/Opera：对象的实际宽度 = (margin-left) + width + (margin-right)
Firefox/Mozilla：对象的实际宽度= (margin-left) + (border-left-width) + (padding- left) + width + (padding-right) + (border-right-width) + (margin-right)

4.鼠标手势问题：FireFox的cursor属性不支持hand，但是支持pointer，IE两个都支持；所以为了兼容都用pointer

5.FireFox中设置HTML标签的Style属性时，所有位置、宽高和尺寸值必须后跟px，IE也支持此写法，因此统一加px单位。如 Obj.Style.Height = imgObj.Style.Height + ‘px’;

6.FireFox无法解析简写的padding属性设置，如padding 5px 4px 3px 1px；必须改为 padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px0；

7.消除ul、ol等列表的缩进时，样式应写成:list-style:none;margin:0px;padding:0px;其中margin属性对IE有效，padding属性对FireFox有效

8.CSS控制透明：IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60); FireFox：opacity:0.6;

9.CSS控制圆角：IE：不支持圆角；
FireFox: -moz-border-radius:4px;或
-moz-border-radius-topleft:4px;
-moz-border-radius-topright:4px;
-moz-border-radius-bottomleft:4px;
-moz-border-radius- bottomright:4px;

10.CSS双线凹凸边框：IE：border:2px outset;
FireFox：
-moz-border-top-colors: #d4d0c8 white;
-moz-border-left-colors: #d4d0c8 white;
-moz-border-right-colors:#404040 #808080;
-moz-border-bottom-colors:#404040 #808080;

11.IE支持CSS方法cursor:url()自定义光标样式文件和滚动条颜色风格；FireFox对以上两者均不支持

12.IE有Select控件永远处于最上层的bug,且所有CSS对Select控件都不起作用

13.IE支持Form中的Label标签，包括图片和文字内容；FireFox不支持包含图片的Label，点击图片不能让标记 label for 的Radio或CheckBox产生效果

14.FireFox中的TextArea不支持onScroll事件

15.FireFox不支持display的inline和block

16.FireFox对Div设置margin-left, margin-right为auto时已经居中, IE中不行

17.FireFox对Body设置text-align时, Div需要设置margin: auto(主要是margin-left margin-right) 方可居中

18.对超链接的CSS样式设置最好遵从这样的顺序：L-V-H-A。即
<style type="text/css">
<!--
a:link {}
a:visited {}
a:hover {}
a:active {}
-->
</style>
这样可以避免一些访问过后的超链接就不具备hover和active样式了

19.IE中设置长段落自动换行在CSS中设置word-wrap:break-word；FireFox中使用JS插入 的方法来实现，具体代码如下：

<script type="text/javascript">

function toBreakWord(el, intLen){
var obj=document.getElementByIdx_x_xx(el);
var strContent=obj.innerHTML;
var strTemp="";
while(strContent.length>intLen){
strTemp+=strContent.substr(0,intLen)+" ";
strContent=strContent.substr(intLen,strContent.length);
}
strTemp+=" "+strContent;
obj.innerHTML=strTemp;
}
if(document.getElementByIdx_x_xx && !document.all) toBreakWord("div_id", 37);

</script>

20.在子容器加了浮动属性后,该容器将不能自动撑开
解决方法：在标签结束后下一个标签中加上一个清除浮动的CSS clear:both;

21.浮动后IE6解释外边距为实际边距的双倍
解决办法：加上display:inline

22.IE6下图片下方会有空隙
解决办法：为img加上display:block或设置vertical-align 属性为vertical-align:top | bottom |middle |text-bottom

23.IE6下两个层中间有空隙
解决办法：设置右侧div也同样浮动float:left或者相对IE6定义 margin-right:-3px;

24.LI中内容超过长度后以省略号的显示方法
<style type="text/css">
<!--
li {
width:200px;
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
overflow: hidden;
}
-->
</style>

25.将元素的高度和行高设为相同值，即可垂直居中文本
<style type="text/css">
<!--
div {
height:30px;
line-height:30px;
}
-->
</style>

26.对齐文本与文本输入框，须在CSS中增加vertical-align:middle;属性设置
<style type="text/css">
<!--
… …
vertical-align:middle;
}
-->
</style>

27.支持WEB标准的浏览器设置了固定高度值就不会像IE6那样被撑开，但是又想设置固定高度又想能够被撑开呢?解决办法是去掉height属性而设置min-height，为了兼容不支持min-height的IE6可以这样定义：
{
height:auto!important;
height:200px;
min-height:200px;
}

28.web标准中IE无法设置滚动条颜色
解决办法：在CSS中对body的设置改为对html的
<style type="text/css">
<!--
html {
scrollbar-face-color:#f6f6f6;
scrollbar-highlight-color:#fff;
scrollbar-shadow-color:#eeeeee;
scrollbar-3dlight-color:#eeeeee;
scrollbar-arrow-color:#000;
scrollbar-track-color:#fff;
scrollbar-darkshadow-color:#fff;
}
-->
</style>

29.IE6由于默认行高问题无法定义1px左右高度的容器，
解决办法：在CSS中对容器设置如：overflow:hidden | zoom:0.08 | line-height:1px

30.给Flash设置透明属性可使层显示在Flash之上
<param name="wmode" value="transparent" /> <!-- 解决IE上的问题 //>
<embed wmode="transparent" …… > <!-- 解决FireFox上的问题 //>

31.FireFox设置Padding属性后会相应的增加Width和Height属性值，IE不会
解决办法：用!important方法多定义一套Height和Width

32.FireFox对div与div之间的空格是忽略的，但IE是处理的；因此尽量在两个相连的div之间不要有空格和回车，否则可能会造成不同浏览器之间格式不正确，比如著名的3px偏差；而且原因很难查明

33.形如如下格式
<div id="parent">
<div id="content"> </div>
</div>
当Content内容多时，即使parent设置了高度100%或auto,在不同浏览器下还是不能完好的自动伸展；解决办法在层的最下方产生一个高度为1的空格,代码如下
<div id="parent">
<div id="content"> </div>
<div style="font: 0px/0px sans-serif;clear: both;display: block"> </div>
</div>

34.IE和FireFox对字体small的尺寸解释不同，FireFox为13px,IE中为16px

35.IE和FireFox对空格的尺寸解释不同，FireFox为4px,IE中为8px

36.CSS的float属性：

IE下：document.getElementByIdx_x("idname").style.styleFloat="float";

FF下：document.getElementByIdx_x("idname").style.cssFloat="float";

JS与DOM的兼容性

时间： 2024-08-29 03:57:23

JS与DOM的兼容性的相关文章

JS与IE/Firefox兼容性汇总

以下以 IE 代替 Internet Explorer,以 MF 代替 Mozzila Firefox1. document.form.item 问题     (1)现有问题:         现有代码中存在许多 document.formName.item("itemName") 这样的语句,不能在 MF 下运行     (2)解决方法:         改用 document.formName.elements["elementName"]     (3)其它 

JS中出现的兼容性问题的总结

JS中出现的兼容性问题的总结1.关于获取行外样式 currentStyle 和 getComputedStyle 出现的兼容性问题 我们都知道js通过style不可以获取行外样式,当我们需要获取行外样式时: 我们一般通过这两个方法获取行外样式: IE下: currentStyle Chrome,FF下: getComputedStyle(oDiv,false) 兼容两个浏览器的写法: if(oDiv.currentStyle){ alert(oDiv.currentStyle.width); }

【js常用DOM方法】

介绍几个js DOM的常用方法 获取元素节点 getElementById  getElementsByTagName  getElementsByClassName 先写一个简单的网页做测试: /* test.html*/<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> </head> <body&g

JS and DOM 对象列表

JavaScript 对象(9个) JS Array JS Boolean JS Date JS Math JS Number JS String JS RegExp JS Functions JS Events Browser 对象(5个) Window Navigator Screen History Location HTML DOM 对象(4个) DOM Document DOM Element DOM Attribute DOM Event HTML 对象(...) <a> <

解析JS操作DOM

首先,如何操作DOM可大致分为以下几项: 1)创建节点:除了可以使用createElement创建元素,也可以使用createTextNode创建文本节点. document.body指向的是<body>元素;document.documentElement则指向<html>元素 //创建节点 var createNode = document.createElement("div"); var createTextNode = document.createT

Js操作-DOM操作

js学习--DOM操作详解大全 前奏(认识DOM) 一 . 节点属性 DOM 是树型结构,相应的,可以通过一些节点属性来遍历节点树: 方法 说明 nodeName 节点名称,相当于tagName.属性节点返回属性名,文本节点返回#text.nodeName,是只读的. nodeType 节点的类型,返回值:1,元素节点:2,属性节点:3,文本节点.nodeType 是只读的. nodeValue 节点的值,返回一个字符串,指示这个节点的值.元素节点返回 null,属性节点返回属性值,文本节点返回

Js操作DOM的方式及获取浏览器的宽高

我们在为页面加入一些动态效果或实现一些脚本功能时,需要对文档body中的元素进行操作,也就是,我们需要使用js或jQuery来对dom操作.下面呢,我说一下js是怎样对dom操作的. document.write(),这既可以向文档输出文本,也可以写入代码来添加元素. 获取需要操作的元素: 利用id获取就是:document.getElementById("name"); 利用class获取就是:document.getElementsByClassName("name&qu

js操作dom的一些基本用法

1.js添加dom元素 2.js移除dom元素 --------------

原生js操作dom的方法

今天学习了原生js的dom节点的操作,就记录下来,仅供自己以后参考. 1)创建节点:除了可以使用createElement创建元素,也可以使用createTextNode创建文本节点. document.body指向的是<body>元素;document.documentElement则指向<html>元素 //创建节点    var createNode = document.createElement("div");    var createTextNod