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

推薦する

Linux の crw、brw、lrw などのファイル属性は何ですか?

ファイルとは何ですか?すべてのファイルは実際には文字列のストリームですが、適切な解析方法を使用すると...

MySQL ストレージ エンジン MyISAM と InnoDB の違いの概要

1. MySQLのデフォルトストレージエンジンの変更MySQL 5.1 より前のバージョンでは、デフ...

Nginx リバース プロキシと負荷分散の実践

リバースプロキシリバースプロキシとは、プロキシサーバーを介してユーザーのアクセス要求を受信し、ユーザ...

Vueの監視プロパティの詳細

目次1.watchは一般的なデータ(数値、文字列、ブール値)の変更を監視します。 1. 数値2. 文...

vue+django でファイルをダウンロードする例

目次1. 概要2. Django プロジェクト3. Vueプロジェクト1. 概要プロジェクトで、ダウ...

jsプロキシの原理の詳細な説明

目次プロキシモードとは何ですか?実例を紹介例を使ってプロキシモデルの定義を理解するプロキシとはget...

コードブロックのハイライトをコピーして表示できる js プラグイン highlight.js + clipboard.js 統合

主に2つの側面から: 1. ハイライト/改行2. コードのコピーボタンこれら両方には既製のプラグイン...

VMware+centOS 8 で http プロトコルに基づく Git サービスを構築する方法

目次1. 原因2. デバイス情報3. 準備4. Apacheをインストールする5. gitを設定する...

新しいカーネルをLinuxシステムに移植する手順

1. ubuntu16.04 イメージと対応する ubuntu16.04 カーネル バージョンのソー...

CSS3 で作成したホバーズーム効果

結果:実装コード: html <link href='https://fonts.go...

CentOS7 で jar アプリケーションの起動を設定する方法

プロジェクトの展開中に遭遇した落とし穴Zhihudemo を展開する際、Jenkins などの自動展...

node.js の require メソッドの読み込みルールの詳細な説明

require メソッドの読み込みルールキャッシュからの読み込みを優先するコアモジュールパス形式のモ...

Linux のハードリンクとソフトリンクの原理と使用法の分析

Linux システムには、ファイル共有を解決するために使用できるリンク ファイルと呼ばれる種類のファ...

Node.js+express+socket でオンラインのリアルタイム多人数チャットルームを実現

この記事では、オンラインリアルタイム多人数チャットルームを実現するためのNode.js+expres...

Javascript での JSBridge に関する予備的研究

目次JSBridgeの起源JSBridgeの双方向通信原理JSはネイティブを呼び出すネイティブコール...