Introduction to JavaScript BOM

Composition of JavaScript

The JavaScript foundation is divided into three parts:

  • ECMAScript: Syntax Standard for JavaScript. Including variables, expressions, operators, functions, if statements, for statements, etc.

  • DOM: document object model, API for manipulating elements on Web pages. For example, let the box move, change color, rotate pictures, etc.

  • BOM: browser object model, API for operating some functions of the browser. For example, let the browser scroll automatically.

What is BOM

BOM: Browser Object Model.

BOM structure diagram:

It can also be seen from the above figure:

  • Window object is the top-level (core) object of BOM. All objects are extended through it, which can also be called sub objects of window.

  • The more DOM is a part of BOM.

window object:

  • The window object is a top-level object in JavaScript.

  • Global variables and user-defined functions are also attributes and methods of window objects.

  • When calling properties and methods under the window object, you can omit window.

Let's talk about the common built-in methods and built-in objects of BOM.

The system dialog box pops up

For example, alert(1) is short for window.alert(1) because it is a child method of window.

There are three types of system dialog boxes:

	alert();	//The appearance is different in different browsers
	confirm();  //Poor compatibility
	prompt();	//Not recommended

Open window, close window

1. Open window:,target,param)

Parameter interpretation:

  • url: the address to open.

  • target: the location of the new window. Can be:_ blank ,_ self, _ Parent parent frame.

  • param: some settings for the new window.

  • Return value: handle to the new window.

param is a parameter that can be filled with various parameters (), such as:

  • Name: name of the new window; can be blank

  • features: attribute control string. Various attributes in this control window are separated by commas.

  • Fullscreen = {yes / no / 1 / 0} full screen, no by default

  • Channelmode = {yes / no / 1 / 0} whether to display the channel bar. The default is No

  • Toolbar = {yes / no / 1 / 0} whether to display toolbar. No by default

  • Location = {yes / no / 1 / 0} whether to display the address bar. The default is No. (some browsers do not necessarily support it)

  • Directions = {yes / no / 1 / 0} whether to display the steering button. The default is No

  • Status = {yes / no / 1 / 0} whether to display the window status bar. The default is No

  • Menubar = {yes / no / 1 / 0} show menu or not, no by default

  • Scrollbars = {yes / no / 1 / 0} whether to display scroll bars. The default is yes

  • Resizable = {yes / no / 1 / 0} is the window resizable? No by default

  • width=number window width (in pixels)

  • height=number window height (in pixels)

  • top=number the distance (in pixels) from the window to the top of the screen

  • left=number the distance from the window to the left of the screen (in pixels)

Just separate the parameters with commas, but we'd better put them in json.

2. Close window: window.close()

(1) And (2):

<!DOCTYPE html>
<head lang="en">
    <meta charset="UTF-8">
<a href="javascript:;">Click me to open a new page</a>
<a href="javascript:;">Click me to close this page</a>
    //New window = (address, whether to open a new window, various parameters of the new window);
    var a1 = document.getElementsByTagName("a")[0];
    var a2 = document.getElementsByTagName("a")[1];
    a1.onclick = function () {
//Example 1:“ ","_blank");
        var json = {
            "name": "helloworld",
            "fullscreen": "no",
            "location": "no",
            "width": "100px",
            "height": "100px",
            "top": "100px",
            "left": "100px"
        };"", "_blank", json); / / example 2

    //Close this page
    a2.onclick = function () {

3. New window related:

  • New window. moveTo(5,5)

  • New window. moveBy()

  • New window. resizeTo()

  • window.resizeBy()

Code example:

        var newWin ="demo.html", "_blank", json);
        newWin.moveTo(500, 500);

location object

window.location can be abbreviated as location. Location is equivalent to the browser address bar and can parse the url into independent fragments.

Properties of the location object

  • href: Jump

  • hash returns the content in # the url, including#

  • host hostname, including port

  • Hostname hostname

  • Pathname the path part of the URL

  • The protocol protocols are generally http and https

  • search query string

Example of location.href attribute:

**Example 1: * * click the box to jump.


    var div = document.getElementsByTagName("div")[0];

    div.onclick = function () {
        location.href = "";   // When you click div, you jump to the specified link
 //"","_blank");  // Mode II


Example 2: automatically jump to Baidu after 5 seconds.

Sometimes, when we visit a non-existent web page, we will be prompted to automatically jump to the specified page after 5 seconds. At this time, we can use location. give an example:


    setTimeout(function () {
        location.href = "";
    }, 5000);

Method of location object

  • location.assign(): change the address of the browser address bar and record it in the history

Setting location.href will call assign(). Location.href is generally used to jump between pages.

  • location.replace(): replaces the address in the browser address bar and will not be recorded in the history

  • location.reload(): reload

navigator object

Some properties of window.navigator can obtain some information of the client.

  • userAgent: system, browser)

  • platform: Browser supported system, win/mac/linux

give an example:


The effects are as follows:

Tags: Javascript html css

Posted on Fri, 19 Nov 2021 13:25:03 -0500 by Brendan