理解JavaScript裏的DOM兼容及解決方案

理解JavaScript裏的DOM兼容及解決方案

DOM節點的訪問

1. 以前對DOM節點訪問一般用“document.All.元素ID屬性值”或者“document.元素ID屬性值”這種簡化的方法，在FireFox中有時不支持此方法。

解決方案：標準的方法爲“document.getElementById(‘元素ID屬性值’)”或者“document.getElementByName(‘元素Name屬性值’)[0]”或者“document.getElementByTagName(‘元素標籤名’)[0]”；

2. 集合類對象的()與[]的問題：以前的代碼中很多集合類對象的訪問使用()，IE可以正常解析，FireFox不支持。

   
   解決辦法：改用[]作爲下標符號。如：document.Forms(‘FormName’)改爲document.Forms[‘FormName’]；又如：document.getElementsByName(‘元素Name屬性值’)(1)改爲document.getElementsByName(‘元素Name屬性值’)[1]；

3. document.Form.Item的問題：FireFox不能正常解析形如：document.FormName.Item("ItemName")這樣的語句,但IE與FireFox都支持document.FormName.Elements["ElementName"]。

   
   解決辦法：改用如下語句形式：document.FormName.Elements["ElementName"]；

4. 在IE中，可以利用eval(‘元素ID屬性值’)的方法取得改HTML對象，FireFox不支持此種對象訪問方法。

   
   解決辦法：用“document.getElementById(‘元素ID屬性值’)”的方法取得對象；

5. 在IE中可以通過ID屬性值或者Name屬性訪問這個Frame對象,而FireFox只可以通過Name屬性來訪問這個Frame對象;

   
   解決方案：IE和FireFox均可通過window.document. getElementById(‘FrameId屬性值’)來訪問這個Frame對象

6. IE,FireFox以及其它瀏覽器對於Table標籤的操作都各不相同，在IE中不允許對Table和TR的innerHTML賦值，使用JS增加一個TR時，使用appendChild方法也不管用

   解決辦法：
   ​
   //向Table追加一個空行：
   var row = otable.insertRow(-1); 
   var cell = document.createElement("td"); 
   cell.innerHTML = " "; 
   cell.className = "XXXX"; 
   row.appendChild(cell);

7. FireFox不支持元素的innerText屬性，需用textContent

   
   解決辦法：
   ​
   if(navigator.appName.indexOf("Explorer") > -1){
   ​
       document.getElementById('element').innerText = "my text";
   ​
   } else{
   ​
       document.getElementById('element').textContent = "my text";
   ​
   }

8. FireFox不支持元素的HtmlText屬性

   
   解決辦法：
   ​
   rng = document.createRange();
   ​
   el = document.getElementById(ElementId);
   ​
   rng.setStartBefore(el);
   ​
   htmlFrag = rng.createContextualFragment(content);
   ​
   while (el.hasChildNodes()){     //清除原有內容，加入新內容
   ​
   el.RemoveChild(el.LastChild);
   ​
                 }
   ​
   el.AppendChild(htmlFrag);

   ---

   ​