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のカスタム監視項目とトリガーについて

推薦する

Docker パッケージング ノード プロジェクトのプロセスの説明

バックエンド プログラマーとして、フロントエンドのものをいじらなければならないこともあります。そこで...

Linuxプロセス通信におけるFIFOの実装

FIFO通信(先入れ先出し)関連のないプロセス間の通信を可能にする FIFO 名前付きパイプ。パイプ...

jsを使用してカルーセル効果を実現する

今日は、参考までに、jsを使用してカルーセルマップの効果を実現する方法についてお話ししましょう。具体...

Centos7 に MySQL 8.0.23 をインストールする手順 (初心者レベル)

まず、MySQL とは何かを簡単に紹介します。簡単に言えば、データベースはデータを格納するための倉庫...

MySQLのさまざまなロックに関する詳細な理解

目次ロックの概要ロックの分類データベース操作の粒度データ操作の種類MySQL ロックさまざまなストレ...

ブラウザ(IEシリーズ)を判別するための条件付きコメント

<!--[if IE 6]> IE6 のみが認識可能 <![endif]-->...

Vue3.0はドロップダウンメニューのカプセル化を実装します

Vue3.0 がリリースされてからしばらく経ちましたが、勉強を始める必要があります。まず、達成したい...

17 個の JavaScript ワンライナー

目次1. DOMとBOM関連1. 要素にフォーカスがあるかどうかを確認する2. 要素の兄弟ノードをす...

2 級コンピュータ試験のための MySQL の知識ポイントとよく使用される MYSQL コマンド

2級コンピュータ試験のMySQL知識ポイントの基礎、一般的なMYSQLコマンドは次のとおりです。よく...

UbuntuでGRUBの起動時間を変更する

grubの起動時間を変更するためのオンライン検索は基本的に/etc/default/grubを変更す...

MySQLはトリガーを使用してデータベース内のテーブルの行制限を解決します。詳細な説明と例

MySQLはトリガーを使用してデータベース内のテーブルの行制限を解決します。詳細な説明と例最近のプロ...

Dockerカスタムネットワーク実装

目次1. コンテナ相互接続を実現するためにネットワークをカスタマイズする2. ネットワーク接続1. ...

MySQLスローログに関する知識のまとめ

目次1. スローログの紹介2. スローログの練習1. スローログの紹介スロー ログの正式名称はスロー...

MySQL (8 および 5.7) の Docker インストール

この記事では、Dockerを使用してMySQLデータベースとリモートアクセス構成をデプロイする方法を...