JavaScript_javascriptスキルでDOMを詳しく解説

スムーズなデグラデーション、下位互換性、マーク分離のアイデアを実現するには、JS コードを作成するたびに最初に行う必要があるのは、必要なテストと検査作業です。
まず、確認のために次のコードを js ファイルに追加します:

window.onload = function(){
if(!document.getElementsByTagName)  return false;
if(!document.getElementById) return false;
if(!document.getElementsByClassName)  return false;
if(!document.getElementById("selector"))  return false;
if(!document.getElementsByTagName("tag"))  return false;
if(!document.getElementsByClassName("selector"))  return false;
};

ユニバーサルラッパー関数:

var $ = function(id){
   return document.getElementBy Id (id);
}
var addEvent = function(obj,event,fn){  //obj：元素对象名字，event：绑定事件，fn：触发的回调函数
   if(obj.addEventListener){
obj.addEventListener(event,fn,false);
   }
   else if(obj.attachEvent){
obj.attachEvent("on"+event,fn);
   }
}

ページの読み込みと実行を必要とする多くの関数の場合、window.onload カプセル化メソッドは次のとおりです:

function addLoadEvent(func){
var oldonload = window.onload;
if(typeof window.onload != "function")
{
window.onload = func;
}
else
{
window.onload = function()
{
oldonload();
func();
}
}
}
addLoadEvent(firstFunction);
addLoadEvent(secondFunction);

Firefox と IE の JavaScript の違い:

1. ほとんどの場合、イベント ハンドラー関数に対して false を返すと、デフォルトのイベント動作を防ぐことができます。たとえば、デフォルトでは、a 要素をクリックすると、その要素の href 属性で指定されたページにジャンプします。
return false はターミネータに相当し、return true はエグゼキュータに相当します。
js での戻り使用の 3 つのシナリオの概要は次のとおりです。
return true; 正しい処理結果を返します。
false を返す; 間違った処理結果を返す; フォームが送信されないようにする; デフォルトのアクションを実行しないようにする。
return; コントロールをページに戻します。

2. ほとんどの場合、関数呼び出しを変数に代入するのが良いでしょう。

3. noscript タグは、script タグを認識できるが、その中のスクリプトをサポートできないブラウザで使用できます。ブラウザがスクリプトをサポートしている場合、noscript タグ内のテキストは表示されません。

4. スタイルを動的に設定する場合は、可能な限り CSS を使用するのが最善です。最も簡単な方法は、実装が簡単な方法を選択することです。

5. 関数では、グローバル オブジェクトはグローバル検索を減らすためにローカル変数として保存されます。これは、ローカル変数へのアクセスの方がグローバル変数へのアクセスよりも高速であるためです。

6. 継続的に実行されるコードを対象とする場合は、setTimeout ではなく setInterval を使用する必要があります。これは、setTimeout は毎回タイマーを初期化し、setInterval は最初にのみタイマーを初期化するためです。

7. 複数の文字列を接続する場合は、=less を使用し、条件分岐を作成するときに条件分岐の代わりに三項演算子を使用するようにしてください。

8. 多くの人は parseInt() を使用することを好みます。実際、parseInt() は浮動小数点数と整数の間ではなく、Math.floor() を使用する必要があります。 。

9. JavaScript では、スクリプト全体の実行時間を短縮するためのステートメントのグループである 1 つの var ステートメントを使用してすべての変数を宣言できます。

10. 大規模な DOM 変更の場合は、標準の DOM メソッドを使用して同じ DOM 構造を作成するよりも innerHTML を使用する方がはるかに高速です。

11. 同じオブジェクトが .onclick 書き込みメソッドを使用して複数のメソッドをトリガーする場合、後者のメソッドは前のメソッドを上書きします。つまり、オブジェクトの onclick イベントが発生すると、最後のバインディングのみが実行されます。 。 方法。イベント リスニングでは上書きは行われず、バインドされた各イベントが実行されます。

12. toString() メソッドが型変換用に定義されている場合は、toString() メソッドを明示的に呼び出すことをお勧めします。これは、内部操作ですべての可能性を試した後、オブジェクトの toString() メソッドが試行されるためです。 String に変換されるため、このメソッドを直接呼び出す方が効率的です。

13. elemet.style はインラインスタイルしか取得できないため、element.currentStyle.width は IE ブラウザー専用のプロパティ、getComputedStyle(element, null).width は Firefox および Chrome ブラウザー専用のプロパティです。互換性があり、内部スタイルと外部スタイルを取得する方法は次のとおりです (background、border などの複合スタイルは推奨されませんが、backgroundColor、borderWidth として記述する必要があります):

function getStyle(obj,name) {
   if(obj.currentStyle) {
     return obj.currentStyle[name];
   }
   else
   {
     return getComputedStyle(obj,null)[name];
   }
}

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。