JavaWeb-BOMおよびDOMオブジェクト


BOMオブジェクト

1.BOMオブジェクトの簡単な説明

  • ブラウザオブジェクトモデル:ブラウザオブジェクトモデル;
  • ブラウザ関連の操作を実行するために使用されます。
  • BOMオブジェクト、つまりウィンドウオブジェクト;
  • 注:ウィンドウオブジェクトはJavaScriptの組み込みオブジェクトであり、ウィンドウオブジェクトを使用してメソッドを呼び出す場合は、記述せずにウィンドウを省略できます。

次に、メッセージボックス

  • alert("hello world");警告ボックスをポップアップするために使用されます;
    ここに画像の説明を挿入
  • confirm("确定 or 取消");確認ボックス;
    戻り値がある場合確認の場合はtrueを返し、キャンセルの場合はfalseを返します。
    ここに画像の説明を挿入

3、サイクルタイマー

  • タイマーが作成され、呼び出されると周期的に実行されます。
sentInterval(调用方法, 毫秒值);
//毫秒值:循环周期

ここに画像の説明を挿入

  • サイクルタイマーをキャンセルします。
clearInterval(循环定时器的ID);
注:返回值即为循环定时器的ID;

ここに画像の説明を挿入

  • :run1()メソッドを2秒に1回実行します
    ここに画像の説明を挿入

4つのワンタイムタイマー

  • 1回の呼び出しで、タイマーが1回作成され、実行されます。
setTimeout(调用方法, 毫秒值);

ここに画像の説明を挿入

  • ワンタイムタイマーをキャンセルします。
clearTimeout(ID);

ここに画像の説明を挿入

5、ロケーションオブジェクト

  • Locationオブジェクトには、ブラウザのURL情報が含まれています。
  • 現在の住所を取得する:
    ここに画像の説明を挿入
  • herf属性を設定します。
    ブラウザは対応するパスにジャンプします。
    ここに画像の説明を挿入

DOMオブジェクト

1.DOMの簡単な紹介

  • ドキュメントオブジェクトモデル:ドキュメントオブジェクトモデル;(ドキュメント:マークアップドキュメント、つまりHTMLなど);
  • DOMは、マークアップドキュメント内のすべてのコンテンツ(タグ、テキスト、属性)をオブジェクトにカプセル化します。
  • オブジェクトの属性またはメソッドを操作することにより、HTML表示効果を操作または変更する目的を達成するため。

2、DOMツリーの紹介

  • HTMLドキュメントブラウザのメモリにロードは次のようにロードされるDOMオブジェクト
    HTMLドキュメントを:
    ここに画像の説明を挿入
    DOMツリーを:
    ここに画像の説明を挿入
  • DOMツリーの特性
    各DOMツリーにはルートノードが必要です。
    各ノードはノードオブジェクトです。
    共通ノードの関係:親子ノードの関係。
    テキストノードオブジェクトには子ノードがありません。(つまり、リーフノードです)。 );
    各ノードにはすべて親ノードがあり、0個以上の子ノードがあります。
    ルートノードのみに親ノードがありません。

3、要素ノードオブジェクトを取得します

1.要素オブジェクトを取得する4つの方法:

  • getElementById();要素IDで対応する要素オブジェクト
    を取得します。IDで要素オブジェクトを取得し、見つからない場合はnullを返します。
  • getElementsByName();要素
    のname属性を介して要件満たすすべての要素を取得します。name属性を介して要素ノードオブジェクトの配列を取得し、見つからない場合は空の配列を返すことができます。
  • getElementsByTagName(); 要素の要素名属性(タグ名)を使用して、要件を満たすすべての要素を取得します。
  • getElementsByClassName(); 要素のclass属性を介して、要件を満たすすべての要素を取得します。

注:上記はすべて、DOMオブジェクト、つまりドキュメントに関連するメソッドです。
:特定の/一部の要素ノードオブジェクトを取得するには、最初に要素ノードオブジェクトがメモリにロードされていることを確認する必要があります。

2.コード例

ここに画像の説明を挿入
ここに画像の説明を挿入
ここに画像の説明を挿入

要素オブジェクトの4つの共通属性

1.値

  • 元素对象.value = 属性值; 要素オブジェクトのvalue属性値を設定します。

2. className

  • 元素对象.className = 属性值; 要素オブジェクトのクラス属性値を設定します。

3.チェック済み

  • 元素对象.checked = 属性值;要素オブジェクトのchecked属性値を設定します。
    注:HTMLではchecked =“ checked”、JavaScriptではtrueとfalseが返されます。radio
    / checkボックスが選択されているかどうかを変更できます。
    ここに画像の説明を挿入

4. innerHTML

  • 元素对象.innerHTML = 值; 要素オブジェクトのコンテンツ本文を設定します。
    ここに画像の説明を挿入

おすすめ

転載: blog.csdn.net/pary__for/article/details/110955471