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

推薦する

MySQL インデックス データ構造の詳細な分析

目次概要インデックスデータ構造バイナリツリー赤黒木BツリーB+ツリーハッシュ索引InnoDB インデ...

JS関数の呼び出し、適用、バインドの超詳細な方法

目次JS 関数呼び出し、適用、バインドメソッド1. call() メソッド1. call() メソッ...

webpackコード断片化の実装

目次背景コモンズチャンクプラグイン分割チャンク構成リソースを非同期に読み込む要約する背景高性能なアプ...

CentOS MySQLデータベースのスケジュールバックアップを実装する方法

次のスクリプトは、MySQLデータベース全体のスケジュールされたバックアップに使用されます。 mys...

IDEA2020.1.2 Webプロジェクトの作成とTomcatの設定に関する詳細なチュートリアル

この記事は、IDEA で Web プロジェクトを作成し、Tomcat を構成する方法についての統合記...

ウェブサイトの再設計はどの家族にとっても難しい作業です

<br />どの家庭にもそれぞれの問題があり、改訂はどの IT 企業にとっても問題の 1...

Vue フィルター、ライフサイクル関数、vue-resource の簡単な紹介

1. フィルター例: <!DOCTYPE html> <html lang=&qu...

フロントエンド開発に必要な共通ツール機能のまとめ

1. 時刻の書式設定とその他の方法moment.jsライブラリファイルの使用をお勧めします2. テン...

JavaScriptはシンプルな計算機能を実装します

この記事では、参考までに、簡単な計算機を実装するためのJavaScriptの具体的なコードを紹介しま...

MySQL 5.7.20 の解凍バージョンをインストールするための詳細な手順 (2 つの方法)

Windows 64ビットでのMySQLのインストールについて説明します。5.7以降、MySQLの...

面接官がmysqlのcharとvarcharの違いを尋ねたとき

目次charとvarcharの違いcharとvarcharの違い上記は、MySQL における cha...

Centos7 での nginx のインストールと設定に関する詳細なチュートリアル

注: ソフトウェアのインストールの基本ディレクトリ パスは /usr/local です。ソフトウェア...

Nginx の一般的な設定とテクニックの概要

序文この記事では、Nginx の一般的な、実用的で興味深い構成をいくつか紹介します。この記事を読んだ...

CentOS7 に YUM 経由で MySQL 5.7 をインストールする詳細な手順

1. インストールパッケージを保存する場所に移動しますcd /home/lnmp 2. MySQL ...

UrlRewriter のキャッシュ問題と関連する一連の調査

ウェブサイト機能を開発する場合、セッション キャッシュを時間内にクリアできません。一連の探索が始まり...