本篇内容，主要是个人根据工作中遇到的情况，做个小结。
1、Select列表控件
删除列表项。在IE下工作正常的代码：
需要修改为：
添加列表项。在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 |
发表于 @ 2007年10月19日 16:52:00|评论(loading...)|编辑