编写Javascript脚本，不要忽视了对Firefox的兼容性

本篇内容，主要是个人根据工作中遇到的情况，做个小结。 

1、Select列表控件

删除列表项。在IE下工作正常的代码：

obj.options.remove(i);

需要修改为：

obj.remove(i);

添加列表项。在IE下工作正常的代码：

var  oOption  =  document.createElement( ' option ' ); 
oOption.text  =  text; 
oOption.value  =  value; 
targetArea.options.add(oOption); 

为了提供更好的浏览器兼容性，更符合W3C DOM Level 2 HTML标准，建议改为如下代码：

var  oOption  =  document.createElement( ' option ' ); 
oOption.text  =  text; 
oOption.value  =  value; 
targetArea.options[targetArea.options.length] = new  Option(text,value);

另外，selectObj.options(i)，需要改为selectObj.options[i]。

 2、XmlDom对象

IE下一般这样做：

var  xmlDom  =   new  ActiveXObject( " Microsoft.XMLDOM " ); 

为了兼容Firefox，需要修改为：

if  (window.ActiveXObject){ 
     var  xmlDom  =   new  ActiveXObject( " Microsoft.XMLDOM " ); 
} 
else {
     if  (document.implementation  &&  document.implementation.createDocument){
         var  xmlDom  =  document.implementation.createDocument( "" , "" , null ); 
    } 
}

 3、对于childNodes的循环处理

var  nodes = xmlDom.documentElement; 
     var  sName;   // 标签文本
     var  sValue;  // 标签值
    
     if  (nodes.childNodes.length  !=   0 ) {
         for  ( var  i = 0 ;i < nodes.childNodes.length; ++ i) {
            oItem  =  nodes.childNodes.item(i); 
            sName  =  oItem.text; 
            sValue  =  oItem.getAttribute( " id " );  // 这里会报错
            addOption(targetArea,sName,sValue); 
        } 
    }

上面这段代码，在IE下完全没有问题，但是在Firefox下就毫无反应，Firefox下的错误控制台报告：oItem没有getAttribute方法，百思不得其解，经调试，发现oItem的节点类型竟然是3，也就是文本，进一步调试得知，oItem的节点类型分别是3、1、3、1....（1是节点对象），使用Firefox的Dom查看器一看，恍然大悟！其中，Xml数据字符串为：

< types >
< type  id ="215" > 验房服务 </ type >
< type  id ="216" > 家装设计 </ type >
< type  id ="217" > 建筑工程 </ type >
< type  id ="218" > 家装监理 </ type >
< type  id ="219" > 检测(环境质量) </ type >
< type  id ="220" > 风水 </ type >
</ types >

在Dom查看器中看到：

可以看到，#text节点和节点对象交替排列(id列有数据的为正常节点，例如“验房服务”、“家装设计”等等)，造成当oItem为#text类型的时候调用getAttribute()方法失败，因为文本节点没有此方法。

那么，修改后的代码是：

var  nodes = xmlDom.documentElement; 
     var  sName;   // 标签文本
     var  sValue;  // 标签值
     var  oItem,sName,sValue,oOption;
     if  (nodes.childNodes.length  !=   0 ) { 
         for  ( var  i = 0 ;i < nodes.childNodes.length; ++ i) {
     var  oItem  =  nodes.childNodes[i]; 
     if (oItem.nodeType  ==   1 ){  // 判断是否是Element类型
        sName  =  oItem.childNodes[ 0 ].nodeValue;   // 这里需要注意下
        sValue  =  oItem.getAttribute( " id " );
         var  oOption  =  document.createElement( ' option ' ); 
        oOption.text  =  sName; 
        oOption.value  =  sValue; 
        objType.options.add(oOption);
    }
        } 
    }

 

还有一点需要注意的是oItem.text无法在Firefox中取得节点的值，取而代之的是：

oItem.childNodes[0].nodeValue;

至此，真相大白！

附录1：帮助我解决问题的两篇关键文章：

1、http://www.sitepoint.com/forums/showthread.php?t=307056&goto=nextnewest

2、http://www.thescripts.com/forum/thread471907.html

附录2：Node的类型

nodeType	Named Constant	nodeTypeString	nodeName	nodeValue
1	ELEMENT_NODE	element	tagName	null
2	ATTRIBUTE_NODE	attribute	name	value
3	TEXT_NODE	text	#text	content of node
4	CDATA_SECTION_NODE	cdatasection	#cdata-section	content of node
5	ENTITY_REFERENCE_NODE	entityreference	entity reference name	null
6	ENTITY_NODE	entity	entity name	null
7	PROCESSING_INSTRUCTION_NODE	processinginstruction	target	content of node
8	COMMENT_NODE	comment	#comment	comment text
9	DOCUMENT_NODE	document	#document	null
10	DOCUMENT_TYPE_NODE	documenttype	doctype name	null
11	DOCUMENT_FRAGMENT_NODE	documentfragment	#document fragment	null
12	NOTATION_NODE	notation	notation name	null