面接官：BOM についての理解と、どのような BOM オブジェクトを知っていますか？#
1. BOM とは#
BOM (Browser Object Model) は、コンテンツとブラウザウィンドウとの間で相互作用するオブジェクトを提供するブラウザオブジェクトモデルです。
その役割は、ブラウザとの相互作用効果を実現することです。たとえば、ページの戻る、進む、更新、ブラウザウィンドウの変更、スクロールバーのスクロール、およびブラウザのブランドとバージョン、画面解像度などのクライアントの情報の取得方法などです。
ブラウザのすべてのコンテンツはDOMと見なすことができ、ブラウザ全体はBOMと見なすことができます。以下のような違いがあります：
2. window#
BOMの中心的なオブジェクトはwindowであり、ブラウザのインスタンスを表します。
ブラウザでは、windowオブジェクトは 2 つの役割を持っています。つまり、ブラウザウィンドウのインターフェースであり、グローバルオブジェクトです。
したがって、グローバルスコープで宣言されたすべての変数や関数は、windowオブジェクトのプロパティやメソッドになります。
var name = 'js毎日一問';
function lookName(){
alert(this.name);
}
console.log(window.name); //js毎日一問
lookName(); //js毎日一問
window.lookName(); //js毎日一問
ウィンドウ制御メソッドは次のようになります：
moveBy(x,y)：現在の位置からウィンドウを水平方向に x ピクセル、垂直方向に y ピクセル移動します。x が負の場合、ウィンドウは左に移動します。y が負の場合、ウィンドウは上に移動します。moveTo(x,y)：ウィンドウの左上隅を画面の左上隅からの相対座標 (x,y) に移動します。resizeBy(w,h)：現在のウィンドウのサイズを基準に、幅を w ピクセル、高さを h ピクセル調整します。パラメータが負の値の場合、ウィンドウは縮小されます。正の値の場合、ウィンドウは拡大されます。resizeTo(w,h)：ウィンドウの幅を w ピクセル、高さを h ピクセルに調整します。scrollTo(x,y)：スクロールバーがある場合、水平スクロールバーをウィンドウ幅に対して x ピクセルの位置に移動し、垂直スクロールバーをウィンドウの高さに対して y ピクセルの位置に移動します。scrollBy(x,y)：スクロールバーがある場合、水平スクロールバーを x ピクセル左に移動し、垂直スクロールバーを y ピクセル下に移動します。
window.open()は、特定の URL にナビゲートするか、新しいブラウザウィンドウを開くために使用できます。
window.open()に 2 番目の引数が渡され、その引数が既存のウィンドウまたはフレームの名前である場合、指定された URL がターゲットウィンドウに読み込まれます。
window.open('htttp://www.vue3js.cn','topFrame')
==> < a href=" " target="topFrame"></ a>
window.open()は新しいウィンドウの参照、つまり新しいウィンドウのwindowオブジェクトを返します。
const myWin = window.open('http://www.vue3js.cn','myWin')
window.close()は、window.open()で開いたウィンドウにのみ使用できます。
新しく作成されたwindowオブジェクトには、openerプロパティがあり、それは元のウィンドウオブジェクトを指します。
3. location#
以下は URL の例です：
http://foouser:barpassword@www.wrox.com:80/WileyCDA/?q=javascript#contents
locationプロパティの説明は次のとおりです：
| プロパティ名 | 例 | 説明 |
|---|---|---|
| hash | "#contents" | URL の #以降の文字列。存在しない場合は空文字列 |
| host | www.wrox.com:80 | サーバー名とポート番号 |
| hostname | www.wrox.com | ドメイン名（ポート番号なし） |
| href | http://www.wrox.com:80/WileyCDA/?q=javascript#contents | 完全な URL |
| pathname | "/WileyCDA/" | サーバー内のファイルパス |
| port | 80 | URL のポート番号。存在しない場合は空 |
| protocol | http: | 使用されているプロトコル |
| search | ?q=javascript | URL のクエリ文字列。通常は？以降の内容 |
hash以外のプロパティを変更すると、ページが新しい URL で再読み込みされます。
location.reload()は、現在のページを再読み込みします。このメソッドは、ページが前回のリクエスト以降変更されていない場合、ページをブラウザのキャッシュから再読み込みします。
サーバーから強制的に再読み込みするには、trueを引数として渡します。
4. navigator#
navigatorオブジェクトは、ブラウザのプロパティを取得し、ブラウザのタイプを区別するために使用されます。プロパティは多く、互換性も複雑です。
以下の表は、navigatorオブジェクトのインターフェース定義のプロパティとメソッドを示しています：
5. screen#
保存されるのは、クライアントのディスプレイ情報であり、ブラウザウィンドウの外側のクライアントディスプレイの情報です。ピクセルの幅と高さなどが含まれます。
6. history#
historyオブジェクトは、ブラウザの URL の履歴を操作するために使用され、パラメータを使用して前方、後方、または指定された URL に移動することができます。
よく使用されるプロパティは次のとおりです：
history.go()
文字列または整数のパラメータを受け取ります。指定された文字列が含まれるページに最も近いレコードに移動します。
history.go('maixaofei.com')
パラメータが整数の場合、正の数は指定されたページに前方に移動し、負の数は指定されたページに後方に移動します。
history.go(3) // 3つ前に移動
history.go(-1) // 1つ後ろに移動
history.forward()：1 つ前に移動history.back()：1 つ後ろに移動history.length：履歴の数を取得します。