瀏覽器相容性小記 DOM篇（一）

1、childnodes引入空白節點問題：使用childelementcount或children

2、innertext： ff中不支援該屬性，使用textcontent代替

3、變數名與某html物件id相同時，引用該變數只會取得id名與其相同的html物件（ie8-）；宣告變數時前面一律加上var，盡量避免id名與變數名相同

4、為ele.style.property賦值時一律帶上單位：e.style.height= 34 + 『px』

5、禁止選擇網頁內容：

//
iedocument.onselectstart = function
()//
ff-moz-user-select: none;
//chrome
-webkit-user-select: none;

view code

6、訪問form中的元素：ff只支援document.formname.elements['elementname']的方式，ie下可以使用document.formname.item('name')；統一使用elements的方式；凡是遇到集合類物件（nodecollection、nodelist）一律使用collection['name']的方式

7、自定義html元素特性問題：ie下可以使用e.selfattr = variable/e.selfattr方式來設值和取值，ff中只能使用e.setattribute(attr, value)/e.getattribute('attr')方式

8、input元素的type特性問題：ie下該屬性是唯讀的，ff中可以動態設定；一律不能修改，若需要修改則刪除原來元素，重新建立新元素

9、window.location.href問題：就瀏覽器可以通過這種方式來獲取當前頁面url；應當統一使用window.location來方位頁面url，如：location.hostname,location.port,location.pathname

10、在瀏覽器中開啟新視窗問題：

//
子視窗通過window.opener方式來訪問父視窗，父視窗通過parentwin來控制子視窗
parentwin = window.open(url, name, properties);

view code

11、body載入問題：ff中的body物件在body標籤為載入完全時即可訪問，ie下必須完全讀入後才執行

12、function、new function（）{}、new function('.....')三者的區別

13、ff中不支援e.parentelement方式方位父元素，只能使用e.parentnode方式

14、table操作問題，ie中無法使用innerhtml方式對table和tr進行操作；一般方法是借助js類庫，將innerhlml轉化為dom節點，並插入到tbody下

15、ie下不支援使用e.setattribute方式來整體設值style屬性問題：同時使用e.setattribute('style', '.......')和e.style.csstext = 『。。。。。。。』方式來設定

16、document.createelement('

')方式建立html元素在ff中不支援

//
iedocument.createelement("");
//ff
var ipt = document.createelement('input');
ipt.type = "radio";

view code

17、iframe問題：

ie 中可以通過window.top.frmaeid或window.top.framename方式來訪問farme;ff中只支援第二種方式；ie在iframe資源未載入完成時無法訪問iframe.contentwindow物件

18、url encoding 問題：encodeuricomponent適用於對url後的引數編碼、encodeuri：主要用於location物件跳轉時對整個url編碼

19、節點插入問題：ie：insertadjacentelement(position，src)；ff：insertbefore(src, ref)

20、ie9以下不能訪問html元素的構造器，如判斷元素是否為htmlelement方法只能使用：e.nodetype === 1不能使用 e instanceof htmlelement方式

瀏覽器相容性小記 DOM篇（一）

瀏覽器相容性小記 DOM篇（一）

瀏覽器相容性小記 DOM篇（一）

瀏覽器相容性

相關推薦