JavaScript における DOM_javascript テクニックの簡単な分析

ドムとは何ですか?

1. はじめに

ドキュメント オブジェクト モデル (DOM) は、W3C 組織が推奨する拡張可能なマークアップ言語を処理するための標準プログラミング インターフェイスです。ドキュメント オブジェクト モデルの歴史は、1990 年代後半の Microsoft と Netscape の間の「ブラウザ戦争」に遡ります。JavaScript と JScript で生死をかけて競争するために、両当事者はブラウザに強力な機能を大規模に提供しました。 Microsoft は、VBScript、ActiveX、Microsoft 独自の DHTML 形式など、多くの独自機能を Web テクノロジに追加しているため、多くの Web ページが Microsoft 以外のプラットフォームやブラウザを使用して適切に表示できなくなります。 DOMはその時に醸造された最高傑作です。

DOM (Document Object Model) は、HTML と XML のアプリケーション プログラミング インターフェイス (API) です。 DOM は、ページ全体をノード レベルで構成されるドキュメントに計画します。

いわゆるドキュメント オブジェクト モデルは、実際には、Web ページの HTML 内のヘッダー、段落、リスト、スタイル、ID などのさまざまな要素の内部表現です。すべての要素には、HTML を通じてアクセスできます。ドム。

JavaScript は最終的に HTML ページを操作する必要があり、HTML を DHtml に変換します。また、HTML ページを操作するには DOM を使用する必要があります。 DOM は HTML ページをオブジェクトにシミュレートします。JavaScript が一部の計算、ループなどの操作を実行するだけで、HTML を操作できない場合、その存在の意味が失われます。

DOM は HTML ページのモデルであり、JavaScript は DOM 内のプロパティとメソッドを呼び出すことで、Web ページ内のテキスト ボックス、レイヤー、その他の要素をプログラムで制御できます。たとえば、テキスト ボックスの DOM オブジェクトを操作することで、テキスト ボックスの値を読み取って設定できます。

2. イラスト

ウィンドウについて、ページまたはウィンドウ全体がウィンドウ オブジェクトです-----ウィンドウはトップレベル オブジェクトです

ページ内で定義されている変数とメソッドはすべてウィンドウです

window.id

document.getElementById()

Window オブジェクトのプロパティとメソッドを使用する場合は、Window を省略できます。

例:

window.alert(‘hello’);

はalert(‘hello’);

として省略できます

window.document はドキュメントを直接書き込むことができます

できる限り window を書かないでください。これにより、js ファイルのバイト数が削減される可能性があります。

コードをコピーします コードは次のとおりです:

window.alert('こんにちは!');//警告ダイアログ ボックスをポップアップ表示します
window.confirm('本当に削除しますか?');//ダイアログボックスを確認してキャンセルし、true または false を返します;
window.navigate(url);//Web ページを URL に再度移動します。IE と Opera11.6 をサポートします。推奨されません。一部のブラウザは動作しません。

window.location.href=‘url’ を使用することをお勧めします。//ほとんどのブラウザをサポートします

DOM 要素の動的操作

1. DOM を取得します

getElementById() (非常に一般的に使用されます) は、要素の ID に基づいてオブジェクトを取得します。Web ページ内で ID を繰り返すことはできません。 ID で要素を直接参照することもできますが、有効な範囲

があります。

getElementsByName() は、要素の名前に基づいてオブジェクトを取得します。同じ名前の複数の RadioButton など、ページ内の要素の名前は繰り返される可能性があるため、getElementsByName の戻り値はオブジェクト配列です。

getElementsByTagName() は、指定されたタグ名の要素配列を取得します。たとえば、getElementsByTagName("input") は、すべての <input> タグを取得できます。 * はすべてのタグ

を意味します

2. 追加、削除、置換

document.write は、ページの読み込み中にのみ動的に作成できます。

document の createElement メソッドを呼び出して、指定したタグを持つ DOM オブジェクトを作成し、要素の appendChild() メソッドを呼び出して、新しく作成した要素を対応する要素に追加できます。 //親要素 object.removeChild (子要素オブジェクト); 要素を削除します。

createElement('element');ノードを作成します

appendChild(node); ノードを追加します

removeChild(node); ノードを削除します

replaceChild(new,old); ノードを置き換えます

insertBefore(new,reference); ノードを前に追加します (ノードの前に挿入します)

方法:

プロパティ:

最初の子供

最後の子

3. innerHTML または createElement()、appendChild()、removeChild() を使用しますか?

ページの要素を操作するとき、innerHTML または createElement()、appendChild()、removeChild() を使用する必要がありますか?

1. 多数のノード操作の場合、頻繁な Dom 操作よりも innerHTML を使用した方がパフォーマンスが優れています (C または C で特別に記述された HTML パーサーがあります)。最初にページの HTML コードを記述してから、 innerHTML を繰り返し呼び出すのではなく、 innerHTML を 1 回呼び出します。

2. innerHTML='' を使用してノードを削除すると、場合によってはメモリの問題が発生します。たとえば、div の下には他にも多くの要素があり、各要素はイベント ハンドラーにバインドされています。この時点で、innerHTML はノード ツリーから現在の要素を削除するだけですが、これらのイベント ハンドラーは依然としてメモリを占有します。

js操作スタイル

className 属性を使用して要素のスタイルを変更します。

(classはJavaScriptの予約語で、属性にはキーワードや予約語は使えないのでclassNameになります) Webページ上のライトの点灯・消灯の効果。

要素 this.style="background-color:Red" のスタイルは変更できません。

スタイル属性を個別に変更するには、「style.property name」を使用します。 JavaScript で操作する場合、CSS の属性名は異なる場合があることに注意してください。- は JavaScript では属性名またはクラス名として使用できないため、属性名に - が含まれる属性に重点が置かれます。

float スタイルを操作する場合

IE:obj.style.styleFloat=‘right’;

その他のブラウザ: obj.style.cssFloat=‘right’;

フォームオブジェクト

一般的に使用される: click()、focus()、blur(); // プログラムを通じて要素のクリック、フォーカス、フォーカス喪失イベントをトリガーすることと同等です。

フォーム オブジェクトはフォームの Dom オブジェクトです。

メソッド: submit() はフォームを送信しますが、onsubmit イベントはトリガーされません。

自動投稿を実装します。つまり、送信ボタンが送信された後にのみ送信されるのではなく、フォーカスがコントロールから離れた直後にページが送信されます。カーソルが離れると、onblur イベントがトリガーされ、フォームの submit メソッドがトリガーされます。 onblurでは呼び出されます。

送信をクリックすると、フォームの onsubmit イベントがトリガーされます。データに問題がある場合は、false を返して送信をキャンセルします。

上記は JavaScript の DOM についての私の個人的な理解です。皆さんに気に入っていただければ幸いです。