Js--BOM detailed explanation

Posted Jun 16, 20202 min read

Js--BOM detailed explanation

Blog description

The information involved in the article comes from the Internet collation and personal summary, which means personal learning and experience summary. If there is any infringement, please contact me to delete, thank you!


Browser Object Model Browser Object Model

Encapsulate the components of the browser into objects


  • Window:window object
  • Navigator:browser object
  • Screen:display screen object
  • History:History object
  • Location:address bar object

Window:window object

  1. Create

  2. Method

    • Methods related to popups:

      A warning box with a message and a confirmation button is displayed.

      A dialog box with a message and confirmation button and cancel button is displayed.

      return value:

      If the user clicks the OK button, the method returns true
      If the user clicks the cancel button, the method returns false

      A dialog box that prompts the user for input is displayed.

      return value:

      Get the value entered by the user

    • Methods related to opening and closing:

      Close the browser window.


      Open a new browser window

      Return new Window object

    • Ways related to timers

    • Call the function or calculation expression after the specified number of milliseconds.

      Return value:unique identifier, used to cancel the timer


      Cancel the timeout set by the setTimeout() method.


      Call the function or calculation expression at the specified period(in milliseconds).

      Cancel the timeout set by setInterval().

  3. Properties:

    1. Get other BOM objects:
    2. Get the DOM object
  4. Features

    • Window objects can be used directly without creating. window.method name();
    • The window reference can be omitted. Method name();

Location:address bar object

  1. Create(acquire):

    1. window.location
    2. location
  2. Method:

    • reload() Reload the current document. Refresh
  3. Properties

    • href Set or return the complete URL.

History:History object

  1. Create(acquire):

    1. window.history
    2. history
  2. Method:

    • back() loads the previous URL in the history list.

    • forward() loads the next URL in the history list.

    • go(parameter) loads a specific page in the history list.

      • Parameter:

        • Positive number:advance several historical records
        • Negative number:go back a few historical records
  3. Properties:

    • length returns the number of URLs in the history list of the current window.


Dark Horse Programmer

And hardworking self