这两天来一直在写dom,郁闷与ie的不符合标准，火狐和ie的处理dom的不兼容。下面是一个兼容的例子，我可花费了很长时间。贴出来以备后用。
ie和非ie 在解析dom 上有些区别，如何做到页面能在ie和非ie浏览器中都正常显示，就需要某种浏览器嗅探（sniffing）机制，使得在解析dom时能执行正确的方法。幸运的时，不用检查大量的不同的浏览器，假设只使用现代浏览器，脚本只需要在ie和其他浏览器之间做区分就行了。
ie能识别出名为uniqueID的document对象的专用属性，名为uniqueID，ie是唯一能够识别这个属性的浏览器，所以uniqueID很适合用来确定脚本是不是在Ie中运行。使用document.uniqueID。
<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="/webwork" prefix="ww"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test data display</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
.id {
font-family: "宋体";
color: #000000;
background-color: #E9F8CF;
text-align: center;
}
.lottey {
color: #e10000;
background-color: #E9F8CF;
background-position: center;
text-align: center;
font-weight:bold
}
.c1 {
color: #B9B9BD;
background-color: #E9F8CF;
text-align: center;
}
.c2 {
color: #B9B9BD;
background-color: #d0e6f7;
text-align: center;
}
.c_red {
color: #FFFFFF;
background-color: #FF0000;
text-align: center;
}
.c_blue {
color: #FFFFFF;
background-color: #0000CC;
text-align: center;
}
-->
</style>
<SCRIPT type="text/javascript">
function init(){
var arr;// <tr>对象数组
var num="";//期数的开奖号码
var numArr = new Array();
arr = document.getElementById("data").childNodes;//子节点数组
for(var i=0; i<arr.length;i++){
if (arr[i].nodeType==3){//文本节点
//alert("text");
continue;
}
var period="";
if (document.uniqueID){
//alert("execute ie");
period = arr[i].childNodes[1].getAttribute("id");// 期数值
}else{
//alert("execute w3c");
period = arr[i].childNodes[3].getAttribute("id");
}
num = jsTrim(document.getElementById(period+"_number").firstChild.nodeValue);//期数的开奖号码
for (var i=0; i<num.length;i++){
numArr[i]= num.substring(i,i+1);
var id = period+"_"+i+"_"+numArr[i];//单元格id
if (i%2==0){
document.getElementById(id).className="c_red";
}else{
document.getElementById(id).className="c_blue";
}
}
}
}
/*删除空行和空格*/
function jsTrim(str){
var re;
re = /^[ /t]*|[ /t]*$/g;
str = str.replace(re, '');
var p=//s/g;
str=str.replace(p,"");
return(str);
}
</SCRIPT>
</head>
<body onload="javascript:init()">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<TBODY id="data">
<ww:iterator value="p_lst" status="rows">
<tr>
<td class="id"><ww:property value="#rows.index" /></td>
<td class="id" id="<ww:property value='serialNum'/>">
<ww:property value="serialNum" />
</td>
<td class="lottey" id="<ww:property value='serialNum'/>_number">
<ww:property value="number" />
</td>
<td>
<TABLE width="100%">
<TBODY id="display">
<tr>
<td class="c1" id="<ww:property value='serialNum'/>_0_0">
0
</td>
<td class="c1" id="<ww:property value='serialNum'/>_0_1">
1
</td>
<td class="c1" id="<ww:property value='serialNum'/>_0_2">
2
</td>
<td class="c1" id="<ww:property value='serialNum'/>_0_3">
3
</td>
<td class="c1" id="<ww:property value='serialNum'/>_0_4">
4
</td>
<td class="c1" id="<ww:property value='serialNum'/>_0_5">
5
</td>
<td class="c1" id="<ww:property value='serialNum'/>_0_6">
6
</td>
<td class="c1" id="<ww:property value='serialNum'/>_0_7">
7
</td>
<td class="c1" id="<ww:property value='serialNum'/>_0_8">
8
</td>
<td class="c1" id="<ww:property value='serialNum'/>_0_9">
9
</td>
<td class="c2" id="<ww:property value='serialNum'/>_1_0">
0
</td>
<td class="c2" id="<ww:property value='serialNum'/>_1_1">
1
</td>
<td class="c2" id="<ww:property value='serialNum'/>_1_2">
2
</td>
<td class="c2" id="<ww:property value='serialNum'/>_1_3">
3
</td>
<td class="c2" id="<ww:property value='serialNum'/>_1_4">
4
</td>
<td class="c2" id="<ww:property value='serialNum'/>_1_5">
5
</td>
<td class="c2" id="<ww:property value='serialNum'/>_1_6">
6
</td>
<td class="c2" id="<ww:property value='serialNum'/>_1_7">
7
</td>
<td class="c2" id="<ww:property value='serialNum'/>_1_8">
8
</td>
<td class="c2" id="<ww:property value='serialNum'/>_1_9">
9
</td>
<td class="c1" id="<ww:property value='serialNum'/>_2_0">
0
</td>
<td class="c1" id="<ww:property value='serialNum'/>_2_1">
1
</td>
<td class="c1" id="<ww:property value='serialNum'/>_2_2">
2
</td>
<td class="c1" id="<ww:property value='serialNum'/>_2_3">
3
</td>
<td class="c1" id="<ww:property value='serialNum'/>_2_4">
4
</td>
<td class="c1" id="<ww:property value='serialNum'/>_2_5">
5
</td>
<td class="c1" id="<ww:property value='serialNum'/>_2_6">
6
</td>
<td class="c1" id="<ww:property value='serialNum'/>_2_7">
7
</td>
<td class="c1" id="<ww:property value='serialNum'/>_2_8">
8
</td>
<td class="c1" id="<ww:property value='serialNum'/>_2_9">
9
</td>
<td class="c2" id="<ww:property value='serialNum'/>_3_0">
0
</td>
<td class="c2" id="<ww:property value='serialNum'/>_3_1">
1
</td>
<td class="c2" id="<ww:property value='serialNum'/>_3_2">
2
</td>
<td class="c2" id="<ww:property value='serialNum'/>_3_3">
3
</td>
<td class="c2" id="<ww:property value='serialNum'/>_3_4">
4
</td>
<td class="c2" id="<ww:property value='serialNum'/>_3_5">
5
</td>
<td class="c2" id="<ww:property value='serialNum'/>_3_6">
6
</td>
<td class="c2" id="<ww:property value='serialNum'/>_3_7">
7
</td>
<td class="c2" id="<ww:property value='serialNum'/>_3_8">
8
</td>
<td class="c2" id="<ww:property value='serialNum'/>_3_9">
9
</td>
<td class="c1" id="<ww:property value='serialNum'/>_4_0">
0
</td>
<td class="c1" id="<ww:property value='serialNum'/>_4_1">
1
</td>
<td class="c1" id="<ww:property value='serialNum'/>_4_2">
2
</td>
<td class="c1" id="<ww:property value='serialNum'/>_4_3">
3
</td>
<td class="c1" id="<ww:property value='serialNum'/>_4_4">
4
</td>
<td class="c1" id="<ww:property value='serialNum'/>_4_5">
5
</td>
<td class="c1" id="<ww:property value='serialNum'/>_4_6">
6
</td>
<td class="c1" id="<ww:property value='serialNum'/>_4_7">
7
</td>
<td class="c1" id="<ww:property value='serialNum'/>_4_8">
8
</td>
<td class="c1" id="<ww:property value='serialNum'/>_4_9">
9
</td>
</tr>
</TBODY>
</TABLE>
</td>
</tr>
</ww:iterator>
</TBODY>
</table>
</body>
</html>