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

一、childNodes引入空白節點問題：使用childElementCount或children

二、innerText： FF中不支持該屬性，使用textContent代替

三、變量名與某HTML對象id相同時，引用該變量只會取得id名與其相同的html對象（ie8-）；聲明變量時前面一概加上var，儘可能避免id名與變量名相同

四、爲ele.style.property賦值時一概帶上單位：e.style.height= 34 + ‘px’

五、禁止選擇網頁內容：

//IE
document.onSelectStart = function(){
  return false;
}
//FF
-moz-user-select: none;
//Chrome
-webkit-user-select: none;

View Code

六、訪問form中的元素：ff只支持document.formName.elements['elementName']的方式，ie下可使用document.formName.item('name')；統一使用elements的方式；凡是遇到集合類對象（NodeCollection、NodeList）一概使用collection['name']的方式

七、自定義html元素特性問題：IE下可使用e.selfAttr = variable/e.selfAttr方式來設值和取值，FF中只能使用e.setAttribute(attr, value)/e.getAttribute('attr')方式

八、input元素的type特性問題：IE下該屬性是隻讀的，FF中能夠動態設置；一概不能修改，若須要修改則刪除原來元素，從新建立新元素

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

十、在瀏覽器中打開新窗口問題：

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

View Code

十一、body載入問題：FF中的body對象在body標籤爲載入徹底時便可訪問，IE下必須徹底讀入後才執行

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

1三、FF中不支持e.parentElement方式方位父元素，只能使用e.parentNode方式

1四、Table操做問題，IE中沒法使用innerHTML方式對table和tr進行操做；通常方法是藉助js類庫，將innerHLML轉化爲dom節點，並插入到tbody下

1五、IE下不支持使用e.setAttribute方式來總體設值style屬性問題：同時使用e.setAttribute('style', '.......')和e.style.cssText = ‘。。。。。。。’方式來設置

1六、document.createElement('<div class="name"></div>')方式建立html元素在FF中不支持

//IE
document.createElement("<input type='radio'>");
//FF
var ipt = document.createElement('input');
ipt.type = "radio";

View Code

1七、iframe問題：

<iframe src="xxx.html" id="frameId" name="frameName" />

IE 中能夠經過window.top.frmaeId或window.top.frameName方式來訪問farme;FF中只支持第二種方式；IE在iframe資源未加載完成時沒法訪問iframe.contentWindow對象

1八、url encoding 問題：encodeURIComponent適用於對url後的參數編碼、encodeURI：主要用於location對象跳轉時對整個url編碼

1九、節點插入問題：IE：insertAdjacentElement(position，src)；FF：insertBefore(src, ref)

20、IE9如下不能訪問html元素的構造器，如判斷元素是否爲HTMLElement方法只能使用：e.nodeType === 1不能使用 e instanceof HTMLElement方式