JavaScript introduction-browser object model and javascript Introduction

JavaScript introduction-browser object model and javascript Introduction
Preface:

JavaScript is composed of three parts: ECMAScript, DOM, and BOM, as shown in. This article mainly introduces the browser object model. BOM (Browser Object Mode) is a Browser Object model used to describe the hierarchical relationship between objects, the browser object model provides an object structure independent of content that can interact with browser windows. BOM consists of multiple objects, which indicate that the Window object in the browser Window is the top-level object of BOM, and other objects are sub-objects of this object.

1. window object

BOM can be used to access and operate browsers in the browser window. developers can use it to control the display of parts outside the browser page. It provides many objects to help us access the browser. The core object is window, which indicates an instance of the browser. The window object is at the top of the JavaScript structure. For each opened window, there will be a default window object.

Properties of the window object:

Window object method:

The alert (), confirm (), and prompt () methods that are frequently used in the method can call the system dialog box to display information to users. Because the window object is a global object, you do not need to add a window in front of its properties and methods. Instead, you can call them directly, as we see in the instances that directly call the alert () method.

Example:

// Confirm and cancel if (confirm ('Please confirm or cancel') {alert ("are you sure you want to confirm? ")} Else {alert (" are you sure you want to cancel? ")}

The direct descendant of the window object does not need the window prefix. However, when dealing with objects other than the direct descendant of the window object, you need to add the name of the window object before them. For example, the document object is the direct descendant of the window object, so the window prefix is not required, but the descendant of the document Object requires the document prefix.

Example:

         alert('something');  //note no window         document.forms[0]    //note the document

Ii. location object

The location object allows us to access the currently loaded URI, including any information about query strings, protocols used, and other related components.

Location Property:

Location Method:

Example:

<span style="font-family:KaiTi_GB2312;font-size:18px;"><body>    <script lang="javasctript" type="text/javascript">        var body = document.getElementsByTagName("body")[0];        for (var prop in navigator) {            var elem = document.createElement("p");            var text = document.createTextNode(prop + ":" + navigator[prop]);            elem.appendChild(text);            body.appendChild(elem);        }        if (location.search) {            var querystring = localtion.search;            var splits = querystring.splits('&');            for (var i = 0; i < splits.length; i++) {                var splitpair = splits[i].split('=');                var elem = document.createElement("p");                var text = document.createTextNode(splitpair[0] + ":" + splitpair[1]);                elem.appendChild(text);                body.appendChild(elem);            }        }    </script></body></span>

3. history Object

The history Object provides a way to move forward and backward through the visitor's browsing history. Specifically, back (), forward (), and go () can be used (). This may be self-evident, but it should also be noted that back () and forward () Move a page backward and forward respectively, and the go () method moves to the index value specified by the parameter.

Application instance:

    function back()         {             history.back();         }    function forward()         {             history.forward();         }                 <p><a href="#" onclick="return back();">Click to go back</a></p>         <p><a href="#" onclick="return forward();">Click to go forward</a></p>

Iv. Summary

For several important objects in the browser object model, we need to learn some common attributes and methods.