Start from scratch the Web BOM (a) BOM concept, some BOM objects

Last Update:2018-06-25 Source: Internet

Author: User

Tags script tag

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Hello everyone, here is "learn the Web series from scratch" and synchronize updates at the following address ...
+------------------------------------------------------------
Github:https://github.com/daotin/web
Public number: The top of the Web front
Blog Park: http://www.cnblogs.com/lvonve/
csdn:https://blog.csdn.net/lvonve/
+-----------------------------------------------------------
Here I will start with the Web front End 0 Foundation, step-up learning web-related knowledge points, during the period will also share some fun projects. Now let's go to the Web Front end learning Adventure tour!

First, the concept of BOM1, BOM

BOM (Browser object model): Browser object models.

Some of the actions in the browser can be programmed with the BOM method.

For example: Refresh the browser, go forward, back, enter the URL in the address bar, and so on.

2. BOM Top-level object

The top-level object of the BOM is: window

Window is the top-level object of the browser, and you can omit window when calling properties and methods under window.

Attention:

1, a special property under window: Window.name, so do not easily define the name variable, will cause Window.name to be modified.

2, top is equivalent to Windows.

3. System dialog box

window.alert();window.prompt();window.confirm();// 两个按钮，分别返回 true 和 false。

The above dialog boxes are not recommended for use.

1, the frame when the page can not be loaded;

2, each browser style is not the same, and the style is not customizable.

4. Page Load Object

Ask questions:

We know that if the script tag is placed inside the head, the page is loaded with a script tag loaded first before the tag inside the body is loaded. If the script is particularly large, it can affect the user experience.

Workaround:

1. Place the script tag at the end of the body.

2, the use of window.onload events.

    <metacharset="UTF-8">    <title>Title</title>    <script>        window.onload = function(){            Document.getElementById("BTN").onclick = function(){                Alert("haha");            }        }    </script>><Body><input type="button"Value="button"Id="BTN"></body>

1, if do not write window.onload words, execution to document.getElementById ("BTN") will error, because the program is executed from top to bottom.

2. The Window.onload event is triggered when the page is loaded ( all content, tags, attributes, and externally introduced JS files on the page).

3, window.onload can omit window.

window.onunload=function{    alert("yes");}

onunload: Event triggered when page is closed

window.onbeforeunload=function{    alert("yes");}

onbeforeunload: Events that are triggered before the page closes

5. Location object (Address bar)

Learning an object is mainly about learning the properties and methods within it.

5.1. Properties

Console.Log(window. Location.Hash); //Address bar # and what's behindConsole.Log(window. Location.Host); ///localhost:63342----host name and port numberConsole.Log(window. Location.hostname); //localhost----host nameConsole.Log(window. Location.Port); //63342----Port numberConsole.Log(window. Location.Pathname);///js/images/location.html---relative pathConsole.Log(window. Location.Protocol);//http:---protocolConsole.Log(window. Location.Search);What---search for//?_ijt=28855sggj8kcffva8q9bhc1eh0

5.2. Methods

document .  getElementById  (). onclick  =  function  () { location . href  =   "http://fengdaoting.com"      location . assign  ( "http://fengdaoting.com" )     location . reload     ()  location . replace  ( "http://fengdaoting.com" )

location.hrefand location.assign() : Set the page address of the jump, both properties and methods function the same, and both save the pre-jump address (in the browser you can click the Back button).

location.reload(): Refresh Page

location.replace(): Sets the page address of the jump, but does not save the address before the jump.

6. History Object 6.1, method

window.history.forward();// 前进window.history.back// 后退window.history.go(number);  // number为正，前进；为负，后退。

7. Navigator Object 7.1, attributes

window.navigator.platform;// 判断浏览器所在的系统平台// win32window.navigator.userAgent;// 判断浏览器的类型，是谷歌火狐还是IE// chrome 下结果：Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.186 Safari/537.36

Start from scratch the Web BOM (a) BOM concept, some BOM objects

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More