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

推薦する

Windows での MySQL 5.7.18 のインストールと設定のチュートリアル

この記事では、WindowsでのMySQL 5.7.18のインストールと設定のチュートリアルを参考ま...

Vue シングルページ SEO の 4 つのソリューションについての簡単な説明

目次1.Nuxtサーバーサイドレンダリングアプリケーションの展開(SSRサーバーレンダリング)利点:...

Dockerはプロセス操作を管理するためにSupervisorを使用する

Docker コンテナは、起動時に、たとえば ssh または apache デーモン サービスなどの...

vue+iviewのメニューとタブの連携方法

Vue+iview メニューとタブのリンク現在、vue+iview を使用してバックエンド管理システ...

MySQL 結合クエリ構文と例

接続クエリ:これは、2 つのクエリ (またはテーブル) の各行をペアで接続した結果です。つまり、1 ...

WindowsでiTunesのバックアップパスを変更する方法

0. 準備: • iTunesを閉じる• タスクマネージャーでiTunesから始まるサービスを終了し...

Ajax の JavaScript ソリューションにおける parsererror エラー ケースの詳細な説明

ajax の parsererror エラー (バックグラウンドからフロントエンドに送信される js...

vue3 の setUp とリアクティブ関数の使用方法の詳細な説明

1. いつsetUpを実行するかvue3 ではメソッドを正常に使用できるようになったことは誰もが知っ...

CSS フィルターを使用してマウスオーバー効果を記述する例

CSSフィルターを使用してマウスオーバー効果を記述する <div class="fi...

MySQL インデックスの一般的な問題の概要

Q1: データベースにはどのようなインデックスがありますか?メリットとデメリットは何ですか? 1. ...

CSS の歪んだ影の実装コード

この記事では、CSS ワープ シャドウの実装コードを紹介し、皆さんと共有します。詳細は以下の通りです...

MySQL におけるデフォルトの使用法の詳細な説明

NULL および NOT NULL 修飾子、DEFAULT 修飾子、AUTO_INCREMENT 修...

HTML テーブル マークアップ チュートリアル (38): ヘッダーの境界線の色属性 BORDERCOLOR

テーブルを美しくするために、ヘッダーに異なる境界線の色を設定できます。基本的な構文<TH 境界...

JavaScript における call、apply、bind の実装原則の詳細な説明

目次序文電話使用法成し遂げるシンプルな実装バージョン:アップグレード版:適用する使用法成し遂げるバイ...