javascript 在ie firfox下的兼容性总结

最新推荐文章于 2025-12-18 10:02:55 发布

转载最新推荐文章于 2025-12-18 10:02:55 发布 · 769 阅读

文章标签：

#javascript #ie #文档 #class #html #firefox

js 专栏收录该内容

11 篇文章

订阅专栏

本文探讨了JavaScript在不同浏览器如IE和Firefox之间的兼容性问题，包括childNodes.length的使用差异、获取元素属性值的方法、setAttribute的注意事项、appendChild的限制及select选项的处理。

[IE和firefox在javascript中兼容性]

http://www.suzhou35.com/blog/article.asp?id=253

http://www.mf100.com/document/2006-2/909.shtml

1 childNodes.length的兼容性

var parentId = document.getElementById(idValue);

var childId = parentId.childNodes;

alert(childId.length);

在ie和firfox下得到的结果是不一样的，这是因为在ie下使用这个语句得到的节点的类型就是元素节点，而在firfox下面使用这个语句得到的不只是元素节点，还包括文本节点，节点属性等等节点的类型，所以会产生不同的结果的，如果在firfox用到for循环的情况下，就会执行不同的循环次数，会产生错误,比如payfor.php中的关联菜单，解决的方式是使用nodeTytpe判断节点的类型，如下返回的 childNum就是想要得到的元素节点的数量：

var childNum = 0;

for(var i=0;i<childId.length;i++){

if(childId[i].nodeType==1){

childNum +=1;

alert(childNum);

}

附：具体的节点的类型参见如下：

HTML文档的节点

DOM下，HTML文档各个节点被视为各种类型的Node对象。每个Node对象都有自己的属性和方法，利用这些属性和方法可以遍历整个文档树。由于HTML文档的复杂性，DOM定义了

nodeType来表示节点的类型。这里列出Node常用的几种节点类型：

1 接口 nodeType常量 nodeType值备注

2 Element Node.ELEMENT_NODE 1 元素节点

3 Text Node.TEXT_NODE 3 文本节点

4 Document Node.DOCUMENT_NODE 9 document

5 Comment Node.COMMENT_NODE 8 注释的文本

6 DocumentFragment Node.DOCUMENT_FRAGMENT_NODE 11 document片断

7 Attr Node.ATTRIBUTE_NODE 2 节点属性

DOM树的根节点是个Document对象，该对象的documentElement属性引用表示文档根元素的Element对象（对于 HTML文档，这个就是<html>标记）。Javascript操作HTML文档的时候，document即指向整个文档，< body>、<table>等节点类型即为Element。Comment类型的节点则是指文档的注释。具体节点类型的含义，请参考《Javascript权威指南》。

2 得到元素节点属性的值

<div id='id' value='aaa'>hello</div>

在ie下面可以直接使用document.getElementById('id').value就可以得到aaa,而在ie和firfox下都支持document.getElementById('id').getAttribute('value'),firfox比较严格遵守dom取值的方式

3 关于setAttribute

(1)在新的节点中增加class属性,ie的内核不识别class，支持className而firfox的内核不识className,

支持class,所以就要两者都写即

var createId = document.createElement('div');

createId.setAttribute('class','class1');

createId.setAttribute('className','class1');

2) ie中不能使用setAttribute设置style值 element.setAttribute("style","font-weight:bold")应该替换为element.style.cssText="font-weight:bold";

4 关于appendChild

1) 将<tr>标签直接加在后面IE中是不好用的，其他的浏览器有效，在ie下先把<tr>加在<tbody>后面就可以了