JavaScript Advanced Programming: Chapter 8/9/10/11 BOM and Dom

First, BOM1. What is a BOM?

The BOM (Browser object mode) is a model of browser objects that describes the hierarchical relationship between objects and objects, and the browser object model provides a content-independent object structure that can interact with the browser window. A BOM consists of multiple objects, which represent the window object of the browser windows as the top-level object of the BOM, and the other objects are child objects of that object.

2. Window Object 2.1 Framework and Windows relationship

The Window object refers to the framework instance that exists in the current code and refers to a browser window without introducing a frame. You also need to know about other window relationships:

• Window object: Refers to the framework instance that exists for the current code
• Top object: Always point to the topmost frame, which is the browser window
• Parent object: Refers to the immediate upper frame of the current frame
• Self object: Always point to window, and window can be used interchangeably

2.2 Window position and size

Window position I did not think of any application occasions, here mainly discuss the window size problem. ie9+, Firefox, Safari, Opera, and chrome all provide innerwidth, Innerheight, Outerwidth, and Outerheight properties to determine window information. This property is not supported in IE8 versions, but it provides window-related information through the DOM: Document.documentElement.clientWidth to preserve the width of the page viewport. In IE6, these properties are only valid in standard mode, and in mixed mode, the same information must be saved through Document.body.clientWidth.

 //  compatibility code is as follows   pagewidth = window.innerwidth,pageheight  =  Window.innerheight;  if  (typeof  pagewidth! = "number" ) { if  (Document.compatmode = = "Css1compat" ) {pagewidth  = Document.documentElement.clientWidth;　　PageHeight  = Document.documentElement.clientHeight;  else   {pagewidth  = Document.body.clientWidth;　　PageHeight  = Document.body.clientHeight; }}

The same problem exists for mobile devices. Mainstream browsers support Window.innerwidth to save visible viewports, and IE does not support this property, and Document.documentElement.clientWidth to save page width information.

// Mobile-side compatibility code (best to determine if it is mobile) windows.innerwidth in a responsive layout? ? Windows.innerHeight:document.body.clientHeight;

Note: Innerwidth can be read and writable, while ClientWidth is read-only.

2.3 Navigating and opening windows

2.3.1 Use window.open () to navigate to a specific URL, or to open a new browser window.

Example: var Wroxwin = window.open ("http://www.wrox.com/", "Wroxwindow", "height=400,width=400,top=10,left=10,resizable= Yes ");

Where the first parameter represents the destination URL, the second represents the load page under existing or new frame "Wroxwindow", and the third parameter represents which features are displayed in the new window.

and use Resizeto/moveto/close () to edit the new pop-up window.

2.3.2 window is disabled pop-up

The

Suppress window pop-up may be the browser's built-in blocker, at which time window.open () returns NULL, and there may be other masking tools, which can cause errors. In view of the fact that the ban window is divided into two situations, we need to Windo.open () is encapsulated in a try-catch block.

var false ; Try {    var wroxwin = window.open ("http://www.wrox.com", "_blank");     if NULL ) {        true;     Catch (ex) {    true;} if (blocked) {    alert ("The Popup was blocked!" );}

2.4 Timeout calls and intermittent calls

2.4.1 Timeout call SetTimeOut ()

The timeout call is a total of two parameters, the code to execute, and a millisecond to represent the time. Because passing code as a string can affect performance, it is not recommended to pass strings.

// passing strings is not recommended! setTimeout ("alert (' Hello world! ')", +); // the recommended invocation method is setTimeout (function() {    alert ("Hello world!")  1000);

After calling SetTimeout (), the method returns a numeric ID that represents the time-out call. This timeout call ID is a unique identifier for the plan execution code that can be used to cancel the timeout call. To cancel a time-out call plan that has not yet been executed, you can call the Cleartimeout () method and pass the corresponding timeout call ID as a parameter to it, as shown below.

// Set Timeout Call var timeoutid = setTimeout (function() {    alert ("Hello world!"  ); // Note: remove it cleartimeout (Timeoutid);

Note: The code for the timeout call is executed in the global scope, so the value of this in the function points to the window object in non-strict mode, which is undefined in strict mode.

2.4.2 Intermittent call setinterval ()

Calling the SetInterval () method also returns an intermittent invocation ID that can be used to cancel intermittent calls at some point in the future. To cancel an intermittent call that has not yet been performed, you can use the Clearinterval () method and pass in the corresponding intermittent invocation ID. Canceling an intermittent call is much more important than canceling the timeout call because, without intervening, the intermittent call will be performed until the page is unloaded. The following is a common example of using intermittent calls.

varnum = 0;varmax = 10;varIntervalid =NULL;functionincrementnumber () {num++;//cancels subsequent calls that have not been executed if the number of executions reaches the value set by Max    if(num = =max)    {clearinterval (intervalid); Alert ("Done"); }}intervalid= SetInterval (Incrementnumber, 500);//intermittent calls can also be achieved using a timeout callvarnum = 0;varmax = 10;functionincrementnumber () {num++; //set another timeout call if the number of executions does not reach the value set by Max    if(Num <max) {setTimeout (Incrementnumber,500); } Else{alert ("Done"); }}settimeout (Incrementnumber,500);

As you can see, there is no need to trace the timeout call ID when using a time-out call, because after each code execution, the call stops itself if another timeout call is no longer set. It is generally believed that using a timeout call to simulate intermittent calls is an optimal mode. In a development environment, a real intermittent call is seldom used because the latter intermittent call may be started before the end of the previous intermittent call. Using a time-out call like the one in the previous example would completely avoid this. Therefore, it is best not to use intermittent calls.

JavaScript Advanced Programming: Chapter 8/9/10/11 BOM and Dom