The twenty-eighth day of learning the front end - BOM browser object model

Today we will focus on BOM

1. Introduction of BOM

1. BOM (Browser Object Model) → Browser Object Model.

2. The role of BOM: It mainly provides a way to access and operate various components of the browser.

The window browser window object is the largest object in js. All other objects are sub-objects of window

document document object, representing a web page

location address bar object, some methods for operating the address bar

The navigator browser software object is mainly used to determine what browser the user is using, which can solve compatibility problems

screen screen object, you can get screen-related information

history object, which can perform related operations on the history of the browser

Notice:

• window is the global browser built-in top-level object representing the window opened in the browser (there is no public standard applied to the window object, but all browsers support this object) the Window object represents a browser window or a frame.
• In client-side JavaScript, the Window object is the global object, and all expressions are evaluated in the current environment. That is, no special syntax is needed at all to refer to the current window, and properties of that window can be used as global variables.
  For example, you can just write document instead of window.document.
  Similarly, you can use the method of the current window object as a function, such as only writing alert() instead of Window.alert().
  In addition to the properties and methods listed above, the Window object implements all the global properties and methods defined by core JavaScript.

Second, the common method of window object

1. prompt() displays a dialog that prompts for user input

2. alert() displays an alert dialog with a prompt message and an "OK" button

3. confirm() displays a dialog with a prompt message, "OK" and "Cancel" buttons

4. close() Close the browser window The close() method is used to close the browser window, syntax: window.close();

5. Timer
   a, interval timer setInterval (on) clearInterval (off)
   b, timeout timer setTimeout (on) clearTimeout (off)

6. open() method function: open a new browser window
   a, parameter 1 means open the website address parameter 2 means whether to open a new window parameter 3 means new window style
   b, similar to iframe frameset tag: you can introduce another page in a page a page

Three, location address bar object

1. hostname sets or returns the hostname of the current URL

2. href: Get the full address in the address bar. JS web page jump can be realized. location.href = "http://www.jd.com";

3. pathname: file path and file name

4. protocol: protocol, such as: http://, ftp://

5. hash: Anchor name. Such as: #top

6. search: You can get the query string

7. reload([true]): Refresh the web page. The true parameter means to force refresh
   a. After browsing the webpage, the cache is generally left locally. If it is refreshed normally, the browser will first obtain the resources in the cache instead of requesting from the server to improve the access speed.
   b. Forced refresh is to tell the browser not to obtain the cache, and re-request all resources on the web page from the server, which is suitable for development testing or some resource updates.
   Note: After reassignment of all attributes, the webpage will be automatically refreshed.

8. <meta http-equiv = 'refresh' content = '5;url=http://www.jd.com' />
   The first parameter in content is refreshed after a few seconds, and the second parameter is the address after refreshing

Four, navigator object

1. appName: browser software name appCodeName browser software name is not much reference now

2. appVersion: The core version number of the browser software.

3. platform: platform

4. UserAgent browser version information

Five, history object

1. back() back

2. forward() forward

3. go (value)
   Negative number means back, positive number means forward, the size of the value means how much to go back or forward

Six, screen screen object

1. Width: Returns the width of the screen, a read-only property.

2. Height: Returns the height of the screen, a read-only property.

3. availWidth: The effective width of the screen, excluding the taskbar. Read-only property.

4. availHeight: The effective height of the screen, excluding the taskbar. Read-only property.

Seven, window object events

1. window.onload: This event (condition) is triggered when the web page is loaded, and all the contents of the index mark are loaded.

2. Add a scroll bar event to the window

• onscroll scroll event
• scrolltop Vertical scroll bar scrolling distance
• scrollleft The distance that the horizontal scroll bar scrolls
• window.innerHeight - the visible height of the browser window
• window.innerWidth - the visible width of the browser window
• document.documentElement.scrollTop gets the scrolling distance and will be invalid when we do not define the document type
• document.body.scrollTop Gets the scrolling distance and is used when the document type is not defined
• Compatible writing: var scrolltop = document.documentElement.scrollTop||document.body.scrollTop;

3. window.onresize: When the size of the browser window changes, an event is triggered