JavaScriptのよくある互換性問題と関連する解決方法(chrome/IE/firefox)

まずここで声明します.私のテストブラウザのバージョンはchrome 15.0.874.121 Firefox 8.01 IE 9 Testerです.
以下のコードは声明についてです.
1:スクロールバーを取得した場合

 
  
function getScroll(){ 
  
        var t, l, w, h; 
  
 
  
        if (document.documentElement && document.documentElement.scrollTop) { 
  
            t = document.documentElement.scrollTop;//       
  
            l = document.documentElement.scrollLeft;//       
  
            w = document.documentElement.scrollWidth;//      ，         
  
            h = document.documentElement.scrollHeight;//       
  
        } 
  
        else 
  
            if (document.body) { 
  
                t = document.body.scrollTop; 
  
                l = document.body.scrollLeft; 
  
                w = document.body.scrollWidth; 
  
                h = document.body.scrollHeight; 
  
            } 
  
        return { 
  
            t: t, 
  
            l: l, 
  
            w: w, 
  
            h: h 
  
        }; 
  
    } 
  
 
 

2:ビューブラウザの幅の高さを取得します.

 
  
  function getPageWidth(){ 
  
        var pageWidth = window.innerWidth; 
  
        if (typeof pageWindth != "number") { 
  
            if (document.compatMode == "CSS1Compat") { 
  
                pageWidth = document.documentElement.clientWidth; 
  
            } 
  
            else { 
  
                pageWidth = document.body.clientWidth; 
  
            } 
  
        } 
  
        return pageWidth; 
  
    } 
  
 
  
    function getPageHeight(){ 
  
        var pageHeight = window.innerHeight; 
  
        if (typeof pageWindth != "number") { 
  
            if (document.compatMode == "CSS1Compat") { 
  
                pageHeight = document.documentElement.clientHeight; 
  
            } 
  
            else { 
  
                pageHeight = document.body.clientHeight; 
  
            } 
  
        } 
  
        return pageHeight; 
  
    } 
  
 
 

3:現在のブラウザのモデル名を取得する

 
  
function(){ 
  
        var Sys = {}; 
  
        var ua = navigator.userAgent.toLowerCase(); 
  
        var s; 
  
        (s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] : (s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] : (s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] : (s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] : (s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0; 
  
 
  
        if (Sys.ie != null) { 
  
            return ("IE:" + Sys.ie);//  IE        
  
        } 
  
        if (Sys.firefox != null) { 
  
            return ("firefox:" + Sys.firefox);//  firefox        
  
        } 
  
        if (Sys.chrome != null) { 
  
            return ("chrome:" + Sys.chrome);//  chrome        
  
        } 
  
        if (Sys.opera != null) { 
  
            return ("opera:" + Sys.opera);//  opera        
  
        } 
  
        if (Sys.safari != null) { 
  
            return ("safari:" + Sys.safari);//  safari        
  
        } 
  
    } 
  
 
 

4:イベント傍受

 
  
function(element, type, handler){ 
  
        if (element.addEventListener) { 
  
            element.addEventListener(type, handler, false); 
  
        } 
  
        else 
  
            if (element.attachEvent) { 
  
                element.attachEvent("on" + type, handler); 
  
            } 
  
            else { 
  
                element["on" + type] = handler; 
  
            } 
  
    } 
  
 
 

5:イベントの削除

 
  
function(element, type, handler){ 
  
        if (element.removeEventListener) { 
  
            element.removeEventListener(type, handler, false); 
  
        } 
  
        else 
  
            if (element.detachEvent) { 
  
                element.detachEvent("on" + type, handler); 
  
            } 
  
            else { 
  
                element["on" + type] = null; 
  
            } 
  
    } 
  
 
 

6:イベントを獲得し、Firefoxイベントが次々と配布された時、初めてのイベントに問題が発生します.

 
  
function(event){ 
  
 
  
        event = (event ? event : window.event); 
  
        if (event == null) { 
  
            var $E = function(){ 
  
                var c = $E.caller; 
  
                while (c.caller) 
  
                    c = c.caller; 
  
                return c.arguments[0] 
  
            }; 
  
            __defineGetter__("event", $E); 
  
        } 
  
        return event; 
  
    } 
  
 
 

7:デフォルトイベントを阻止する

 
  
function(event){ 
  
        if (event.preventDefault) { 
  
            event.preventDefault(); 
  
        } 
  
        else { 
  
            event.returnValue = false; 
  
        } 
  
    } 
  
 
 

8:イベントを継続しない

 
  
function(event){ 
  
        if (event.stopPropagation) { 
  
            event.stopPropagation(); 
  
        } 
  
        else { 
  
            event.cancelBubble = true; 
  
        } 
  
    } 
  
 
 

9:イベントを獲得したターゲット

 
  
function(event){ 
  
        return event.target || event.srcElement; 
  
    } 
  
 
 

10:documen.doctypeサポートが不一致です.
E:文書タイプの説明があると、そのエラーをコメントとして解釈し、Commentノードとして扱います.Dcument.doctypeの値は常にnullです.
Firefox:文書タイプの説明があれば、ドキュメントの第一のサブノードとして、Dcument.doctypeはDcumentTypeノードであり、firstChildまたはchildNodes[0]を介して同じノードにアクセスすることもできる.
Safari、Chrome、Opera:文書タイプの説明があれば、それを解釈としているが、文書のサブノードとしてではなく、childNodesには現れない.
11:元素を探す時、私は本当に分かりません.IEはいつも何をしていますか?システムがブラウザを持参させないなら、IEのシェアはもっと少ないと言える.
IDとnameが同じだったら彼も帰ってきます.

 
  
 
  
     
  
      
  <br>      var item=document.getElementById("my"); 
  <br>   item.value="SECOND"; 
  <br> 
  <br>      
  
     
  
     
  
      
  
     
  
 
  
 
 

IEでは結果が変化した.
同じIEでも、Idの大文字と小文字は区別しません.

 
  
 
  
     
  
      
  <br>      var item=document.getElementById("MY"); 
  <br>   item.value="SECOND"; 
  <br> 
  <br>      
  
     
  
     
  
      
  
     
  
 
  
 
 

すみません、彼の結果はまた変わりました.
12:カスタム属性であれば、item.mystributsは、IEブラウザ以外の場合、正しい結果が得られない.

 
  
function(item,myatt){ 
  
  return item.attributes[myatt].value; 
  
 } 
  
 
 

同じなら、属性を設定するなら、どうすればいいか分かりますよね.

 
  
function(item,myatt,value){ 
  
  item.attributes[myatt].value=value; 
  
 } 
  
 
 

13:要素のサブノードの個数

 
  
 
 
  
   
first
 
  
   
second
 
  
   
third
 
  
  
 
  
 
 

IEの結果は3で、他のブラウザは7です.
Node間の空白文字は、他のブラウザでテキストノードとなり、結果は7となります.こうなったら、

 
  
first
second
third
 
  
 
 

これでみんなの結果は3です.
14:セットアップノード問題

 
  
//    Element，            
  
var newnode=document.createElement("input"); 
  
newnode.type="button"; 
  
newnode.value="sixth"; 
  
// IE         
  
var newnode= document.createElement(""); 
  
 
 

15:右ボタンを遮断する時、firefoxは他のものと違って、oncontextmenuイベント中です.
16:また、動的にstyleとscriptを追加する場合、IEは他のブラウザとは違っています.具体的に調べる
17:DOM 2とDOM 3については、状況がより複雑になりました.