跨浏览器的 web 开发技巧（1）

look_w

W3C 制定了 DOM Core，DOM HTML 和 DOM Events 等标准，IE(Internet Explorer) 和 Firefox 对标准的支持程度不同。对某些标准定义，即使同样支持，行为也有差异，下面我们将分类介绍一些针对浏览器差异的处理方法。
DOM CoreDOM core 定义了对 DOM 对象的操作。
创建 DOM 对象创建 DOM 对象，然后把这个对象插入文档是动态 HTML 最为普遍的操作。
清单 1.添加 DOM 对象

1 2	var newNode = ownerDocument.createElement("p"); parentNode.appendChild(newNode);

需要注意的是，在 IE6/IE7 上，创建 DOM 对象的 ownerDocument 一定是 DOM 对象要插入的目标 document，也就是 parentNode 所在的 document，否则插入操作会失败，抛出"Invalid Argument"错误。这点在 document 中含有 iframe 时尤其重要，因为此时会有多个 document。Firefox，IE8 没有此限制。
关于 IE6/IE7 抛出的"Invalid Argument"错误，除了插入节点，还有其它几种情况，详情参看本文参考资料。
DOM HTMLW3C 为 DOM 对象定义了一些操作 HTML 的属性，IE 和 Firefox 并不全部支持这些属性，下表所示为 IE 和 Firefox 对几个常用 HTML 属性的支持结果 :
表 1.常用 HTML 属性HTML 属性IEFirefox InnerHTML  Yes  Yes  OuterHTML  Yes  No  InnerText  Yes  No  OuterText  Yes  No  TextContent  No  Yes
InnerHTMLInnerHTML 是一个效率很高的批量改变文档内容的方法。需要注意的是，虽然 IE 和 Firefox 都支持这一属性，使用 InnerHTML 得到的字符串却是不同的。在 IE，innerHTML 得到的字符串，标签名大写，如果属性中没有空格，属性没有双引号，如果属性有多个值，最后一个值不加分号。
清单 2.innerHTML 值– IE

1	<DIV id=div2 style="display: none; margin-bottom: 0in"></DIV>

清单 3.innerHTML 值– Firefox

1	<div id="div2" style="display: none; margin-bottom: 0in;"></div>

在 IE 浏览器下，关于 innerHTML 赋值要注意的一个问题是，HEAD 元素不支持 innerHTML 赋值，只能通过操作 HEAD 对象改变其内容。另一个问题是，某些情况下 innerHTML 赋值可能会无效，比如将 META 元素的 HTML 片断赋值给 DIV，是无法生成 META 子节点的。
在当前光标处插入一段 HTML 文本这是动态 HTML 经常用到的一种方法。
清单 4.插入 HTML 文本– IE

1	document.selection.createRange().pasteHTML(html);

清单 5.插入 HTML 文本– Firefox

1	document.execCommand('InsertHtml','',html);

改变 DOM 对象 class/style 属性在 IE 下，DOM 对象的 class 和 style 属性都不能作为普通属性处理，因此我们无法使用 setAttribute()/getAttribute() 对这两个属性进行操作。
清单 6.class 和 style 属性的读写 -IE

1 2 3 4 5

var class = domObj.className; var style = domObj.style.cssText; domObj.className = 'my_new_class'; domObj.style.cssText = 'display:none;'

清单 7.class 和 style 属性的读写– Firefox

1 2 3 4

var class = domObj.getAttribute('class'); var style = domObj.getAttribute('style'); domObj.setAttribute('class', 'my_new_class'); domObj.setAttribute('style', 'display:none;');