JavaScript BOM Explained

1. BOM Introduction

1. JavaScript consists of three parts
2.Window object
3.location object
4.History Object

Summarize

1. BOM Introduction

1. JavaScript consists of three parts

ECMAScript core syntax ES
DOM document object model, the core object is document, used to operate page documents
BOM browser object model, the core object is window, used to operate the browser

insert image description here

2.Window object

name	meaning
history	Information about URLs visited by the client
location	Information about the current URL, child DOM objects
document	Represents the HTML document of the browser window, a word-level DOM object

Common methods:

Method Name	meaning
alert(text)	Display an alert box with a prompt message and an OK button
prompt(text)	Display an input box with a prompt message, a text input box, and OK and Cancel buttons
confirm(text)	Displays a confirmation box with prompt information, OK and Cancel buttons. Confirmation returns true and Cancel returns false
open(url,name,options)	Opens a new window with the specified name and loads the document specified by the given url
setTimeout(fn,delay)	Set a one-shot timer to execute a function after a specified number of milliseconds
setInterval(fn,delay)	Set a periodic timer to execute a function periodically
cleatTimeout(timer)	Clear one-shot timer
cleanInterval(timer)	Clear one-shot timer
scrollTo(xpos,ypos)	Scroll the content to the specified coordinates, that is, set the offset position of the scroll bar
scrollBy(xnum,ynum)	Scroll the content by the specified number of pixels, that is, set the offset of the scroll bar

open Open the specified window

<script>
        function f1() {
            //This is not a CSS style, the size of the open window can be adjusted open('test.html', 'user', 'width=500px,height=500px')
        }
    </script>
</head>
<body>
    <button onclick="f1()">Open a new window</button>
</body>

setTimeout(fn,delay)

  <script>
        function f1() {
            //This is not a CSS style, the size of the open window can be adjusted open('test.html', 'user', 'width=500px,height=500px')
        }
        function f2() {
            setTimeout(f1, 2000)
        }
    </script>
</head>
<body>
    <button onclick="f2()">One-time timer</button>
</body>

cleatTimeout(timer)

Turn off a one-shot timer, within the time frame that was not executed

```javascript
<script>
        function f1() {
            //This is not a CSS style, the size of the open window can be adjusted open('test.html', 'user', 'width=500px,height=500px')
        }
    </script>
</head>
<body>
    <button onclick="f1()">Open a new window</button>
</body>

setTimeout(fn,delay)

  <script>
        function f1() {
            //This is not a CSS style, the size of the open window can be adjusted open('test.html', 'user', 'width=500px,height=500px')
        }
        var timer
        function f2() {
            timer = setTimeout(f1, 2000)
        }
        function f3(){
		clearTimerout(timer)
}
    </script>
</head>
<body>
    <button onclick="f2()">One-time timer</button>
    <button onclick="f3()">Turn off the one-shot timer</button>
</body>

scrollTo(xpos,ypos)

Move to the specified position

<script>
        function f1() {
            scrollTo(0, 100) //Unit is px
        }
    </script>

Common events

Time Name	meaning
onclick	Mouse clicks
onload	Page loading completed
onscroll	Window scroll bar sliding

Note: Since the window object is the top-level object of the BOM structure, the window can be omitted when calling window properties and methods.

<script>
//Execute after clicking the window window.onclick = function() {
            console.log(111)
        }
    </script>

3.location object

Common properties

href sets or returns the URL in the address bar

Common method reload() reloads the current page

    <script>
        function getUrl() {
            //Get the URL in the address bar
            console.log(location.href)
                //Set the URL in the address bar to redirect the page //location = 'https://www.baidu.com'
            location.href = 'https://www.baidu.com'
            //Reload the page location.reload();
        }
    </script>
</head>
<body>
    <button onclick="getUrl()">Get url</button>
</body>

4.History Object

Method Name	meaning
back()	Go back and load the previous URL in the history list
forword()	Go forward and load the next URL in the history list
go(number)	The browser moves the specified number of pages

  <script>
        function goBack() {
            history.back()
        }
        function goforward() {
            history.forward()
        }
        function goGo() {
            history.go(1) //Go forward one }
    </script>
</head>
<body>
    <button onclick="goBack()">Back</button>
    <button onclick="goforward()">Go forward</button>
</body>