这两天来一直在写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 οnlοad="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>
