JavaScript — BOM operation

Time:2021-5-1

1、 BOM introduction

BOM: browser object model.

Window represents BOM object, browser window page: scroll bar, top tab page, whole navigation bar, browser pop-up

BOM operation can only be performed on the whole document page

BOM structure diagram:

 

As can be seen from the figure above:

(1) DOM objects are also part of the BOM

(2) Window object is the top (core) object of BOM

be careful:

(1) When calling the methods and properties of the window object, you can omit the window. For example, window.document.location can be abbreviated as document.location

(2) Global variables are also properties of windows objects, and global functions are methods of windows objects

2、 Object history, navigator and screen

#1. The history object package does not contain the history of the browser
History. Back() // back one page, equivalent to history. Go (- 1)
History. Forward() // one page forward, equivalent to history. Go (1)
History. Go (0) // 0 is refresh
Not much. Because the browser has built-in buttons with these functions:

#2. The Navigator object contains browser related information.
Navigator.appname // full name of web browser
Navigator.useragent // most of the client information
Navigator.platform // the operating system of the browser

#3. You can use the screen object to get the available screen width and height
Screen.availwidth // available screen width
Screen.availheight // available screen height

Example: Click to go to the previous / next page

 

JavaScript -- BOM operationJavaScript -- BOM operation

================page11.html



    
    Title


First page
Click me to go to the next page




================page22.html



    
    Title


Second page
Click me to go to the next page




================page33.html



    
    Title
    
        function back() {
            window.history.back()
        }
    


Third page

Click to go to the previous page and the next page

 

3、 Localization object (to be used)

Location. WSDL // get URL
Location. A.b.a. = "URL" // jump to the specified page
Location. Reload() // reload the page

location.href

Exercise 1: click on the box and jump to the page

Click on me

    var oDiv = document.getElementById('div1');
    oDiv.onclick = function () {
        location.href = 'https://www.baidu.com';
    }
 

//Or

I'm Div. please call me

    document.getElementsByClassName("box")[0].onclick=function () {
        location.href="http://www.baidu.com"
    }

 

After exercise 2: 3S, jump to the page automatically

This world is a world of great strife. My son is not only fighting, but also fighting brilliantly

    setTimeout(function () {
        location.href = 'https://www.baidu.com';
    }, 3000)

Exercise 3: refresh the whole page after 3S

This world is a world of great strife. My son is not only fighting, but also fighting brilliantly

    setTimeout(function () {
        location.reload();
    }, 3000)

4、 The system dialog box will pop up

Alert is used when testing code

 

Alert (1) is short for window. Alert (1) because it is a child method of window.

There are three kinds of system dialog boxes

    If you are ugly, you can't find a girlfriend without reading// The appearance is different in different browsers
    Confirm ("do you really want to do this, young man")// Poor compatibility
    Prompt ("enter user name")// Not recommended

//Examples
Alert
Var res = confirm
Console. Log (RES) // the return value of receiving the contents of the pop-up box is true or false
Var user name = prompt ("please enter user name):" // pop up the box to let you enter the user name
Var password = prompt ("please enter password):)
console.log(username,password)

 

 

 

5、 Open and close windows (learn)

#1. Open (URL address), the location of the new window_ Blank or_ Features of new windows)
window.open("http://www.w3school.com.cn","_blank", "width=400, height=400")

#2. Close() closes the current window
var x=window.open(" http://www.w3school.com.cn ","_ blank", "width=400, height=400") //_ Self stands for opening on the current page_ Blank means open on a new page
x. Close () # click close immediately to set the close event

6、 The height and width inside the browser window

Window.innerheight - the internal height of the browser window
Window.innerwidth - the internal width of the browser window

7   timer

#1.setTimeOut()
Executed only once after a specified time, usually to delay the execution of a method or function (what to do after how long)

//Timer running asynchronously  
function say(){  
    alert("hello");  
}  
//Use the method name to execute the method  
var t1 = setTimeout(hello,1000);  
var t2 = setTimeout("hello()",3000); // Using string execution method  
clearTimeout(t2); // Remove the timer


#2.setInterval()
It is usually used to refresh the form. For some forms of false real-time, the specified time refresh synchronization, animation effect and so on.

//Real time refresh time in milliseconds  
var t3 = setInterval(say,3000);   
var t4 = setInterval('say()',3000);   

clearInterval(t3);
clearInterval(t4);

give an example:

setTimeout(function () {
        location.href="http://www.baidu.com"
        location.reload()
        Console.log (123) // print 123 after 3 seconds
    },3000)

    setInterval(function () {
        location.href="http://www.baidu.com"
        location.reload()
        Console.log (123) // run every 3 seconds
    },3000)

    var s1=setTimeout(function () {
        alert(123)
    },3000)
    Cleartimeout (S1) // clean up

     var s2=setInterval(function () {
        alert(123)
    },2000)

    Clearinterval (S2) // clean up

 

Recommended Today

Large scale distributed storage system: Principle Analysis and architecture practice.pdf

Focus on “Java back end technology stack” Reply to “interview” for full interview information Distributed storage system, which stores data in multiple independent devices. Traditional network storage system uses centralized storage server to store all data. Storage server becomes the bottleneck of system performance and the focus of reliability and security, which can not meet […]