Keiです。
以下略。
BOMとは
Browser Object Model：ブラウザとそのコンテンツとの間でやりとりを行うためのオブジェクト群のこと。
DOM（Document Object Model）がドキュメントのコンテンツとその構造に焦点を当てているのに対して、BOMはブラウザのウィンドウやフレーム、履歴やロケーションなどのページコンテンツ以外の部分を担当する技術。
何ができるか
①ウィンドウを操作する：新しいウィンドウを開いたり、閉じたり、大きさを変更可能
②Webサイトを動かす：「戻る」や「進む」ボタンを押すのと同じように、プログラムからWebページを前後に移動させることが出来る。
③情報を教えてくれる：例えば、Googlechromeというブラウザを使っているという情報や、モニターの画面サイズなどの情報を認識できる。
なぜ必要か
PCで調べものをしていて、とある部分だけを別画面（ウィンドウ）に分けてみる場合も。必要な部分だけを切り取って新しいウィンドウとして開き直す必要がある。
それらを行うための処理を担当しているのがBOMという技術。
レスポンシブデザイン技術との違い
レスポンシブデザインはWebページの内容を様々なデバイス（スマホ・タブレット・PC）などで見やすく調整するためのデザイン方法で、画面の大きさに合わせてテキストや画像の大きさと配置が自動的に調整されるのが特徴。
それに対して、BOMはブラウザの機能を操作するためのもので、ブラウザ自体の部分を制御する。
要するに、
BOMは「ブラウザの操作」、Webページの背後でブラウザとどうやってうまくやり取りをするかの仕組みを作るもの
レスポンシブデザインは「ページの表示」、ユーザーがどのデバイスを使っても内容がしっかりと見えるようにするためのデザイン手法
という違い。
フレームワークとの関わり（脱線）
ReactのようなフレームワークはBOMの上に構築されたもので、特定の機能を使用する際にBOMのAPIを直接または間接的に使用する。
＊長くなりそうだったので詳しくは割愛
まとめ
あえて深堀はしなかったが、WindowsオブジェクトやNavigatorオブジェクト、Locationオブジェクトなどを用いることで、JavaScriptがブラウザの様々な環境情報にアクセスしてユーザーがアプリやサイトを操作する際の快適性を高める技術のこと。
ただし、BOMはDOMのように標準化されているものではなく、ブラウザによって挙動が異なるため、クロスブラウザ対応を意識する必要がある。
（要するにゲームでいうところのクロスプラットホーム開発みたいなものだよね？）
