BOM Browser Object Model

The model that accesses and operates the browser window is called the browser object model BOM (Browser object models).

BOM overall object graph.

The core is the Window object;

The following are special dual identities:

The Window object is both the global object in the ECMAScript specification and the top-level object in the BOM;

The Document Object is both a property of the BOM top-level object and the top-level object in the DOM model

The location object is both a property of the Window object and a property of the Document object.

1. Window Object (view from two aspects: global objects in the ECMAScript specification and top-level objects in the BOM)

1.1 Window as the global object in the ECMAScript

You can omit window when 1_ references the properties and methods of the Window object. (Just like globle objects)

2_ in the global scope this and window point to the same object, and you can also use self to refer to the Window object, which is the same as: This===window===self.

3_ variables and functions defined in the global scope also become properties and methods of the Window object, but there is a difference between defining properties directly on the Window object:

A, global variables cannot be deleted using delete (equivalent to assigning the property attribute [[[configurable]] to false when defining a property to window),

Properties defined directly on the window object can be deleted using Delete (the property attribute [[[Configurable]] assignment defaults to True when the Window object is defined directly).

If both the global variable and the properties of the Window object are defined, the Delete window property does not work.

B, attempting to access an undefined global variable throws an exception, but accessing the properties of an undefined window object simply returns undefined. (This feature can be used very well to detect compatibility)

varname = ' Games ';//variables and functions defined in the global scope become properties and methods of the Window object, but cannot be deleted using deletefunctionGetName () {return  This. Name;                       Console.info (Window.name); // GamesConsole.info (Window.getname ());// GamesConsole.info ( This= = window);//trueConsole.info ( This= = self);//trueConsole.info (window = = self);//trueWindow.name= ' Kobe ';//defining a property directly on the Window object modifies the value of the global variable and, conversely, modifies the value of the global variable, and the property value of the Window object is also modifiedconsole.info (name);DeleteWindow.name;//both the global variable and the property defined on the Window object are deleted without an error, but it does not workConsole.info (name);//KobeConsole.info (Window.name);//KobeWindow.team= ' Cavs ';//define properties directly on the Window object, you can use Delete to deleteConsole.info (window.team);DeleteWindow.color;console.info (Window.color); //undefined

1.2 Window as the top-level object in the BOM

1.2.1 Browser entire window with frame

When there is no child frame: window, self, top, and parent are all equal, referring to the topmost frame, the browser window.

When there is a child frame: window, self, and top are the topmost frames, and the parent points to the immediate upper frame of the current frame.

　　

If the page contains frames, each frame has its own window object and is saved in the frames collection of the parent window.

The corresponding Window object can be accessed by index (starting at 0, from left to right, top to bottom) or by the frame name Name property . Each Window object has a Name property, which represents the frame in which it is located.

// here is a page that includes frames 
 
1.2.2 Window as the primary method for the top-level object:

 
 

  
  
 
   
 
    
 
    
Method name
 
    
Description
 
   
 
   
 
    
Open a new window
 
    
Open ()
 
    
Returns a reference to the newly opened window that allows you to continue working on the new window
 
   
 
   
 
    
 
    
 
    
 
   
 
   
 
    
Where the window moves to
 
    
MoveTo (x, y)
 
    
X and y indicate that the x and Y coordinate values for the new position apply only to the outermost window object
 
   
 
   
 
    
Dimensions of window movement
 
    
Moveby (x, y)
 
    
X and y indicate that the number of pixels moved in both horizontal and vertical directions applies only to the outermost window object
 
   
 
   
 
    
 
    
 
    
 
   
 
   
 
    
Window width High size
 
    
Resizeto (x, y)
 
    
X and y indicate that the new width and new height of the browser window apply only to the outermost window object
 
   
 
   
 
    
Window width height change size
 
    
Resizeby (x, y)
 
    
X and y indicate that the width and height variation of the browser window applies only to the outermost window object
 
   
 
   
 
    
 
    
 
    
 
   
 
   
 
    
Prompt box
 
    
Alert ()
 
    
Prompt box-Contains the passed-in string and the OK button when displayed
 
   
 
   
 
    
Confirmation box
 
    
Confirm ()
 
    
Confirm Box-click "Confirm" to return True, click "Cancel" to return false
 
   
 
   
 
    
Text input Box
 
    
Prompt ()
 
    
The Confirm button (which returns the contents of the Text entry field), the Cancel button (return null), and the text input field.
 
   
 
   
 
    
Search dialog box
 
    
Find ()
 
    
Equivalent to using the Find command in the browser menu bar to open the dialog box
 
   
 
   
 
    
Print dialog box
 
    
Print ()
 
    
Use the Print command in the browser menu bar to open the dialog box
 
   
 
   
 
    
 
    
 
    
 
   
 
   
 
    
Timer only executes once
 
    
SetTimeOut ()
 
    
Parameters are: The time to wait (in milliseconds) to execute a function or code, before executing the code
 
   
 
   
 
    
Cancel One timer
 
    
Cleartimeout ()
 
    
argument is a reference to settimeout ()
 
   
 
   
 
    
Loop execution
 
    
SetInterval ()
 
    
Parameters are: The interval between executing a function or code, looping through code (in milliseconds)
 
   
 
   
 
    
Cancel Loop execution
 
    
Clearinterval ()
 
    
argument is a reference to SetInterval ()
 
   
 
  
 
 
Compatibility: properties that represent window positions are screenleft, Screentop, ScreenX, ScreenY, properties that represent window sizes innerwidth, Innerheight, Outerwidth, Outerheight, But their specific meanings are closely related to different browsers. The JS framework is recommended for dealing with browser differences.
2. History Object
The history object holds the historical record from the window being opened, and each browser window, tab, frame has its own.
The main properties and methods of the history object are:

 
 

  
  
 
   
 
    
Property or method
 
    
Description
 
    
Example
 
   
 
   
 
    
Length
 
    
The number of history records
 
    
Judged as the first window: if (history.length = = 0)
 
   
 
   
 
    
Go ()
 
    
0 means refreshing the page
 
    
History.go (0);
 
   
 
   
 
    
 
    
A negative number indicates a backward jump
 
    
History.go (-1);
 
   
 
   
 
    
 
    
A positive number indicates a forward jump
 
    
History.go (1);
 
   
 
   
 
    
 
    
A string parameter that represents the most recent location to jump to the history that contains the string
(May go forward, may also retreat)
 
    
History.go (' NBA ');
 
   
 
   
 
    
Back ()
 
    
Back one page, can imitate the browser "back" button
 
    
History.back (); equivalent to History.go (-1);
 
   
 
   
 
    
Forward ()
 
    
Forward one page, can imitate the browser "forward" button
 
    
History.forward (); equivalent to History.go (1);
 
   
 
  
 
 
3. Location Object
The Location object provides information about the document loaded in the current window and some navigational functions;
 It is both a property of the Window object and a property of the Document object.
The main attributes are:

 
 

  
  
 
   
 
    
Property
 
    
For example
 
    
Description
 
   
 
   
 
    
Href
 
    
Http://www.nba.com
 
    
Returns the current full URL address ==location.tostring ()
 
   
 
   
 
    
Host
 
    
Www.nba.com:80
 
    
Returns the server name and port number
 
   
 
   
 
    
Hostname
 
    
Www.nba.com
 
    
Return server name
 
   
 
   
 
    
Port
 
    
8080
 
    
Returns the port number specified in the URL, if not, returns an empty string
 
   
 
   
 
    
Pathname
 
    
/games/2015
 
    
Returns the directory and file name in the URL
 
   
 
   
 
    
Protocol
 
    
http
 
    
Returns the protocol used by the page, usually http: or https:
 
   
 
  
 
 
The main methods are:

 
 

  
  
 
   
 
    
Method
 
    
For example
 
    
Description
 
   
 
   
 
    
Search
 
    
？ Username=games
 
    
Returns the query string for the URL, starting with a question mark
 
   
 
   
 
    
Assign ()
 
    
Location.assign (URL)
 
    
Opens the new URL immediately and generates a record in the browser history, equivalent to setting the Location.href value directly,
You can also modify other properties of the location object to reload
 
   
 
   
 
    
Replace ()
 
    
Location.replace (URL)
 
    
Opens a new URL, but does not generate a history, and after using replace (), the user cannot return to the previous page by "Back"
 
   
 
   
 
    
Reload ()
 
    
Location.reload ([true])
 
    
Reloads the current page, which is loaded in the most efficient way (possibly loaded from the cache) without passing parameters.
Forces a reload from the browser when True is passed in
 
   
 
  
 
 
In common cases, the parameter key value pairs that are appended to the URL are added separately to the object to save. For example url?username=games&age=31, take out args["username"]= "Games", args[' age ']=31;
functionGetquerystringargs () {//multiple variable declarations with a comma separating available Var            varQS = (location.search.length > 0? location.search.slice (1): ""),//What if? After no data, an empty array is returned, and the question mark before the query string is removedargs = {},//empty objects are used to receive dataItems = qs.length? Qs.split ("&"): [],//separating parameters with &item =NULL, name=NULL, Value=NULL, I= 0, Len=items.length;  for(i=0; i < Len; i++) {//loop processing, adding the name and value of each parameter to the parameter objectItem = items[i].split ("=");//split by equal sign, returns an arrayName = decodeURIComponent (item[0]);//for encoding processingValue = decodeURIComponent (item[1]); if(name.length) {Args[name]= value;//Key-value pairs are added to the object                }            }                        returnargs; }         varargs = Getquerystringargs ();//Suppose the query string returns? username=gamest&age=31Console.info (args["Usename"]);//"Gamest"Console.info (args["num"]);//"Ten"
4. Navigator Objects
The Navigator object is used to describe the browser itself, including information such as the browser's name, version, language, system platform, user attribute string , and so on.
But the implementation of this object varies between browsers and different versions of the browser.
Feature detection:
It is not recommended to use Navigator's methods or properties to detect browser versions directly, and if you are using a specific method, you can use feature detection if you are concerned about compatibility.
function getelement (ID) {    if (document.getElementById){                       // feature detection, if supported, Priority to use document.getElementById ()        return  document.getElementById (ID);        } Else     {        return Document.all[id];                       // returns document.all if the getElementById method is not supported     }}
Feature detection doesn't always work,
5. Screen Object
The screen object is used to indicate the capabilities of the client display. A number of site tracking tools used to measure client capabilities.
Includes information about the display outside the browser window, such as pixel width and height, and the screen object in each browser contains different properties.
The properties that are supported by the five major browsers are:

 
 
 
  
  
 
   
 
    
Property
 
    
Description
 
   
 
   
 
    
Height
 
    
The pixel height of the screen
 
   
 
   
 
    
Width
 
    
The pixel width of the screen
 
   
 
   
 
    
Availheight
 
    
The value of the screen's pixel height minus the system part height
 
   
 
   
 
    
Availwidth
 
    
The pixel width of the screen minus the value after the system part width
 
   
 
  
 
 
 
Example: Resizing a browser window to occupy the free space on the screen
Window.resizeto (Screen.availwidth, screen.availheight);
6. Document Object
The Document Object is both a property of the BOM top-level object and a top-level object in the DOM model, summarized together in the DOM.
BOM Browser Object Model