This is the first day of my participation in Gwen Challenge

When I first learned front-end, I heard BOM and DOM. As I learned more and more about them, I naturally had no problem in dealing with work, but I never learned systematically. Today, the little Red book, do a check.

BOM (Browser Object Model) is a front-end Browser environment that provides methods for JS to invoke Browser capabilities, including Window, location, Navigator, History, and Screen (not commonly used).

1. window

Window is a global JS environment. In non-strict mode, this refers to window. Window mainly provides the following types of methods:

  • Open: Opens a new TAB
  • SetTimeout /setInterval: delay execution function
  • Alert/confirm/promot/console: browser dialog box and the console output

Windows allows you to add attributes, and libraries like jQuery expose an object to be mounted on the window for easy use.

2. location

Location is used for operations related to the address bar. It can be used to obtain the current URL or jump to the page. The main methods are as follows:

  • Href: readable and writable, returns the current URL when read, and jumps to the target page when assigned
  • Pathname: Obtains the URL path
  • Reload: refreshes the current page

3. navigator

Navigator is related to navigation. It is commonly used to judge the browser language and obtain UA, etc. The common methods are as follows:

  • Platform: Obtain the operating system type.
  • UserAgent: Obtains UA.
  • OnLine: Check whether you are offline. This is useful for checking whether you are disconnected from the network

4. history

History is a browser history correlation, which allows you to use JS to move forward and backward.

  • Go: to advance to a page, or back a few pages if it is a negative integer
  • Back: a page back, equivalent to history.go(-1)
  • Go (1)

5. screen

Screen is not commonly used. It holds information about the display, such as the following two properties to obtain the resolution of the display:

  • Width: indicates the pixel width of the display
  • Height: indicates the pixel height of the monitor

Knowing the above, we can have a comprehensive understanding of the basic composition of BOM, and more detailed API usage, we can use MDN documents to strengthen.

Reference: Chapter 8 of the Little Red Book