JS BOM basic summary

First, what is BOM

　　BOM：Browser Object Model

　　　　BOM: browser object model, the object structure provides independent and interact with the content in the browser window.

　　　　BOM is constituted by a series of related objects, and each object provides a number of methods and properties;

　　　　BOM is mainly used for communication between the management window to window, so the core object is window, other objects are sub-objects of the object.

 

　　　　Common Object:

 

 

window	It represents the browser window that opens	Emphasis
location	Current browser URL information	it works
history	User visited URL in the browser window	Somewhat
navigator	Information about the browser itself	seldom use it
screen	Client information screen	seldom use it

 

Note: The document object BOM separately.

 

Two, BOM objects

　　1, window objects

　　　　 js window object is the top-level object, all the variables defined in the global scope, the function will become properties and methods of the window object, the window can be omitted at the time of the call.

 

　　　　Commonly used window object attributes:

 

innerHeight	Returns the height of the window display area of ​​the document.
innerWidth	Returns the width of the display area of ​​the document window.
outerHeight	Returning External height of the window, including toolbars and scroll bars.
outerWidth	Returns the outer width of the window containing the toolbar scrollbar.
pageXOffset	Sets or returns the current page position relative to the upper left corner of the window display region X.
pageYOffset	Sets or returns the Y position of the current page relative to the upper left corner of the window display region.
screenLeft	Returns the x coordinate of the window relative to the screen
screenTop	Returns the y coordinate of the window relative to the screen
screenX	Returns the x coordinate of the window relative to the screen
screenY	Returns the y coordinate of the window relative to the screen

 

　　　　Common window object methods:

alert()	Display a warning message box with a period and a confirmation button.
confirm()	Some display a dialog box with a message and an OK button and Cancel buttons.
prompt()	Display dialog can prompt for user input.
getSelection()	A Selection object representing the current position of the text cursor or range selected by the user.
getComputedStyle()	Gets CSS styles specified elements.
moveBy()	Current coordinates relative to the window can move it to the specified pixel.
moveTo()	Upper left corner of the moving window to a specified coordinates.
resizeBy()	Resize the window according to the specified pixels.
resizeTo()	The size of the window is adjusted to the specified width and height.
scrollBy()	According to the pixel values ​​specified by the scrolling content.
scrollTo()	Scroll to the contents of the specified coordinates.
setInterval()	The specified period (in milliseconds) to the calling function or calculation expression. (Infinite loop)
clearInterval()	Cancellation timeout by the setInterval () settings.
setTimeout()	Calling function or the calculation expression after a specified number of milliseconds. (Delay function, performed only once)
clearTimeout()	Cancel the timeout set by setTimeout () method.

Note: The last two pairs of the most important function of time, with the most frequent and basic page all dynamic effects to be dependent function of time.

　　JS have characteristics: single-threaded asynchronous nonblocking, alert (), confirm (), prompt () function is a three pop obstructive (get stuck, the code does not continue execution) of the JS unfriendly caution.

 

　　2, location target

　　　　

　　　　location object contains information about the current URL.

　　　　Common attributes and methods:

　　　　　　　　　　　　window.location.href; get the address of the current address bar

　　　　　　　　　　　　window.location.href = "http://www.baidu.com"; set the address of the current address bar: Jump

　　　　　　　　　　　　window.location.reload (); Refresh

　　　　　　　　　　　　window.location.reload (true); force a refresh

　　　　　　　　　　　　window.location.assign (url) specified URL to load a new document, you can click Back to return on a page.

　　　　　　　　　　　　window.location.replace(url) 　　　　加载 URL 指定的文档来替换当前文档，没有后退返回上一页。

注：可以省略　　window.　　

 

　　3、history对象

　　　　history 对象包含用户（在浏览器窗口中）访问过的 URL。为了保护用户隐私，对 JavaScript 访问该对象的方法做出了限制。

　　　　常用属性和方法：

　　　　　　　　　　　　window.history.length;　　　　返回历史记录中URL的数量

　　　　　　　　　　　　window.history.forword();　　   上一步，前一个 URL

　　　　　　　　　　　　window.history.back();　　　　下一步，下一个 URL

　　　　　　　　　　　　window.history.go(0);　　　　  接收参数 0 表示刷新当前页面

　　　　　　　　　　　　window.history.go(2);　　　　  接收正整数 表示前进2个页面

　　　　　　　　　　　　window.history.go(-2);　　　　 接收负整数 表示后退2个页面

注：可以省略　　window.

 

　　4、screen对象

　　　　screen对象包含有关客户端显示屏幕的信息。

　　　　常用属性和方法：

　　　　　　　　　　　　screen.availWidth 　　　　　　 返回屏幕的宽度，以像素计，减去界面特性，比如窗口任务栏

　　　　　　　　　　　　screen.availHeight　　　　　　 返回屏幕的高度，以像素计，减去界面特性，比如窗口任务栏

　　　　　　　　　　　　screen.width　　　　　　　　　返回屏幕的总宽度

　　　　　　　　　　　　screen.height　　　　　　　　  返回屏幕的总高度

注：已省略window.

 

　　5、navigator对象

　　　　navigator对象包含有关浏览器的信息。

　　　　常用属性和方法：

　　　　　　　　　　　　navigator.appName　　　　　　 返回浏览器的名称

　　　　　　　　　　　　navigator.appVersion　　　　　  返回浏览器的平台和版本信息

　　　　　　　　　　　　navigator.platform　　　　　　　返回运行浏览器的操作系统平台

注：已省略window.