对于outerHTML这个DOM属性,在IE/Opera/google Chorme等浏览器中都是可以使用的,但唯独Firefox是不支持的,尽管这个属性平时用的并不多,但有些应用中我们还必须用到,因此很有必要去实现FF下的outerHTML功能。
在网上看了一些文章,最典型的方法应该就是通过defineSetter、defineGetter来为DOM属性扩展这个属性,具体实现即:遍历读取元素的属性及子节点,然后自己拼装html串,具体可以看这篇文章:《firefox没有outerHTML 解决办法》,该文实现了outerHTML的读写,比较完整。
对于获取outerHTML的值,使用拼装HTML串的办法,觉得有点麻烦了,在网上看到一个解决办法,感觉很妙代码也很简洁,而且在各种浏览器中都是可以使用的。其原理为:创建一个div元素,然后将要读取的元素的克隆对象放到这个div中,读取这个div的childNode即可,示例代码如下:
document.createElement("DIV").appendChild(htmlNode.cloneNode(true)).parentNode.innerHTML)document.createElement("DIV").appendChild(htmlNode.cloneNode(true)).parentNode.innerHTML)