Learn the front-end JAVASCRIPT-5, JavaScript base BOM from scratch

1:bom (Browser Object Model ) concept

The Window object is the core of all objects in the BOM.

2:window attribute (less used)

Self:self represents himself, the equivalent of window.

window.self; Point to itself window

Parent: Returns the parents window.

Top: Returns to the top-level window, just like the parent function.

Opener: Window opener.

3:window Method

1.window.open (URL, name, feature, replace);

URL: An optional string that declares the URL of the document to display in a new window. If this argument is omitted, or if its value is an empty string, then the new window will not display any documents.

Name: An optional string that is a comma-delimited list of features, including numbers, letters, and underscores that declare the name of the new window.

This name can be used as the value of the tag <a> and <form> property target.

Feature: self-expanding. Replace: self-expanding.

By default, Google will block new Web pages that are automatically opened by the system, but do not prevent the opening of new pages through events.

2.close: Close the browser . (Window.close ()//Close browser window)

But all support for opening new pages through other pages to close.

3.alert (displayed text): Pop-up window. (Window.alert ()//browser window bullet box)

4.confirm (Dialog prompt text): The method has a return value, click OK to return True, click Cancel to return False.

Console.log (Window.confirm (' Is it snowing today? ‘)); Click confirm Output true; Click Cancel Output False

5.PROMPT (Hint message): Input box. Click OK to return the string and click Cancel to return null.

Console.log (Window.prompt (' Excuse me? ')///pop-up window has a writing area, return value is input information, if not filled in as null

4:history Object

This object contains the URLs that the browser window has visited.

1. Properties

Length returns the number of browser history records

2. Method (Use the following method to return to the history of the Web page does not increase or decrease)

Back () backward, loading the previous URL.

Forward () forward.

Go (number) If the argument is positive, then it is the corresponding amount of forward, if it is negative then conversely, if it is 0 then it is a refresh.

5:location Object

Contains information about the current URL, and the history object cannot specifically reflect information about the URL.

Property:

HREF: Sets or returns the full URL. Can be a relative path, or an absolute path.

Search: Returns the URL, followed by the query section.

Hash: is a readable and writable string that is the anchor part of the URL (the part that begins with the # number).

Method:

Assign (URL): Loads a new document.

Reload (Boolean): Reloads the document, when the parameter is true, will reload at any time, false, only when the document changes the time will be loaded, otherwise directly read in memory.

Replace (URL): Replaces the current document with a new document. However, a new record is not generated in the history object. When you use this method, the new URL overwrites the current record in the history object.

6:navigator Object useragent : user agent information, which allows you to obtain browser and operating system information. This object allows you to view information about your browser, which is incompatible with the project. This version of the browser gives you suggestions for the user.

Console.log (navigator.useragent);

7:window Events

• OnResize: Window Scaling event.

Window.onresize = function () {Console.log (2)}

• OnLoad: The Load event page is executed after it has finished loading. //Get browser window width/height

Window.onload = function () {Console.log (document.documentElement.clientWidth) Console.log ( Document.documentElement.clientHeight)}

• Onscroll: Scrolling event. //Get browser scroll bar hidden width/height

Chrome (body), Firefox, IE (documentelement)

Compatible with each version of the browser through the placement method:

Window.onscroll = function () {var iscrollt = Document.documentElement.scrollTop | | document.body.scrollTop; var iscrolll = Document.documentElement.scrollLeft | |　　　　Document.body.scrollLeft; Console.log (ISCROLLL)}

　　

Learn the front-end JAVASCRIPT-5, JavaScript base BOM from scratch