JavaScript BOM の説明

JavaScript BOM の説明

1. BOMの紹介

1. JavaScriptは3つの部分から構成される

  • ECMAScript コア構文 ES
  • DOMドキュメントオブジェクトモデル、コアオブジェクトはドキュメントであり、ページドキュメントを操作するために使用されます
  • BOMブラウザオブジェクトモデル、コアオブジェクトはウィンドウであり、ブラウザを操作するために使用されます

ここに画像の説明を挿入

2.ウィンドウオブジェクト

名前意味
歴史クライアントがアクセスした URL に関する情報
位置現在のURL、子DOMオブジェクトに関する情報
書類ブラウザウィンドウのHTML文書を表す、単語レベルのDOMオブジェクト

一般的な方法:

メソッド名意味
アラート(テキスト)プロンプトメッセージと[OK]ボタンを含む警告ボックスを表示します。
プロンプト(テキスト)プロンプトメッセージ、テキスト入力ボックス、OK ボタンとキャンセル ボタンを含む入力ボックスを表示します。
確認(テキスト)プロンプト情報、OK、キャンセルボタンを含む確認ボックスを表示します。確認は true を返し、キャンセルは false を返します。
open(url,名前,オプション)指定された名前で新しいウィンドウを開き、指定されたURLで指定されたドキュメントを読み込みます。
setTimeout(fn,遅延)指定したミリ秒数後に関数を実行するワンショットタイマーを設定します。
setInterval(fn,遅延)定期的に関数を実行するための定期タイマーを設定する
cleatTimeout(タイマー)ワンショットタイマーをクリア
cleanInterval(タイマー)ワンショットタイマーをクリア
scrollTo(xpos,ypos)コンテンツを指定された座標までスクロールします。つまり、スクロールバーのオフセット位置を設定します。
scrollBy(xnum,ynum)指定されたピクセル数だけコンテンツをスクロールします。つまり、スクロールバーのオフセットを設定します。

指定したウィンドウを開く

<スクリプト>
        関数f1() {
            //これは CSS スタイルではありません。開いているウィンドウのサイズを調整できます。open('test.html', 'user', 'width=500px,height=500px')
        }
    </スクリプト>
</head>
<本文>
    <button onclick="f1()">新しいウィンドウを開く</button>
</本文>

setTimeout(fn,delay)

  <スクリプト>
        関数f1() {
            //これは CSS スタイルではありません。開いているウィンドウのサイズを調整できます。open('test.html', 'user', 'width=500px,height=500px')
        }
        関数f2() {
            タイムアウトを設定します(f1, 2000)
        }
    </スクリプト>
</head>
<本文>
    <button onclick="f2()">ワンタイムタイマー</button>
</本文>

cleatTimeout(timer)

実行されなかった時間枠内でワンショットタイマーをオフにする

```javascript
<スクリプト>
        関数f1() {
            //これは CSS スタイルではありません。開いているウィンドウのサイズを調整できます。open('test.html', 'user', 'width=500px,height=500px')
        }
    </スクリプト>
</head>
<本文>
    <button onclick="f1()">新しいウィンドウを開く</button>
</本文>

setTimeout(fn,delay)

  <スクリプト>
        関数f1() {
            //これは CSS スタイルではありません。開いているウィンドウのサイズを調整できます。open('test.html', 'user', 'width=500px,height=500px')
        }
        変数タイマー
        関数f2() {
            タイマー = setTimeout(f1, 2000)
        }
        関数f3(){
		clearTimerout(タイマー)
}
    </スクリプト>
</head>
<本文>
    <button onclick="f2()">ワンタイムタイマー</button>
    <button onclick="f3()">ワンショットタイマーをオフにする</button>
</本文>

scrollTo(xpos,ypos)

指定した位置に移動する

<スクリプト>
        関数f1() {
            scrollTo(0, 100) //単位はpx
        }
    </スクリプト>

一般的なイベント

時間名意味
クリック時マウスクリック
アップロードページの読み込みが完了しました
スクロールするウィンドウのスクロールバーのスライド

注: ウィンドウ オブジェクトは BOM 構造の最上位オブジェクトであるため、ウィンドウのプロパティとメソッドを呼び出すときにウィンドウを省略できます。

<スクリプト>
//ウィンドウをクリックした後に実行 window.onclick = function() {
            コンソール.log(111)
        }
    </スクリプト>

3.場所オブジェクト

共通プロパティ

hrefはアドレスバーのURLを設定または返します

共通メソッド reload() は現在のページを再読み込みします

    <スクリプト>
        関数 getUrl() {
            //アドレスバーのURLを取得する
            コンソール.log(場所.href)
                //アドレスバーにページをリダイレクトする URL を設定します //location = 'https://www.baidu.com'
            location.href = 'https://www.baidu.com'
            //ページをリロードします location.reload();
        }
    </スクリプト>
</head>
<本文>
    <button onclick="getUrl()">URL を取得</button>
</本文>

4.歴史オブジェクト

メソッド名意味
戻る()戻って履歴リストの前のURLを読み込む
フォワード()履歴リストの次のURLを読み込んで進みます
go(数字)ブラウザは指定されたページ数だけ移動する
  <スクリプト>
        関数 goBack() {
            履歴.戻る()
        }
        関数 goforward() {
            履歴を転送する()
        }
        関数goGo() {
            history.go(1) // 1つ進む }
    </スクリプト>
</head>
<本文>
    <button onclick="goBack()">戻る</button>
    <button onclick="goforward()">進む</button>
</本文>

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • JSブラウザBOMの一般的な操作例を詳しく解説
  • JavaScript の 3 つの BOM オブジェクト
  • JavaScript における BOM と DOM の詳細な説明
  • JS での BOM アプリケーション
  • JavaScriptでBOM操作を学ぼう

<<:  フロントエンドエンジニアが作ったクールなインタラクティブウェブサイトを推薦します

>>:  Zabbixのカスタム監視項目とトリガーについて

推薦する

CSSの2つの特別な値は、カスケードの継承と初期メソッドを制御するために使用されます。

カスケードを制御するために CSS の任意のプロパティに割り当てることができる特別な値が 2 つあり...

MySQLの数値型自動増分における落とし穴

テーブル構造を設計する場合、数値型は最も一般的な型の 1 つですが、数値型をうまく使用するのは想像す...

Windows Server 2016 に Docker をインストールする方法

最近、Microsoft は Docker をネイティブにサポートする Windows Server...

Windows 10 での Tomcat のインストールと展開に関する詳細なチュートリアル

目次1 Java環境の設定2 tomcatのインストールと展開Tomcat をインストールして展開す...

CentOS7にJDK8をrpmモードでインストールする

CentOS 7が正常にインストールされると、OpenJDKのJREがデフォルトでインストールされて...

Windows サーバー ファイルをローカルにバックアップする方法、Windows サーバー データ バックアップ ソリューション

重要なデータはバックアップする必要があり、リアルタイムでバックアップする必要があります。そうしないと...

グループフィールドを 1 行に書き込むための mysql group_concat メソッドの例

この記事では、MySQL group_concat を使用してグループ化されたフィールドを 1 つの...

MySQLトリガーはPHPプロジェクトで情報のバックアップ、復元、クリアに使用されます。

例: PHP バックグラウンド コードを通じて、従業員情報を削除したり、削除した従業員情報を復元した...

JavaScript でクールなマウス テーリング効果を実装

これを見た後、あなたにも手ができて、さまざまな美しい小さなしっぽを作れるようになることを保証します!...

MySQL 8.0.12 winx64 詳細なインストールチュートリアル

この記事では、MySQL 8.0.12のインストールチュートリアルを参考までに紹介します。具体的な内...

Linuxでkv設定ファイルを変更するにはsedコマンドを使用します

sed は Unix の文字ストリーム エディタ、つまりストリーム エディタです。行指向であり、行単...

CSSスタイルシートとフォーマットレイアウトの詳細な説明

スタイルシートCSS (カスケーディング スタイル シート) は、HTML Web ページを美しくす...

Windows CVE-2019-0708 リモート デスクトップ コード実行脆弱性の再現問題

1. 脆弱性の説明マイクロソフトは2019年5月15日、CVE番号CVE-2019-0708のWin...

Mac で docker と kubectl の自動補完コマンドを追加する方法

kubectl の紹介kubectl は、k8s クラスターを操作するためのコマンドライン ツールで...

CSS中級者向けアダプティブレイアウトの5つのソリューションの詳細な説明

序文ページを作っていく上で、ページレイアウトに関する内容に遭遇することが多く、面接でも聞かれることも...