var myObject = document.getElementById("header");
myObject.setAttribute("class","classValue");
myObject.setAttribute("className","classValue");
//设置header的class为classValue
方法二，IE和FF都支持object.className，所以可以这样写：
复制代码 代码如下:
var myObject = document.getElementById("header");
myObject.className="classValue";//设置header的class为classValue
方法三，先判断浏览器类型，再根据浏览器类型采用对应的写法。
4. 对象宽高赋值问题
【分析说明】FireFox中类似 obj.style.height = imgObj.height 的语句无效。
【兼容处理】统一使用 obj.style.height = imgObj.height + ‘px';
5.添加样式
【分析说明】IE中使用addRules()方法添加样式，如：styleSheet.addRule("p","color:#ccc",styleSheet.length).而该方法不兼容FF，在FF使用insetRule()方法替换。如styleSheet.insertRule("p{color:#ccc}",styleSheet.length).
【兼容处理】
复制代码 代码如下:
if(styleSheet.insertRule){
//insertRule()方法
}else{
//addRule()方法
}
6.最终样式
【分析说明】有时候我们自定义的样式会失效，是因为发生了样式的重叠，如一个类选择符定义的样式和一个标签选择符定义的样式，此时后者失效。则此时需要用到最终样式了。IE中最终样式的写法是ele.currentStyle.属性名。DOM中标准写法是利用document.defaultView对象，如document.defaultView.getComputedStyle(elel,null),该方法兼容FF.
【兼容处理】先判断浏览器(document.all)，再执行上面的方法.
三、DOM方法及对象引用
1. getElementById
【分析说明】先来看一组代码：
<!-- input对象访问1 -->
复制代码 代码如下:
<input type="button"
value="click me" ōnclick="alert(id.value)"/>
在Firefox中，按钮没反应，在IE中，就可以，因为对于IE来说，一个HTML 元素的 ID 可以直接在脚本中当作变量名来使用，而Firefox中不可以。
【兼容处理】尽量采用W3C DOM 的写法，访问对象的时候，用document.getElementById("id") 以ID来访问对象，且一个ID在页面中必须是唯一的，同样在以标签名来访问对象的时候，用document.getElementsByTagName("div")[0] 。该方式得到较多浏览器的支持。
<!-- input对象访问2 -->
复制代码 代码如下:
<input type="button" value="click me"
/>
2. 集合类对象访问
【分析说明】IE下，可以使用()或[]获取集合类对象；Firefox下，只能使用[]获取集合类对象。如：
document.write(document.forms("formName").src);
//该写法在IE下能访问到Form对象的scrc属性
【兼容处理】将document.forms("formName")改为 document.forms["formName"]。统一使用[]获取集合类对象。
3. frame的引用
【分析说明】IE可以通过id或者name访问这个frame对应的window对象，而Firefox只可以通过name来访问这个frame对应的window对象。
例如如果上述frame标签写在最上层的window里面的htm里面，那么可以这样访问：
IE： window.top.frameId或者window.top.frameName来访问这个window对象；
Firefox：只能这样window.top.frameName来访问这个window对象。
【兼容处理】使用frame的name来访问frame对象，另外，在IE和Firefox中都可以使
window.document.getElementById(”frameId”)来访问这个frame对象。
4. parentElement
【分析说明】IE中支持使用parentElement和parentNode获取父节点。而Firefox只可以使用parentNode。
【兼容处理】因为firefox与IE都支持DOM，因此统一使用parentNode来访问父节点。
5. table操作
【分析说明】IE下table中无论是用innerHTML还是appendChild插入<tr>都没有效果，而其他浏览器却显示正常。
【兼容处理】解决的方法是，将<tr>加到table的<tbody>元素中，如下面所示：
复制代码 代码如下:
var row = document.createElement("tr");
var cell = document.createElement("td");
var cell_text = document.createTextNode("插入的内容");
cell.appendChild(cell_text);
row.appendChild(cell);
document.getElementsByTagName("tbody")[0].appendChild(row);
6. 移除节点removeNode()和removeChild()
【分析说明】appendNode在IE和Firefox下都能正常使用，但是removeNode只能在IE下用。
removeNode方法的功能是删除一个节点，语法为node.removeNode（false）或者node.removeNode（true），返回值是被删除的节点。
removeNode（false）表示仅仅删除指定节点，然后这个节点的原孩子节点提升为原双亲节点的孩子节点。
removeNode（true）表示删除指定节点及其所有下属节点。被删除的节点成为了孤立节点，不再具有有孩子节点和双亲节点。
【兼容处理】Firefox中节点没有removeNode方法，只能用removeChild方法代替，先回到父节点，在从父节点上移除要移除的节点。
node.parentNode.removeChild(node);
// 为了在ie和firefox下都能正常使用，取上一层的父结点，然后remove。
7. childNodes获取的节点
【分析说明】childNodes的下标的含义在IE和Firefox中不同，看一下下面的代码：
复制代码 代码如下: