JavaScriptの勉強メモ-htmlチュートリアル-php.cn

JavaScriptの勉強メモ

WBOY

リリース： 2016-06-21 08:53:48

オリジナル

1103 人が閲覧しました

DOM を理解する

ドキュメントオブジェクトモデル DOM (ドキュメントオブジェクトモデル) は、HTML ドキュメントにアクセスして処理するための標準メソッドを定義します。 DOM は、HTML ドキュメントを要素、属性、テキストを含むツリー構造 (ノードツリー) として表現します。

まず次のコードを見てみましょう:

HTML コードを DOM に分解します。ノード階層図:

HTML ドキュメントはノードのコレクションであると言えます: の 3 つの一般的な DOM ノードがあります。

1. 要素ノード : 上の図では、、、

などはすべて要素ノード、つまりラベルです。

2. テキストノード : JavaScript、DOM、CSS、および

...

内のその他のテキストなど、ユーザーに表示されるコンテンツ。

3. 属性ノード : タグのリンク属性 href="http://www.imooc.com" などの要素属性。

次のコードを見てください:

<a href="http://www.imooc.com">JavaScript DOM</a>

ログイン後にコピー

ID による要素の取得

学習済みHTML /CSS スタイルでは、ご存知のように、Web ページはタグによって情報を整理しており、各人が ID 番号を持っているのと同じように、タグの id 属性値は一意です。ID 番号を使用するだけで、該当する人を見つけることができます。次に、Web ページで、まず ID を通じてタグを見つけて、操作を実行します。

構文:

 document.getElementById(“id”)

ログイン後にコピー

次のコードを見てください:

結果: null または [object HTMLParagraphElement]

注: 取得した要素はオブジェクトです。要素を操作するには、そのプロパティまたはメソッドを使用する必要があります。

innerHTML 属性

innerHTML 属性は、HTML 要素のコンテンツを取得または置換するために使用されます。

構文:

Object.innerHTML

ログイン後にコピー

注:

1.Object は、document.getElementById("ID") を通じて取得される要素など、取得される要素オブジェクトです。

2. innerHTML では大文字と小文字が区別されるので、記述に注意してください。

id="con" を通じて

要素を取得し、要素の内容を出力および変更します。コードは次のとおりです。 🎜>

結果:

変更HTML スタイル

HTML DOM を使用すると、JavaScript で HTML 要素のスタイルを変更できます。 HTML要素のスタイルを変更するにはどうすればよいですか?

構文:

注: オブジェクトは、document.getElementById("id") を通じて取得される要素など、取得される要素オブジェクトです。

Object.style.property=new style;

ログイン後にコピー

基本プロパティテーブル (プロパティ):

注: このテーブルは単なるsmall 一部の CSS スタイルプロパティやその他のスタイルも、このメソッドを通じて設定および変更できます。

次のコードを見てください:

要素のスタイルを変更し、色を赤に、フォントサイズを 20 に変更します。色を青に変更:

結果:

<p id="pcon">Hello World!</p><script>   var mychar = document.getElementById("pcon");   mychar.style.color="red";   mychar.style.fontSize="20";   mychar.style.backgroundColor ="blue";</script>

ログイン後にコピー

表示と非表示 (表示)属性)

表示効果と非表示効果は Web ページでよく見られ、display 属性を通じて設定できます。

構文:

注

: オブジェクトは、 document.getElementById("id") を通じて取得されるなど、取得された要素オブジェクトです。要素。