Introduction to the five objects existing in BOM

People on earth who have studied front-end development should all know that JavaScript is divided into three parts: ECMAScript (the basic syntax of the JS language itself), DOM (Document Object Model, Application Programming Interface), and BOM (Browser Object Model).

BOM is actually related to the browser. Therefore, browser manufacturers can freely extend it according to their own ideas (expansion based on window objects). However, extensions are extensions, and each browser follows a set of standards. Learning BOM is still very important for understanding the language of JS, so it cannot be ignored. The following is my summary and some common methods. I will not go into details about how to use each method. The main purpose of this article is to hope that BOM will form a simple framework in our minds. Know some common methods and you can trace them back to the source when you encounter problems.

There are five objects in the BOM:

1. ##window object (core object)

2. location object (that is, window object attributes, which are also attributes of the document object)

3. navigator object

4. history object: Not used so far

5. Screen object: never used so far

There are some properties and methods under each object. Several common and commonly used methods are listed below, and are given below. Simple instructions.

• Common methods of window object (core object)

• Asynchronous: XMLHttpRequest constructor

• Number data type: Number, parseInt, parseFloat, isNaN, isFinite

##Timer: setTimeout, setInterval. What I want to explain here is that this in the callback function in setTimeout will point to the window object. The reason is actually very simple. When the callback function is passed to setTimout as a parameter, the implicit assignment of this occurs. Another thing to note is the execution order of setTimeout.
url encryption: encodeURI, encodeURIComponent method
url decryption: decodeURI, decodeURIComponent method
Window size: (innerWidth, innerHeight) (outerWidth, outerHeight), which should be distinguished from the client dimension and offset dimension in the DOM, that is, clientWidth(Height) and offsetWidth(Height)
Window position: (screenLeft, screenRight) (screenX, screenY)
Open a new window: open method, this method can receive three parameters
System dialog box: alert, confirm, prompt methods

location object
href attribute: Get url Address, (you can also set the url address through this attribute)
protocal attribute: Returns the protocol used by the page, (you can also set the protocol through this attribute)
Host attribute: Returns the server name and port number, including hostname + port. (You can also set host through this attribute)
Hostname attribute: Returns without port number Server name, (hostname can also be set through this attribute)
port attribute: Returns the port number, (port can also be set through this attribute)
pathname attribute: Returns the url directory or file name, (you can also set the pathname through this attribute)
hash attribute: returns the hash (#content) in the url, (you can also set it through This attribute sets hash)
Search attribute: query string (such as?name=keith&height=180), (You can also set search through this attribute)
reload method: The page is loaded in the most efficient way. That is, if the page has not changed since the last request, the page will be loaded from the browser cache. If you want to force a reload from the browser, you can pass a boolean value of true.

navigator object
userAgent: User agent, query the browser information used by the user. On the mobile side, it can be used to determine what type of mobile device or browser the user is using

The above is the detailed content of Introduction to the five objects existing in BOM. For more information, please follow other related articles on the PHP Chinese website!