JavaScript多浏览器兼容写法与DOM操作规范

示例代码展示如下HTML结构：

<body>

<table border="1" cellspacing="0" cellpadding="0" id="apple" >

<tbody>

<tr>

<td id="banana" style="color:red" >不吃苹果</td>

</tr>

</tbody>

</table>

</body>

W3C DOM标准访问与属性设置规范

在编写脚本时，应优先遵循W3C DOM标准规范。

早期的浏览器访问页面元素的方式较为随意，

例如通过 document.all.apple 或直接使用 apple 变量名即可访问元素。

现代开发中推荐的标准做法是：

使用 document.getElementById("apple") 通过ID获取元素，需确保页面中该ID唯一；

或通过 document.getElementsByTagName("div")[0] 通过标签名获取元素集合中的第一个元素。

对于元素属性的设置，旧式写法可能直接赋值，

如 document.all.apple.width=100 或 apple.width=100。

符合W3C标准的设置方式应为：

document.getElementById("apple").setAttribute("width","100")；

或 document.getElementsByTagName("div")[0].setAttribute("width","100")。

获取元素属性时，应采用以下标准方法：

document.getElementById("apple").getAttribute("width")；

或 document.getElementsByTagName("div")[0].getAttribute("width")。

IE浏览器下的DOM兼容限制与处理

尽管W3C标准通用，但在IE浏览器中存在一些限制。

由于早期IE占据浏览器市场95%以上的份额，缺乏竞争压力，导致其未完全遵循WEB标准。

在IE中，使用setAttribute无法正确设置对象的style、class以及事件响应属性。

因此，为了实现跨浏览器兼容，仍需使用点语法（直接属性访问）来访问和设置这些特定属性，例如：

document.getElementById("banana").class

document.getElementById("banana").style.color

document.getElementById("banana").onclick

document.getElementById("banana").class="fruit"

document.getElementById("banana").style.color="blue"

document.getElementById("banana").onclick= function (){alert("我是香蕉")}

Firefox onload事件兼容方案

此外，Firefox浏览器在onload事件处理上也有特殊之处。

function over(){

alert("页面加载完毕")

通常情况下，我们给body元素赋予onload响应函数的写法是：

document.body.onload= over

但在Firefox浏览器中，这种写法无法执行。

因此，通用的兼容写法应采用：

window.onload=over

IE中TABLE动态插入行的解决方案

关于IE浏览器中TABLE元素无法动态插入新行的问题。

在IE中，无论是使用innerHTML还是appendChild向TABLE直接插入<tr>均无效，而其他浏览器显示正常。解决方法是将<tr>添加到TABLE的<tbody>元素中，具体代码如所示：

var row = document.createElement("tr");

var cell = document.createElement("td");

var cell_text = createTextNode("香蕉不吃苹果");

cell.appendChild(cell_text);

row.appendChild(cell);

document.getElementsByTagName("tbody")[0].appendChild(row);