Implement the composition of JavaScript (detailed interpretation of BOM and DOM)

亚连
Release: 2018-05-21 13:52:55
Original
1422 people have browsed it

Below I will bring you an article on how to implement JavaScript (detailed interpretation of BOM and DOM). Now I share it with you and give it as a reference.

We know that a complete JavaScript implementation needs to be composed of three parts: ECMAScript (core), BOM (Browser Object Model), and DOM (Document Object Model).

BOM:

BOM provides many objects for accessing browser functions that have nothing to do with the content of the web page (these are DOM ), currently, BOM has been moved into the HTML5 specification by W3C.

window object:

The core of BOM represents an instance of the browser. It is both an interface for accessing the browser window through javascript and a Global specified by ECMAScript. Object, which means any object, variable and function defined in the web page, has window as its Global object, and therefore has access to methods such as paresinInt(). (Excerpted from Height Three). In addition, if a web page contains frames, each frame has its own window object and is stored in the frames collection (starting at index 0, ltr, ttb).

First of all, the variables and functions in the global execution environment are all properties and methods of the window object. Of course, there is a slight difference between global variables and the directly defined window property type. Global variables (to be precise, explicitly declared global variables) cannot be deleted, but the window property can. In addition, there is another detail to note. Trying to access undeclared variables will cause an error, but there is no problem using the query window object.

So, what are the common properties or methods of window?

1.name, each window object has a name attribute, which contains the name of the frame. Usually to understand window relationships and frames.

2. Window position method: moveTo (x coordinate of new position, y coordinate of new position), moveBy (move x horizontally, move y vertically). These two methods are not applicable to the framework.

3. Window size attribute: innerWidth/Height (size of the view area (minus the width of the border)/* IE, Safari, firefox */), outerWidth/Height (returns the size of the browser window/* IE, Safari, firefox */). In Chrome, inner and outer both return the size of the view area.

Of course, you can change the window size through resizeTo (new window width, new window height), resizeBy (increase x than the original width, increase y than the original height). This love song method does not apply to frame structures.

4.window.open(URL, window target, attribute string, boolean whether the new page replaces the currently loaded page in the browser history) is used to navigate to a specific URL or open a new window . If a window target is specified and the window target is the name of an existing window or frame, the specified url will be loaded in the renamed window or frame. Otherwise, the new window that opens is named the target window. Of course, the keywords that can be specified for the window target include _self, _parent, _top, and _blank.

click me