Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to use JavaScript's BOM technology". The content of the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to use JavaScript's BOM technology".

1. Overview of BOM

BOM = Browser Object Model browser object model

It provides objects that interact with browser windows independent of content, and its core object is window

BOM consists of a series of related objects, and each object provides many methods and properties

BOM lacks standards, the standardization organization of JavaScript syntax is ECMA, the standardization organization of DOM is W3C, and BOM was originally part of the Netscape browser standard.

DOMBOM document object model browser object model DOM treats the document as an object, treats the browser as an object, the top object of DOM is the top object of documentBOM, the top object of windowDOM is the operation of page elements, BOM learns some objects of browser window interaction, DOM is the W3C standard specification BOM is defined by browser manufacturers on their respective browsers, poor compatibility 1.1, the composition of BOM

BOM is bigger than DOM. It contains DOM.

The window object is the top-level object of the browser, which has a dual role

It is an interface for JS to access the browser window

It is a global object. Variables and functions defined in the global scope become properties and methods of the window object.

You can omit window when calling, and the dialogs you learned earlier belong to window object methods, such as alert (), prompt (), and so on.

Note: a special attribute window.name under window

/ the variable defined in the global scope will become the property of the window object var num = 10 position console.log (window.num); / / 10 console.log / the function defined in the global scope will become the method function fn () {console.log (11);} console.fn (); / / 11var name = 10 of the window object; / / do not use this name variable, there is a special property window.nameconsole.log (window.num) under window 2. Common events of window objects 2.1, window loading events

_ window.onload is a window (page) loading event, which will be triggered when the document content is fully loaded (including images, script files, CSS files, etc.).

_ window.onload = function () {}; / / or window.addEventListener ("load", function () {})

Note:

With _ window.onload, you can write the JS code to the top of the page element

Because onload waits for the page to be loaded, and then executes the processing function

_ window.onload traditionally registers events, which can only be written once

If there are more than one, the last _ window.onload will prevail

There are no restrictions if you use addEventListener

Document.addEventListener ('DOMContentLoaded',function () {})

Receive two parameters:

When the DOMCountentLoaded event is triggered, only when the DOM is loaded, excluding stylesheets, pictures, flash, etc.

If there are a lot of pictures on the page, it may take a long time from user access to onload trigger.

The interaction effect cannot be achieved, which will inevitably affect the user's experience, so it is more appropriate to use DOMContentLoaded events at this time.

2.1.1, difference

Load and other page contents have been loaded, including page dom elements, pictures, flash,css, etc.

DOMContentLoaded is loaded by DOM and can be executed without pictures such as flash css. The loading speed is faster than load.

/ / _ window.onload = function () {/ / var btn = document.querySelector ('button'); / / btn.addEventListener (' click', function () {/ / alert ('Click me'); / /}) /} / / _ window.onload = function () {/ / alert (22) / /} window.addEventListener ('load', function () {var btn = document.querySelector (' button'); btn.addEventListener ('click', function () {alert (' click me';})}) window.addEventListener ('load', function () {alert (22)) }) document.addEventListener ('DOMContentLoaded', function () {alert (33);}) / / load and other page contents have been loaded, including page dom elements, pictures, flash css, etc. / / DOMContentLoaded is DOM loaded, and the loading speed is faster than load, window resizing events can be performed without image falsh css, etc.

_ window.onresize is a handler that is called when the window resize load event is triggered

_ window.onresize = function () {} / / or window.addEventListener ('resize',function () {})

This event will be triggered whenever the size of the window changes in pixels

We often use this event to complete a responsive layout. The width of the current screen of window.innerWidth

Window.addEventListener ('load', function () {var p = document.querySelector (' p'); window.addEventListener ('resize', function () {console.log (window.innerWidth); console.log (' changed'); if (window.innerWidth)

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.