瀏覽器相容性小記 DOM篇(一)

2021-09-06 15:33:37 字數 2189 閱讀 4637

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篇(一)

1 childnodes引入空白節點問題 使用childelementcount或children 2 innertext ff中不支援該屬性,使用textcontent代替 3 變數名與某html物件id相同時,引用該變數只會取得id名與其相同的html物件 ie8 宣告變數時前面一律加上var,...

瀏覽器相容性小記 DOM篇(一)

1 childnodes引入空白節點問題 使用childelementcount或children 2 innertext ff中不支援該屬性,使用textcontent代替 3 變數名與某html物件id相同時,引用該變數只會取得id名與其相同的html物件 ie8 宣告變數時前面一律加上var,...

瀏覽器相容性

瀏覽器相容性是乙個很長久的話題,之所以前端需要面對瀏覽器相容性,是因為使用者的環境有不同的平台,不同的瀏覽器。不同的廠商之間為了相互競爭,對標準的實現不一樣。不同的瀏覽器有不同的核心。即使同乙個瀏覽器也有不同的版本,不同的版本對同一特性的支援情況也不盡相同。也可能某個瀏覽器的某個版本針對某個特性存在...