オリジナルJavaScriptでのDOM操作

オリジナルJavaScriptでのDOM操作
2011-05-29
JQueryは確かに使いやすいライブラリで、細かいことを考えなくてもいいです.しかし、Webフロントエンドとして、ブラウザの違いを処理し、理解する上で重要な問題です.jsライブラリを使用していない場合について説明します.
1.setAttributeメソッド要素クラス名の設定
jQueryではattr()メソッドをそのまま使えばよいが,原生のJSでは,1 // W3C ， W3C ， ，IE 2 element.setAttribute( 'class' , 'newClassName' ) 3 // IE 4 element.setAttribute( 'className' , 'newClassName' ) 5 // ( javascript) 6 element.className = 'newClassName'
さて、冒頭で終わりましたが、この文章の目的はブラウザの違いを紹介しながら、フロントエンドの友达に最も効果的な方法で問題を解決すれば、次のように理解させることです.
2.FireFoxはwindowがありません.イベントオブジェクト
FireFoxにはwindowがありません.eventオブジェクト、eventオブジェクトのみ、IEではwindowのみサポートされています.eventは、他の主流ブラウザでは両方がサポートされているので、一般的には次のように書かれています.1 function handle(e) 2 { 3 e = e || event; 4 ... 5 }
3.DOMContentLoadedイベントの
そうだonloadイベントは、ページ /DOMツリーの が し、ピクチャ、スクリプト、スタイルシートなどのすべてのリソースのダウンロードが した にトリガーされます.これは くの のアプリケーションにとって「 すぎる」ため、ユーザー に を えます.この を するために、FFには、onloadよりも く、ページのDOMコンテンツのロードが すると、 のリソースのロードを つことなくトリガされるDOMContentLoadedメソッドが された(これはjquery.ready() の である).01 // jQuery 1.4.2 02 bindReady: function () { 03 　　 if ( readyBound ) { 04 　　　　 return ; 05 　　} 06 　　readyBound = true ; 07 　　 // Catch cases where $(document).ready() is called after the 08 　　 // browser event has already occurred. 09 　　 if ( document.readyState === "complete" ) { 10 　　　　 return jQuery.ready(); 11 　　} 12 　　 // Mozilla, Opera and webkit nightlies currently support this event 13 　　 if ( document.addEventListener ) { 14 　　 // Use the handy event callback 15 　　　　document.addEventListener( "DOMContentLoaded" , DOMContentLoaded, false ); 16 　　　　 // A fallback to window.onload, that will always work 17 　　　　window.addEventListener( "load" , jQuery.ready, false ); 18 　　　　 // If IE event model is used 19 　　} else if ( document.attachEvent ) { 20 　　　　 // ensure firing before onload, 21 　　　　 // maybe late but safe also for iframes 22 　　　　document.attachEvent( "onreadystatechange" , DOMContentLoaded); 23 　　　　 // A fallback to window.onload, that will always work 24 　　　　window.attachEvent( "onload" , jQuery.ready ); 25 　　　　 // If IE and not a frame 26 　　　　 // continually check to see if the document is ready 27 　　　　 var toplevel = false ; 28 　　　　 try { 29 　　　　　　toplevel = window.frameElement == null ; 30 　　　　} catch (e) {} 31 　　　　 if ( document.documentElement.doScroll && toplevel ) { 32 　　　　　　doScrollCheck(); 33 　　　　} 34 　　} 35 }
-WebkitをFirefoxと に い、DOMContentLoadedイベントを しているが、Webkitは525 のバージョンで されたため、 の がある.IEについては、まずdocumentのonreadystatechangeイベントを し、windowとテストした.onloadはかなり、すべてのリソースのダウンロードが するまでトリガーされます.その 、IEであり、ページがiframeにない 、documentElementのdoScrollメソッドをsettiemoutにより び し け、 び しが するまでDOMContentLoadedをトリガすると する.1 jQueryのIEに する の は、IEの で、DOMのいくつかの はDOMの が した にしか び すことができなくて、doScrollはこのような で、 にdoScrollを び すことができる つまりDOMの が する 、prototypeの のdocumentと.writeに べて,このスキームはページにiframeがある に する を できる.また,jQueryはページがiframeにある にはこの が になることを しているようで, コードではiframeであればdocumentのonreadystatechangeで し,そうでなければdoScrollで すると している.しかし、iframeでもdoScrollは であることが された.
4.IE の を する
くのフロントエンドはいつも のIEに を っています. かに、 の を するのはますます ち いですが、 がありません. えられない 、 しんでください.01 <!--[if IE]> 02 <h1> IE </h1> 03 <![endif]--> 04 <!--[if IE 5]> 05 <h1> 5</h1> 06 <![endif]--> 07 <!--[if IE 5.0]> 08 <h1> 5.0</h1> 09 <![endif]--> 10 <!--[if IE 5.5]> 11 <h1> 5.5</h1> 12 <![endif]--> 13 <!--[if IE 6]> 14 <h1> 6</h1> 15 <![endif]--> 16 <!--[if IE 7]> 17 <h1> 7</h1> 18 <![endif]-->
ここまでまとめておきましょう. や な に に つことを っています.
:http://www.nowamagic.net/javascript/js_DomInJavascript.php