JavaScript BOM beginner notes

1. BOM overview

1.1 What is BOM

• BOM ( Browser Object Model ) is the browser object model , which provides an object that interacts with the browser window independently of content . The core object is window .
• BOM is composed of a series of related objects , and each object provides many methods and attributes .
• BOM lacks standards. The standardization organization for JavaScript syntax is ECMA, and the standardization organization for DOM is W3C. BOM was originally part of the Netscape browser standard.

Comparison of DOM and BOM:

1.2 The composition of BOM

BOM is bigger than DOM, it contains DOM

The window object is the top-level object of the browser, and it has a dual role:

1. It is an interface for JS to access the browser window

2. It is a global object . Variables and functions defined in the global scope will become properties and methods of the window object . You can omit window when calling. The dialog boxes learned earlier belong to the window object methods, such as alert(), prompt()etc.
   Note: A special property under windowwindow.name

2. Common events of the window object

2.1 Window loading event

window.onload = function(){};

window.addEventListener("load",function(){});

window.onloadIt is a window (page) loading event. When the document content is completely loaded, this event ( including images, script files, CSS files, etc. ) will be triggered , and the processing function is called.

note:

1. Once you have window.onloadit, you can write the JS code above the page elements, because you onloadwait for the page content to be fully loaded before executing the processing function
2. window.onloadThe traditional way of registering events can only be written once , if there are more than one, the last one will window.onloadprevail
3. addEventListenerNo restrictions if used

---

document.addEventListener('DOMContentLoaded',function(){});

DOMContentLoadedWhen the event is triggered, only when the DOM is loaded , excluding style sheets, pictures, flash, etc.

If there are many pictures on the page, it onloadmay take a long time from user access to triggering, and the interactive effect will not be realized, which will inevitably affect the user's experience. At this time, it is DOMContentLoadedmore appropriate to use events.

2.2 Resize window event

window.onresize = function(){};

window.addEventListener("resize",function(){});

window.onresizeIt is the processing function that is called when the window size loading event is adjusted.

note:

1. This event will be triggered whenever the window size changes in pixels
2. We often use this event to complete responsive layout. window.innerWidth: The width of the current screen

3. Timer

3.1 setTimeout() timer

window.setTimeout(调用函数, [延迟的毫秒数]);

note:

1. window can be omitted
2. This calling function can write the function directly , or write the function name or take the three forms of string "function name()" . The third is not recommended
3. The delay in milliseconds is omitted, the default is 0, if you write, it must be milliseconds
4. Because there may be many timers, we often assign an identifier to the timer

Stop the timer:

window.clearTimeout(timeoutID);

3.2 setInterval() timer

window.setInterval(回调函数, [间隔的毫秒数]);    // 每隔一定时间，就去调用一次回调函数

note:

1. window can be omitted
2. This calling function can be directly written in the function , or written in the function name or in three forms of string "function name ()"
3. The milliseconds of the interval is omitted. The default is 0. If you write, it must be milliseconds, which means that this function is automatically called every milliseconds.
4. Because there may be many timers, we often assign an identifier to the timer
5. The first execution is executed after an interval of milliseconds, and then executed every millisecond

Stop the timer:

window.clearInterval(intervalID);

4. The location object

4.1 What is a location object

The window object provides us with a location property to get or set the URL of the window , and it can be used to parse the URL . Because this property returns an object, we also call this property a location object .

4.2 URL

Uniform Resource Locator (URL) is the address of a standard resource on the Internet. Every file on the Internet has a unique URL, which contains information that indicates the location of the file and how the browser should handle it.

format:

protocol://host[:port]/path/[?query]#fragment

4.3 Properties of the location object

4.4 Methods of the location object

5. navigator object

The navigator object contains information about the browser . It has many attributes. The most commonly used one is userAgent , which can return the value of the user-agent header sent by the client to the server .

Determine which terminal the user uses to open the page and realize the jump:

if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|
Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS
|Symbian|Windows Phone)/i))) { 
    window.location.href = "";     //手机 
 } else { 
    window.location.href = "";     //电脑 
 }

6. history object

The window object provides us with a history object to interact with the browser history . This object contains the URL that the user (in the browser window) has visited .