BOM

BOM（Browser Object Model）とはブラウザオブジェクトモデルのことで、ブラウザが提供する特別なオブジェクトを操作することができます。BOM を研究するには、これらのオブジェクトが何を表すかを理解することに加えて、その一般的なメソッドの使用方法も学ぶ必要があります。

以下に合計6つのオブジェクトを紹介します。

窓
ナビゲーター
画面
位置
書類（重要）
歴史（ゴミ）

注: 上記のイニシャルはすべて小文字です。結局のところ、これはクラスではなくオブジェクトです。

1、窓

JavaScript にはグローバルオブジェクトがあり、その名前は window であることに注意してください。window オブジェクトはグローバルオブジェクトとして機能するだけでなく、ブラウザウィンドウ) を表すこともできます。これは通常、窓の内側と外側の幅と高さ。ここでは、外側のウィンドウとは何かについて説明します。外側のウィンドウは目に見えるブラウザ全体であり、内側のウィンドウは開いている Web ページの一部にすぎません (実際、自分で試してみるとわかります)。

//获取浏览器窗口的内高度、宽度
console.log("当前网页的内宽度是：" + window.innerWidth);
console.log("当前网页的内高度是：" + window.innerHeight);

//获取浏览器窗口的外高度、宽度
console.log("当前网页的外宽度是：" + window.outerWidth);
console.log("当前网页的外宽度是：" + window.outerHeight);

//打开指定的窗口
window.open("https://www.baidu.com/");

//关闭当前的窗口（copy 执行的时候记得注释掉）
window.close();

コンソール出力:

2、ナビゲーター

ブラウザのバージョン、アプリケーション名など、いくつかの基本的なブラウザ

console.log("浏览器名称：" + navigator.appName);

//出于兼容性的考虑，目前任何的浏览器都可以返回 “Netscape”，个人觉得可能是缅怀网景公司吧
console.log("浏览器版本：" + navigator.appVersion);
console.log("浏览器语言：" + navigator.language);

コンソール出力:

ただし、navigator オブジェクトからの情報は誤解を招く。初心者は、異なるコードを記述するために navigator.appVersion を使用してバージョンを取得することを好む場合がありますが、実際にはこれはお勧めできません。ブラウザのバージョンを変更しましょう:

Object.defineProperty(window.navigator, 'appVersion', {
    
    value: "This is wrong version, haha", writable: false});
console.log("浏览器版本：" + navigator.appVersion);

現在のブラウザのバージョン:

3、画面

直訳すると「画面」で、実際には画面であり、ユーザーの現在の画面(ラップトップの画面)に関する情報が含まれています。

console.log("当前屏幕的宽度是：" + screen.width);
console.log("当前屏幕的高度是：" + screen.height);
console.log("当前屏幕的色深是：" + screen.colorDepth);

コンソール出力:

4、場所

現在のページの URL に関する情報を取得します。URL とは何ですか? アドレスバーの内容であり、プロトコル、ドメイン名、ポート、仮想ディレクトリ、ファイル名などが含まれます。

//都写了是什么，自己看吧（结果就不展示了哈）
console.log("URL：" + location.href);
console.log("协议 " + location.protocol);
console.log("域名 " + location.host);
console.log("端口 " + location.port);

//重定向 URL
console.log(location.assign("https://www.baidu.com/"));

//刷新当前页面
console.log(location.reload());

5. 書類（重要）

個人的には、ドキュメントオブジェクトは非常に重要だと考えていますが、その後、ツリー構造のモデルである DOM (ドキュメントオブジェクトモデル) に触れることになります。ドキュメントは DOM ツリーのルートノードです。ドキュメントを使用して、次のことができます。 DOM ツリーのノードを取得し、それらのコンテンツまたは属性を変更します。今は理解できないかもしれませんが、DOM ブログで使い方を詳しく紹介しますので、今からでも十分理解できます。

ページ要素を操作する必要があるため、今回は HTML ファイルにコードを記述します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>document</title>
    
    <!-- 我希望你们不要忘了这种写法 -->
    <script type="text/javascript">

        function changeTitle() {
      
      
            //修改页面的标题，就是 <head> 标签中的 <title> 标签
            document.title = "This is document object";
        }

        function func1() {
      
      
            //获取当前列表节点，并返回
            return document.getElementById('language');
        }

        changeTitle();

    </script>
</head>
<body>

<!-- 列表 -->
<ul id="language">
    <li>C</li>
    <li>C++</li>
    <li>Python</li>
    <li>Java</li>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>


</body>
</html>

コンソールで func1() 関数を実行して結果を確認すると、リストノードが取得されたことがわかります。

ドキュメントにはもう 1 つの重要な属性があります。それは Cookie です。

平たく言えば、Cookie はブラウザにユーザーを記憶させ。ただし、ドキュメントはユーザーの Cookie を直接取得できるため、ユーザーの個人情報の漏洩につながることに注意してください。解決策は、サーバー側で Cookie を設定するときに httpOnly を使用して、他のユーザーが JavaScript コードを使用できないようにすることです。現在のページを読み取ります。

//获取当前页面 Cookie
document.cookie;

6、歴史

文字通り、ブラウザの。実際には、このオブジェクトは削除されているため、ここで説明するべきではありません。個人的には、これを使用しないことをお勧めします。前後に、AJAX を使用するとより適切に実行できます。

//看看俩方法就行，back() & forward()

//相当于浏览器的后退
history.back();
//相当于浏览器的前进
history.forward();

習得が容易な BOM (ブラウザオブジェクトモデル)

BOM

おすすめ

習得が容易な BOM (ブラウザ オブジェクト モデル)

BOM

おすすめ

習得が容易な BOM (ブラウザオブジェクトモデル)