JSの基礎-BOM

GOOD

BOMは、ブラウザのオブジェクトモデルの頭字語であるブラウザ・オブジェクト・モデルと呼ばれます。メインのブラウザウィンドウやフレーム処理、
方法およびブラウザと対話するためのインターフェースを説明し、あなたには、例えば、ポップアップ表示することができ、ブラウザウィンドウにアクセスして操作することができ
、新しいウィンドウを歴史を巻き戻し、URLを取得する......

BOMとDOMの関係

  1. BOMオブジェクトを訪問してアクセス、制御、ブラウザを変更することjavacsript
  2. BOMのウィンドウには、文書が含まれているので、ウィンドウオブジェクトのドキュメントプロパティを介してアクセスすることができ
    、取得した文書の内容と構造を変更します。
  3. ドキュメントオブジェクトは、ルートDOMモデルです。

したがって、BOMはDOM、ブラウザがアクセスを提供しますが、BOMからのBOMオブジェクト、オブジェクトを再訪配られた含まれている
ドキュメントを読むためにJSブラウザとブラウザを操作することができDOMオブジェクトに尋ねました

BOMオブジェクトは、何が含まれていますか?

  • JavaScriptのトップレベルのオブジェクト階層ウィンドウは、ブラウザ・ウィンドウを発現しました。
  • ナビゲーターは、クライアントのブラウザに関する情報が含まれています。
  • 歴史は、訪問したブラウザウィンドウにURLが含まれています。
  • 場所は、現在のURLに関する情報が含まれています。
  • 画面はクライアント表示に関する情報が含まれています。

履歴オブジェクト

履歴オブジェクトは、(ブラウザウィンドウ内の)ユーザーが訪問したURLが含まれています

メソッド/プロパティ 説明
長さ ブラウザで履歴リストにURLの数を返します。
バック() URL履歴一覧をロードする前に。
前方() 履歴リストに次のURLをロードします。
行きます() 履歴リスト内の特定のページをロードします

Locationオブジェクト

Locationオブジェクトは、現在のURLに関する情報が含まれています。

プロパティ 説明
ハッシュ 設定またはシャープ記号(#)からの戻りURL(アンカー)が始まりました。
ホスト 設定または現在のURLのホスト名とポート番号を返します。
ホスト名 設定または現在のURLのホスト名を返します。
HREF 設定または完全なURLを返します。
パス名 URLの現在のパス部分を設定または返します。
設定または現在のURLのポート番号を返します。
プロトコル 設定または現在の契約のURLを返します。
調べる または疑問符(?)URL始まる(クエリー部分)から帰国。
方法 説明
割り当てます() 新しいドキュメントをロードします。
リロード(「力」) 現在のドキュメントを再ロードします。オプションのパラメータは、文書のブラウザのキャッシュを取る、その後虚偽を埋めるか、記入しません
交換してください() 新しい文書で現在のドキュメントを置き換えます。

Windowオブジェクト

ウィンドウオブジェクトは、ブラウザウィンドウまたはフレームを表しています。Windowオブジェクトは、クライアント側のJavaScriptでは、
グローバルオブジェクト、すべての式は、現在の環境で計算されています。たとえば、あなただけの文書を書くことができますが、
window.documentを記述する必要はありません。

プロパティ 説明
閉まっている ウィンドウが閉じられたかどうかを返します。
defaultStatus 設定またはデフォルトのテキストウィンドウのステータスバーを返します。(Operaはのみサポート)
資料 読み取り専用ドキュメントオブジェクトへの参照。Documentオブジェクトを参照してください。
歴史 読み取り専用履歴オブジェクトへの参照。パラメータの履歴オブジェクトをしてください。
innerHeightは ドキュメントのウィンドウの表示領域の高さを返します。
innerWidth ドキュメントウィンドウの表示領域の幅を返します。
長さ 設定またはフレームウィンドウの数を返します。
ロケーション Locationオブジェクトウィンドウまたはフレーム。Locationオブジェクトを参照してください。
名前 設定またはウィンドウの名前を返します。
ナビゲーター 読み取り専用ナビゲーターオブジェクトへの参照。引数ナビゲータオブジェクトをしてください。
オープナー このウィンドウにウィンドウを作成するための参照を返します。
outerheight 窓の外付け高さを返します。
outerWidthの 窓の外側の幅を返します。
pageXOffset 設定またはウィンドウ表示領域Xの左上隅に現在のページ位置を返します
pageYOffset 設定またはウィンドウ表示領域の左上隅に対する現在のページのY位置を戻します。
返回父窗口。
Screen 对 Screen 对象的只读引用。 请参数 Screen 对象。
self 返回对当前窗口的引用。 等价于 Window 属性。
status 设置窗口状态栏的文本。 (默认只支持 Opera)
top 返回最顶层的先辈窗口。
window window 属性等价于 self 属性, 它包含了对窗口自身的引用。
screenLeft
screenTop
screenX
screenY
只读整数。声明了窗口的左上角在屏幕上的的 x 坐标和 y 坐标。 IE、 Safari、 Chrome 和 Opera 支持 screenLeft 和 screenTop, 而 Chrome、 Firefox 和 Safari 支持 screenX 和 screenY。
方法 描述
alert() 显示带有一段消息和一个确认按钮的警告框。
blur() 把键盘焦点从顶层窗口移开。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
createPopup() 创建一个弹出窗口。 只有 ie 支持(不包括 ie11)
focus() 把键盘焦点给予一个窗口。
moveBy() 可相对窗口的当前坐标把它移动指定的像素。
moveTo() 把窗口的左上角移动到一个指定的坐标。
open() 打开一个新的浏览器窗口或查找一个已命名的窗口。 window.open(URL,name,features,replace)
print() 打印当前窗口的内容。
prompt() 显示可提示用户输入的对话框。
resizeBy() 按照指定的像素调整窗口的大小。
resizeTo() 把窗口的大小调整到指定的宽度和高度。
scrollBy() 按照指定的像素值来滚动内容。
scrollTo() 把内容滚动到指定的坐标。
setInterval() 按照指定的周期(以毫秒计) 来调用函数或计算表达式。
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
clearInterval() 取消由 setInterval() 设置的 timeout。
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。close() 关闭浏览器窗口

Navigator 对象包含的属性描述了正在使用的浏览器。 可以使用这些属性进行平台专用的配置。 虽然这个对象的名称显而易见的是 Netscape 的 Navigator 浏览器, 但其他实现了 JavaScript 的浏览器也支持这个对象。

属性 描述
appCodeName 返回浏览器的代码名。 以 Netscape 代码为基础的浏览器中, 它的值是 "Mozilla"。Microsoft 也是
appMinorVersion 返回浏览器的次级版本。 (IE4、 Opera 支持)
appName 返回浏览器的名称。
appVersion 返回浏览器的平台和版本信息。
browserLanguage 返回当前浏览器的语言。 (IE 和 Opera 支持)cookieEnabled 返回指明浏览器中是否启用 cookie 的布尔值。
cpuClass 返回浏览器系统的 CPU 等级。 (IE 支持)
onLine 返回指明系统是否处于脱机模式的布尔值。
platform 返回运行浏览器的操作系统平台。
systemLanguage 返回当前操作系统的默认语言。 (IE 支持)
userAgent 返回由客户机发送服务器的 user-agent 头部的值。
userLanguage 返回操作系统设定的自然语言。 (IE 和 Opera 支持)
plugins 返回包含客户端安装的所有插件的数组
方法 描述
javaEnabled() 规定浏览器是否支持并启用了 Java。
taintEnabled() 规定浏览器是否启用数据污点 (data tainting)。

Screen 对象

Screen 对象包含有关客户端显示屏幕的信息。 每个 Window 对象的 screen 属性都引用一个 Screen 对象。 Screen 对象中存放着有关显示浏览器屏幕的信息。 JavaScript 程序将利用这些信息来优化它们的输出, 以达到用户的显示要求。 例如,一个程序可以根据显示器的尺寸选择使用大图像还是使用小图像,它还可以根据显示器的颜色深度选择使用 16 位色还是使用 8 位色的图形。 另外,JavaScript 程序还能根有关屏幕尺寸的信息将新的浏览器窗口定位在屏幕中间。

属性 描述
availHeight 返回显示屏幕的高度 (除 Windows 任务栏之外)。
availWidth 返回显示屏幕的宽度 (除 Windows 任务栏之外)。
bufferDepth 设置或返回调色板的比特深度。 (仅 IE 支持)colorDepth 返回目标设备或缓冲器上的调色板的比特深度。
deviceXDPI 返回显示屏幕的每英寸水平点数。 (仅 IE 支持)
deviceYDPI 返回显示屏幕的每英寸垂直点数。 (仅 IE 支持)
fontSmoothingEnabled 返回用户是否在显示控制面板中启用了字体平滑。 (仅 IE 支持)
height 返回显示屏幕的高度。
logicalXDPI 返回显示屏幕每英寸的水平方向的常规点数。 (仅 IE 支持)
logicalYDPI 返回显示屏幕每英寸的垂直方向的常规点数。 (仅 IE 支持)
pixelDepth 返回显示屏幕的颜色分辨率(比特每像素) 。
updateInterval 设置或返回屏幕的刷新率。 (仅 IE11 以下支持)
width 返回显示器屏幕的宽度。

检测浏览器版本版本有哪些方式?

  • 根据 navigator.userAgent // UA.toLowerCase().indexOf('chrome')
  • 根据 window 对象的成员 // 'ActiveXObject' in window

offsetWidth/offsetHeight,clientWidth/clientHeight 与 scrollWidth/scrollHeight 的区别

  • offsetWidth/offsetHeight 返回值包含 content + padding + border,效果与 e.getBoundingClientRect()相同
  • clientWidth/clientHeight 返回值只包含 content + padding,如果有滚动条,也不包含滚动条
  • scrollWidth/scrollHeight 返回值包含 content + padding + 溢出内容的尺寸

おすすめ

転載: www.cnblogs.com/nayek/p/11729850.html