js DOM学習メモ_javascriptスキル

今日は DOM について学習し、次の基本的な演習を行いました...
DOM は Document Object Model の略で、DHTML 開発で DOM を操作するために JavaScript を使用します。
学習目標: JavaScript を使用して Dom を操作し、一般的な DHTML 効果を実現できるようになります。
参考書籍: Zhang Xiaoxiang の『JavaScript Web 開発 - 体験学習チュートリアル』
1. DOM の概要:
1. DOM は HTML ページのモデルとして扱われます。 DOM の属性とメソッドを呼び出すことで、Web ページ内のテキスト ボックス、レイヤー、その他の要素をプログラムで制御します。たとえば、テキスト ボックスの DOM オブジェクトを操作することで、テキスト ボックスの値を読み取って設定できます。
2. DOM は、WinForm と同様、イベント、プロパティ、メソッドを通じてプログラムできます。
3. CSS JavaScript DOM=DHTML (つまり、HTML 言語の拡張機能。ドキュメントとオブジェクトのプレゼンテーション効果を高めることができます。)
2. イベント:
1. body onmousedown="alert('haha')">onmousedown 内のコードは、マウスがクリックされたときに実行されます。時間イベントに応答するにはコードが多すぎる場合は、別の関数
に入れます。

コードをコピー コードは次のとおりです。

注意: bodymousedown の後の括弧は失われることはありません。これは、onmousedown イベントの応答関数が bodymousedown であるのではなく、bodymousedown 関数を呼び出すことを意味するためです。
2. イベントを動的に設定する:
イベント応答関数は、.Net の「btn.Click=」と同様に、コード内で動的に設定できます。

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

.org/1999/xhtml"> ;head>

>>

3. window オブジェクト 現在のブラウザ ウィンドウを表します。たとえば、window.alert('a') は、alert('a') に省略できます。
1) アラート メソッドは、メッセージ ダイアログ ボックスを表示します。
2) confirm メソッドは「OK」および「キャンセル」ダイアログボックスを表示し、[OK]ボタンが押された場合は true を返し、そうでない場合は false を返します。
if(confirm("続行しますか?")) ｛
alert("確認");
｝
else
{alert("キャンセル");}
3) 指定されたアドレスに再度移動します: navigate("http://www.microsoft.com/");
4) setInterval は指定されたコードを時々実行します。最初のパラメーターは、 code の第二引数はインターバル時間（単位：ミリ秒）、戻り値はタイマーIDです。例: setInterval("alert('hello')",5000);




コードをコピー

コードは次のとおりです。 🎜> > ;

functionscroll() {

var title = title.charAt(0); var leftstr = title.substring(1, title.length);
document.title = leftstr firstch;
} //目的は Web ページのタイトルをスクロールすることです
setInterval("scroll() ", 500);







5) clearInterval は、setInterval のスケジュールされた実行をキャンセルします。これは、Timer の Enabled=False に相当します。 setInterval は複数のタイミングを設定できるため、clearInterval には、setInterval の戻り値であるクリアするタイマーの識別子を指定する必要があります。 var intervalld= setInterval("alert('hello')",5000);
clearInterval(intervalld);
6) setTimeout も定期的に実行されますが、setInterval のように定期的に実行されるのではなく、設定された時間が経過した後に実行されます。一度だけ実行され、clearTimeout はクリア時間でもあります。
区別は簡単です。インターバルはタイミングを意味し、タイムアウトはタイムアウトを意味します。例: var timeoutld=setTimeout("alert('hello')",2000);
ケース: タイトル バーの回転効果、つまりブラウザのタイトル テキストが 500 ミリ秒ごとに右にスクロールすることを実現します。ヒント: タイトルは document.title 属性です。
4. 1) onload: Web ページが読み込まれるときにトリガーされます。JavaScript が読み込まれていないときに、ブラウザがドキュメントをダウンロードするときに、特定の要素を操作する必要がある場合があります。この場合、操作を本体の onload イベントに配置するか、要素の後に JavaScript を配置する必要があります。要素の onload イベントは要素自体が読み込まれるときにトリガーされ、本体内の onload はすべての読み込みが完了したときにトリガーされます。
2) onunload: Web ページが閉じられた (または終了した) 後にトリガーされます。イベント（表示する警告メッセージ）の「Window.event.returnValue」に値を代入すると、ウィンドウを離れるとき（進む、戻る、閉じるなど）に確認メッセージが表示されます。例:

コードをコピー コードは次のとおりです。

5. その他のイベント:
固有の属性に加えて、もちろん一般的な HTML 要素 イベント: onclick (クリック)、ondblclick (ダブルクリック)、onkeydown (キー押下)、onkeyup (キーリリース)、onkeypress (クリックボタン)、onmousedown (マウス押下)、onmousemove (マウス移動)、onmouseout (マウスが離れる) 要素範囲)、
onmouseover (マウスが要素範囲に移動する)、onmouseup (マウス ボタンを離す) など。
3. window オブジェクトのプロパティ
1. 新しいアドレスにリダイレクトする window.location.href="http://www.sina.com.cn" は、navigate メソッドと同じ効果があります。 window.location.reload() はページを更新します。
2. window.event は、イベントが発生したときに情報を取得するために使用される非常に重要な属性です。イベントは window オブジェクトのイベントに限定されず、event 属性を通じて関連する情報を取得できます。
1) altKey 属性、ブート タイプは、イベントの発生時に alt キーが押されたかどうかを示します。たとえば、{alert('Alt click')}else{alert('normal click')}"/>;

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

baidu