Learn JavaScript basics in one step (7): BOM and Dom

First, what is the BOM, what is the DOM

The BOM is the browser object model, which is mainly used to access some browser functions that are not related to Web pages. such as: window, location, navigator, screen, history and other objects.

The DOM is the Document object model, the API for HTML (or XML) documents (application programming interfaces). Depicts a hierarchical tree of nodes in which developers can add, modify, and delete portions of a page.

Second, detail BOM object 1, Window object

The Window object represents an instance of the browser and is also the Global object specified by the ECMAScript. (Global: All properties and functions defined in the global scope are properties of global objects.) In the browser the global object is actually implemented by the Window object )
global scope ( All global objects can be accessed through window )

var str = "Zhang San"; function Fun () {    alert (str);} //Global objects can be accessed through the Properties of window 

Pop-up window

window.open ("http://www.baidu.com", "Newwin", "height=400,width=400");

The third parameter may also have values such as :

Intermittent calls and timeout calls (setTimeout, setinterval)

We all know that JavaScript is single-threaded, but we can execute the specified code at a specific time through intermittent calls and timeout calls.

• Intermittent invocation (SetTimeout)

such as: setTimeout (function() {alert ("Hello world!");}, +); will be executed in milliseconds after

• If you want to cancel the execution before the intermittent time, we can

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

• We can also implement a timeout call by intermittently invoking the simulation

function Fun () {    //.... Some logic setTimeout can be implemented here    (Fun (), +);} Fun ();

Of course, through the simulation of the timeout call and the actual setinterval is still different, we will analyze below.

• Timeout Call (setinterval)

SetInterval (function() {alert ("Hello world!"  1000); // executes every 1 seconds

• If you want to cancel execution, we can

 var  i = 1;  var  Timeid = setinterval (function   () {i  ++; 
 /... You can perform some logic   if  (1 >= 100) {C Learinterval (Timeid);  //  Note and cancel intermittent calls (Cleartimeout)   1000); //  executes every 1 seconds  

Let's take a closer look at the code above, if the part of the execution logic runs longer than the interval (1000 milliseconds). Here we need to remember that JavaScript is a thread. I can't talk about it. 1000 a process is opened to execute the loop, and the previous process then executes the running logic. Instead, it immediately disconnects the executing logical part after 1000 milliseconds and begins the next call. Of course this is definitely not what we want to see. So, we can use the above settimeout to simulate the timeout call, so that the call is the intermediate logical execution time is not counted, wait until the execution completes, then waits for the interval time then executes the next call. ( so, in actual development, we also recommend using SetTimeout to simulate timeout calls )

2. Location Object

The Location object is also strange, it is both the property of the window and the document property, and it points to the same object.

window and document relationships: HTML in the browser becomes the document object, allowing us to access and manipulate HTML elements through JavaScript. Also, the Documnet object is part of the Window object and can be accessed through the Window.document property.

Let's take a look at the properties of the location:

With these properties, we can easily modify the URL, such as:

//Assuming the initial URL is http://www.wrox.com/WileyCDA///Modify the URL to "http://www.wrox.com/WileyCDA/#section1"Location.hash = "#section1";//Modify the URL to "Http://www.wrox.com/WileyCDA/?q=javascript"Location.search = "? Q=javascript";//Modify the URL to "http://www.yahoo.com/WileyCDA/"Location.hostname = "www.yahoo.com";//Modify the URL to "http://www.yahoo.com/mydir/"Location.pathname = "Mydir";//Modify the URL to "http://www.yahoo.com:8080/WileyCDA/"Location.port = 8080;

Each time you modify the properties of the location (except for the hash), the page reloads with the new URL. That is, the browser generates a history of the back of the day. If we do not want to be able to rollback you can use the Replace () method, such as:

location.replace ("http://www.baidu.com"); So there's no fallback record.

There is a more important method besides the Replace method. Reload, used to refresh.

// Reload (possibly loaded from cache)Location.reload (true// Reload (reload from server) is forced flush

3. Navigator object, Screen object

Navigator object is mainly used to identify the client browser, but because of various browsers on the implementation of Navigator objects are different, here is not detailed analysis.

The screen object is basically used only to indicate the client's ability, including information about the display outside the browser window, such as pixel width and height. Each browser has a different level of support and is not analyzed here.

5. History Object

The history object mainly saves the current page's historical record as well. But for security reasons, programmers are not able to know the detailed URLs. We can get or operate as follows:

Number of History.length// historical records

// back one page History.back (); // forward one page history.forward ();

// back one page history.go ( -1); // forward one page history.go (1); // forward two pages history.go (2);

// jump to the nearest wrox.com page history.go ("wrox.com"); // then it may be forward or backward, and if there is no worx.com in the history, then this method will do nothing.

This is a learning record, not a tutorial. You can point out mistakes, but don't be mean.

Original link: http://www.cnblogs.com/zhaopei/p/5080108.html

This article has been synchronized to the catalog index: learn JavaScript step

Learn JavaScript basics in one step (7): BOM and Dom