对于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)
对于setter的实现,暂时还没有考虑到更好的办法,不过对于outerHTML,更多的时候我们还是获取,而很少写入,而且W3C也是不赞同这种做法的。
网名:网者归来、yemoo,长期并将继续投身于WEB前端相关技术的学习和推广的大军中,目前就职于杭州