フロントエンドを学ぶ 28 日目 - BOM ブラウザーオブジェクトモデル

今日はBOMに焦点を当てます

1.BOMの紹介

1. BOM (ブラウザオブジェクトモデル) → ブラウザオブジェクトモデル。

2. BOM の役割: 主に、ブラウザのさまざまなコンポーネントにアクセスして操作する方法を提供します。

ここに画像の説明を挿入

ウィンドウブラウザウィンドウオブジェクトは、js で最大のオブジェクトです。他のすべてのオブジェクトは window のサブオブジェクトです

Web ページを表す document ドキュメントオブジェクト

location アドレスバーオブジェクト、アドレスバーを操作するためのいくつかのメソッド

ナビゲーターブラウザーソフトウェアオブジェクトは、主に、ユーザーが使用しているブラウザーを判別するために使用されます。これにより、互換性の問題を解決できます。

screen スクリーンオブジェクト、スクリーン関連の情報を取得できます

ブラウザの履歴に関連する操作を実行できる履歴オブジェクト

知らせ：

window は、ブラウザーで開いたウィンドウを表すグローバルブラウザー組み込みの最上位オブジェクトです (window オブジェクトに適用される公的な標準はありませんが、すべてのブラウザーがこのオブジェクトをサポートしています)。 Window オブジェクトは、ブラウザーウィンドウまたはフレームを表します。
クライアント側 JavaScript では、Window オブジェクトはグローバルオブジェクトであり、すべての式は現在の環境で評価されます。つまり、現在のウィンドウを参照するために特別な構文はまったく必要なく、そのウィンドウのプロパティをグローバル変数として使用できます。
たとえば、window.document の代わりに document と書くことができます。
同様に、Window.alert() の代わりに alert() のみを記述するなど、現在のウィンドウオブジェクトのメソッドを関数として使用できます。
上記のプロパティとメソッドに加えて、Window オブジェクトは、コア JavaScript によって定義されたすべてのグローバルプロパティとメソッドを実装します。

prompt() は、ユーザー入力を求めるダイアログを表示します
alert() は、プロンプトメッセージと [OK] ボタンを含むアラートダイアログを表示します。
confirm() は、プロンプトメッセージ、[OK] および [キャンセル] ボタンを含むダイアログを表示します。
close() ブラウザウィンドウを閉じます close() メソッドは、ブラウザウィンドウを閉じるために使用されます。構文は次のとおりです。
タイマー
a、インターバルタイマー setInterval (on) clearInterval (off)
b、タイムアウトタイマー setTimeout (on) clearTimeout (off)
open() メソッドの機能: 新しいブラウザウィンドウを開く
a、パラメータ 1 は Web サイトアドレスを開くことを意味しますパラメータ 2 は新しいウィンドウを開くかどうかを意味しますパラメータ 3 は新しいウィンドウスタイルを意味します
b、iframe フレームセットタグと同様: 別のページをページページ

hostname は、現在の URL のホスト名を設定または返します
href: アドレスバーの完全なアドレスを取得します。JSのWebページジャンプが実現できます。location.href = "http://www.jd.com";
pathname: ファイルパスとファイル名
protocol: http://、ftp:// などのプロトコル
ハッシュ: アンカー名。など: #トップ
search: クエリ文字列を取得できます
reload([true]): Web ページを更新します。true パラメーターは、強制的に更新することを意味します
a. Web ページを閲覧した後、通常、キャッシュはローカルに残されます. 正常に更新された場合、ブラウザーは、アクセス速度を向上させるためにサーバーに要求する代わりに、最初にキャッシュ内のリソースを取得します.
b. 強制更新とは、ブラウザーにキャッシュを取得しないように指示し、サーバーから Web ページ上のすべてのリソースを再要求することです。これは、開発テストまたは一部のリソースの更新に適しています。
注: すべての属性の再割り当て後、Web ページは自動的に更新されます。
<meta http-equiv = 'refresh' content = '5;url=http://www.jd.com' />
content の最初のパラメーターは数秒後に更新され、2 番目のパラメーターは更新後のアドレスです。

1. appName: ブラウザソフト名 appCodeName ブラウザソフト名は今はあまり参考にならない

2. appVersion: ブラウザソフトウェアのコアバージョン番号。

3. プラットフォーム: プラットフォーム

4. UserAgent ブラウザのバージョン情報

1. 幅: 画面の幅を読み取り専用プロパティで返します。

2. 高さ: 画面の高さを読み取り専用プロパティで返します。

3. availWidth: タスクバーを除く画面の有効幅。読み取り専用プロパティ。

4. availHeight: タスクバーを除く、画面の有効な高さ。読み取り専用プロパティ。

1. window.onload: このイベント (条件) は、Web ページが読み込まれたときにトリガーされ、インデックスマークのすべてのコンテンツが読み込まれます。

2. ウィンドウにスクロールバーイベントを追加する

onscroll スクロールイベント
scrolltop 垂直スクロールバーのスクロール距離
scrollleft 水平スクロールバーがスクロールする距離
window.innerHeight - ブラウザウィンドウの表示高さ
window.innerWidth - ブラウザウィンドウの表示幅
document.documentElement.scrollTop はスクロール距離を取得し、ドキュメントタイプを定義しないと無効になります
document.body.scrollTop スクロール距離を取得し、ドキュメントタイプが定義されていない場合に使用されます
互換性のある記述: var scrolltop = document.documentElement.scrollTop||document.body.scrollTop;

3. window.onresize: ブラウザーウィンドウのサイズが変更されると、イベントがトリガーされます。