BOM browser object model for JavaScript learning

BOM

Article directory

- BOM

BOM(Browser Object Model): The browser object model is actually some ability to operate the browser.
What can be done:
- Get some browser related information (window size)
- Operate the browser to jump to the page
- Get information in the address bar of the current browser
- Operate the browser's scroll bar
- Browser information (browser version)
- Let the browser show a popup box ( alert/ confirm/ prompt)
- …
BOMThe core of is windowthe object . windowIt is an object built into the browser, which contains methods to operate the browser.

Get browser window size

innerHeightandinnerWidth

These two methods are used to get the width and height of the browser window (including scroll bars)

var windowHeight = window.innerHeight
console.log(windowHeight)

var windowWidth = window.innerWidth
console.log(windowWidth)

browser pop-up layer

alertIt is a prompt box that pops up in the browser
```
window.alert('我是一个提示框')
```
This popup layer has a query message and two buttons
- When you click OK, you gettrue
- When you click cancel, you getfalse

Browser address information

windowThere is an object called in location, which is specially used to store the information in the address bar of the browser.

location.href: This attribute stores urlthe address

console.log(window.location.href)

It will convert Chinese into urlencoded format.

It can also be assigned a value.

window.location.href = './index.html'
// 这个就会跳转页面到后面你给的那个地址

location.reload: This method will reload the page again, which is equivalent to refreshing.
```
window.location.reload()
```
Note : Do not write globally, otherwise the browser will always be in the refresh state.

browser history

windowThere is an object called history, which is specially used to store historical record information.

history.backIt is used to return the history, that is, to return to the previous page, which is equivalent to the ⬅️ button on the browser
```
window.history.back()
```
The premise is that you have the last record, otherwise you will not go back even if you stay on this page all the time.
history.forwordIt is to go to the next history record, that is, to the next page, which is equivalent to the ➡️ button on the browser
```
window.history.forward()
```
The premise is that you have had a rollback operation before, otherwise you are now the last page and there is no next page

The browser's onload event

In web development, browser onloadevents refer to events triggered when the entire page and all its resources (such as images, style sheets, scripts, etc.) have been loaded. This event is usually used to make sure the page has fully loaded and then perform some action in the JavaScript code.

window.onload = function () {
    
    
  console.log('页面已经加载完毕')
}

Write js in the head in the html page

<html>
  <head>
    <meta charset="UTF-8" />
    <script>
    	// 这个代码执行的时候，body 还没有加载
      // 这个时候我们就获取不到 body 中的那个 div

      // 就需要使用 window.onload 事件
      window.onload = function () {
    
    
        // 这个函数会在页面加载完毕以后在执行
        // 那么这个时候页面的 DOM 元素都已经加载了，我们就可以获取 div 了
      }
    </script>
  </head>
  <body>
    <div></div>
  </body>
</html>

Write js after the body in the html page

<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div></div>

    <script>
    	// 这个代码执行的时候，body 已经加载完毕了
      // 在这里就可以获取到 div，写不写 window.onload 就无所谓了

      window.onload = function () {
    
    
        // 这个函数会在页面加载完毕以后在执行
        // 那么这个时候页面的 DOM 元素都已经加载了，我们就可以获取 div 了
      }
    </script>
  </body>
</html>

The browser's onscroll event

onscrollThe event is triggered when the browser's scroll bar scrolls, or when the mouse wheel scrolls

window.onscroll = function () {
    
    
  console.log('浏览器滚动了')
}

Note: The premise is that the height of the page must exceed the browser's visible window

The distance the browser scrolls

Since the content of the browser can be scrolled, we can get the scrolling distance of the browser.

In fact, the browser does not scroll, it is always there. What scrolls is actually our page. In other words, in fact, the browser did not move, but the page went up . Therefore, this is no longer simply the content of the browser, but the content of our page.

Therefore, instead of using windowthe object , use documentthe object.

scrollTop: The obtained value is the scrolling distance of the page.

There are two ways to get it:
- document.body.scrollTop
- document.documentElement.scrollTop
```
window.onscroll = function () {
      
      
  console.log(document.body.scrollTop)
  console.log(document.documentElement.scrollTop)
}
```
Both ways are to get the scrolling distance of the page, but there are some differences:
- Internet Explorer:
  - When there is no DOCTYPEstatement , use both
  - When there is DOCTYPEa statement , only usedocument.documentElement.scrollTop
- Chrome and FireFox
  - When there is no DOCTYPEdeclaration , usedocument.body.scrollTop
  - When there is DOCTYPEa statement , usedocument.documentElement.scrollTop
- Safari
  - Use neither, use a single methodwindow.pageYOffset
scrollLeft: Get the scrolling distance of the page to the left.

There are also two methods:
- document.body.scrollLeft
- document.documentElementLeft
```
window.onscroll = function () {
        
        
  console.log(document.body.scrollLeft)
  console.log(document.documentElement.scrollLeft)
}
```
- The difference between the two scrollTopis the same

The distance the browser scrolls

localStorage

localStorageis a mechanism in the JavaScript BOM (Browser Object Model) for storing and accessing data in the browser. It can be stored locally as a key-value pair, where both key and value are strings.

It is a local storage mechanism and has nothing to do with browser sessions. This means that even if the user closes the browser or computer, localStoragethe data stored in it will not be erased. localStorageIt can also be shared between different pages under the same domain name, making it ideal for storing application state, user preferences, and other data.

//增
localStorage.setItem("name","kerwin")
//取
localStorage.getItem("name")
//删
localStorage.removeItem("name")
//清空
localStorage.clear()

sessionStorage

sessionStorageis a mechanism in the JavaScript BOM (Browser Object Model) for storing and accessing data in the browser. It is localStoragevery similar to , but its scope is limited to the duration of the browser session.

Unlike localStorage, sessionStorageit is valid for the duration of the browser session, which means that if the user closes the browser or the browser session ends, sessionStoragethe data stored in it will also be cleared. sessionStorageIt can also be shared between different pages under the same domain name, making it ideal for storing application state, user preferences, and other data.

//增
sessionStorage.setItem("name","kerwin")
//取
sessionStorage.getItem("name")
//删
sessionStorage.removeItem("name")
//清空
sessionStorage.clear()