本文针对IE6、Firefox和Opera等浏览器在操作HTML表格时的差异进行解析。重点对比了insertRow和appendChild方法在不同内核中的表现，并提供了一段兼容三者的代码示例。此外，还介绍了通过childNodes遍历节点时，利用nodeName、id和className属性获取特定子元素的实用函数实现。
（一）
跨浏览器表格操作差异对比
IE、Firefox以及其他浏览器在处理table标签时存在显著差异。在IE浏览器中，直接对table和tr元素的innerHTML赋值是被禁止的；同时，在使用JavaScript动态添加tr元素时，单纯调用appendChild方法往往无法达到预期效果。以下是针对三种主流浏览器的测试结果：
insertRow
IE6：完全支持该方法，且默认参数为-1，表示将新行追加到表格末尾。
Firefox：支持该方法，但不支持省略默认参数，必须显式指定索引。
Opera：支持该方法及默认参数，但默认行为是将新行插入到表格最前面。
AppendChild
IE6：不支持通过此方法直接操作表格行的预期效果。
Firefox：支持该方法，但在增加TR后，表格的ROWS集合不会立即反映变化。
Opera：支持该方法，其行为与调用insertRow(-1)类似，且会正确影响ROWS集合。
为了编写安全且具有高适用性的代码，应尽可能遵循Web标准规范。
兼容多浏览器的表格行添加示例
// 向table追加一个空行的兼容写法：
var otr = otable.insertRow(-1);
var otd = document.createElement("td");
otd.innerHTML = " ";
otd.className = "XXXX";
otr.appendChild(otd);
采用上述方式编写的代码可以在IE、Firefox和Opera这三种浏览器中正常运行。
利用childNodes遍历节点的技巧
（三）childNodes的操作
（1）属性nodeName
Utils.getChildrenByTagName = function (node, tagName) {
var ln = node.childNodes.length;
var arr = [];
for (var z = 0; z < ln; z++) {
if (node.childNodes[z].nodeName == tagName) {
arr.push(node.childNodes[z]);
}
}
return arr;
};
（2）属性id
function getNodeID(parent, id) {
var ln = parent.childNodes.length;
for (var z = 0; z < ln; z++) {
if (parent.childNodes[z].id == id) {
return parent.childNodes[z];
}
}
return null;
}
（3）属性className
对应class,如 <tr class="class1">
function getElementsByClassName(node, className) {
var children = node.getElementsByTagName("*");
var elements = new Array();
for (var i = 0; i < children.length; i++) {
var child = children[i];
var classNames = child.className.split(" ");
for (var j = 0; j < classNames.length; j++) {
if (classNames[j] == className) {
elements.push(child);
break;
}
}
}
return elements;
}