SlhwSR

Interviewer: Tell me about your understanding of BOM and what common BOM objects do you know?#

1. What is BOM?#

BOM (Browser Object Model) is the browser object model that provides objects for interacting with the browser window independently of its content.

Its purpose is to interact with the browser to achieve certain effects, such as navigating back and forward, refreshing the page, handling browser window changes, scrolling the scrollbar, and obtaining client information such as browser brand, version, and screen resolution.

The entire content of the browser can be considered as the DOM, and the entire browser can be considered as the BOM. The difference is as follows:

2. window#

The core object of BOM is window, which represents an instance of the browser.

In the browser, the window object has a dual role, serving as an interface to the browser window and as a global object.

Therefore, all variables and functions declared in the global scope become properties and methods of the window object.

var name = 'js daily question';
function lookName(){
  alert(this.name);
}

console.log(window.name);  //js daily question
lookName();                //js daily question
window.lookName();         //js daily question

The window control methods are as follows:

• moveBy(x,y): Move the window horizontally by x pixels and vertically by y pixels from its current position. If x is negative, the window will move to the left; if y is negative, the window will move up.
• moveTo(x,y): Move the top-left corner of the window to the point (x,y) relative to the top-left corner of the screen.
• resizeBy(w,h): Adjust the width by w pixels and the height by h pixels relative to the current size of the window. If the parameters are negative, the window will be reduced; otherwise, it will be enlarged.
• resizeTo(w,h): Adjust the width to w pixels and the height to h pixels.
• scrollTo(x,y): If there is a scrollbar, move the horizontal scrollbar to a position x pixels relative to the width of the window, and move the vertical scrollbar to a position y pixels relative to the height of the window.
• scrollBy(x,y): If there is a scrollbar, move the horizontal scrollbar to the left by x pixels and the vertical scrollbar down by y pixels.

window.open() can navigate to a specific URL or open a new browser window.

If the second parameter of window.open() is a name of an existing window or frame, the target window will load the URL specified by the first parameter.

window.open('htttp://www.vue3js.cn','topFrame')
==> < a href=" " target="topFrame"></ a>

window.open() returns a reference to the new window, which is the window object of the new window.

const myWin = window.open('http://www.vue3js.cn','myWin')

window.close() is only used for windows opened by window.open().

The newly created window object has an opener property that points to the original window object that opened it.

3. location#

The URL is as follows:

http://foouser:barpassword@www.wrox.com:80/WileyCDA/?q=javascript#contents

The location properties are described as follows:

Except for hash, modifying any property of location will cause the page to reload with the new URL.

location.reload() can be used to refresh the current page. This method will reload the page from the browser cache if it hasn't changed since the last request.

To force a reload from the server, pass true as a parameter.

4. navigator#

The navigator object is mainly used to retrieve browser properties and distinguish browser types. It has many properties and complex compatibility.

The following table lists the properties and methods defined by the navigator object interface:

5. screen#

The screen object stores information about the client's display outside the browser window, such as pixel width and pixel height.

6. history#

The history object is mainly used to manipulate the browser's URL history, allowing you to navigate forward, backward, or to a specific URL.

The commonly used properties are as follows:

• history.go(): Takes an integer or string parameter to navigate to a page that contains the specified string in the most recent record.

history.go('maixaofei.com')

When the parameter is an integer, a positive number means navigating forward to the specified page, and a negative number means navigating backward to the specified page.

history.go(3) // navigate forward three records
history.go(-1) // navigate backward one record

• history.forward(): Navigate forward one page.
• history.back(): Navigate backward one page.
• history.length: Get the number of history records.