This is the 23rd day of my participation in the August More Text Challenge

preface

Recently when learning framework source code, found that the bottom need to be familiar with a lot of native knowledge

So today to review and sort out BOM related knowledge points

Understand the BOM

BOM is the Browser Object Model. Js considers the entire Browser as an Object window. BOM defines many objects, attributes, and methods for operating the Browser.

We know that the DOM is the PART of the HTML document that the Document Object Model uses to represent and manipulate the browser, so JS further considers the DOM to be part of the browser object. In addition, the window also includes a location object to get the page URL, a History browser history object, a Screen screen object, a Navigator, and so on

The window object

The Window object is the core of all objects in the BOM. It is the parent object of all objects in the BOM. It also contains some functions that control the window, so I will look at the Window first

Window stands for the entire browser. So all functions and variables declared globally belong to window, including undeclared variables that also belong to Window.

  1. View the browser window size (or viewable area, excluding toolbars and scrollbars)
//IE9 +, Chrome, Firefox, Opera, Safari:
window.innerWidth;
window.innerHeight;
/ / IE5, June
window.documentElement.clientHeight ;
window.documentElement.clientWidth;
//IE5,6,7,8 compatibility disorder
window.body.clientWidth
window.body.clientHeight
Copy the code

Encapsulate a method compatible with all browsers to get the viewable width of the browser:

window.getInnerWH = function () {
    return {
        width: window.innerWidth || window.documentElement.clientWidth || window.body.clientWidth,
        height: window.innerHeight || window.documentElement.clientHeight || window.body.clientHeight
    }
}
Copy the code
  1. View the full window size
window.outerWidth
window.outerHeight
Copy the code
  1. View the size of the element
var odiv = document.getElementsByTagName('div') [0]
odiv.offsetWidth
odiv.offsetHeight
Copy the code

offsetHeight = height + padding + border

offsetWidth = width + padding + border

  1. View the position of the element

Odiv. offsetLeft Distance Left distance

Odiv. offsetTop Distance Distance to the right

There are positioned elements, which return the position relative to the most recently positioned parent element; There is no positioning element and the position relative to the document is returned

  1. View the element’s most recently located parent

Odiv. offsetParent returns the most recently located parent, or body if not; Body offsetParent returns NULL;

  1. Look at the geometry of the element

Odiv. GetBoundingClientRect () the method returns an object, the object has left, right, top, bottom, and the width and height.

Compatibility is good, but the results returned are not real-time.

  1. Open a window
window.open(URL,name,specs,replace)
Copy the code

URL: Indicates the address of the page to be opened. If no URL is specified, open a blank window

Name: Specifies the name of the target property or window

  • _blank– URL loads to a new window. This is the default
  • _parent– THE URL is loaded into the parent frame
  • _self– URL Replaces the current page
  • _top– URL replaces any loadable frameset
  • name– Window name

Specs: Sets window specifications, optional. A comma-separated list of items

  • height=pixelsHeight of window. The minimum value is 100
  • left=pixelsThe left-hand position of the window
  • location=yes|no|1|0Whether to display the address field. The default value is yes
  • menubar=yes|no|1|0Whether to display the menu bar. The default value is yes
  • resizable=yes|no|1|0Whether the window can be resized. The default value is yes
  • scrollbars=yes|no|1|0Whether scroll bars are displayed. The default value is yes
  • status=yes|no|1|0Whether to add a status bar. The default value is yes
  • titlebar=yes|no|1|0Whether to display the title bar. Is ignored unless an HTML application or a trusted dialog box is called. The default value is yes
  • toolbar=yes|no|1|0Whether to display the browser toolbar. The default value is yes
  • top=pixelsThe position at the top of the window. Internet Explorer only
  • width=pixelsWidth of window. Minimum. A value of 100
  • channelmode=yes|no|1|0Whether to display Window in cinema mode. There is none by default. Internet Explorer only
  • directories=yes|no|1|0Whether to add a directory button. The default is yes. Internet Explorer only
  • fullscreen=yes|no|1|0Whether the browser displays the full-screen mode. There is none by default. Windows in full screen mode must also be in cinema mode. Internet Explorer only

Optional.Specifies Specifies whether the URL loaded into a window creates a new entry in the window’s browsing history or replaces the current entry in the browsing history. The following values are supported:

  • true– URL Replaces the current entry in the browsing history.
  • false– URL Creates a new entry in the browsing history.
  1. Close the Browser window

window.close()

  1. Move the current window position

Window.moveto (x,y) moves the upper-left corner of the window to the specified coordinate

Window.moveby (increments of x, increments of y) is used for increments

Open (), close(), and moveTo() are all compatible

  1. Resize the current window

Window.resizeto (width,height) resizes the window to the specified width and height

Window. ResizeBy (width increment, height increment) is used to increase width height

However, both methods have been abolished in the new browser

  1. The position of the browser window on the screen

Distance left: window.screenx or window.screenleft

Distance above: window.screeny or window.screentop

  1. Let the scroll bar scroll

  • scroll(x,y)

  • scrollTo(x,y)

  • scrollBy(x,y)

X and y represent the rolling distance of the scroll bar to the X-axis and the rolling distance of the scroll bar to the downward axis respectively

The first two methods are basically the same, but scrollBy() adds up to the previous data. You can use scrollBy to achieve the function of fast reading.

  1. View the scrolling distance of the scroll bar

window.pageXoffset

window.pageYoffset

But lower versions of IE are not compatible, so it uses the following two sets of methods

document.documentElement.scrollLeft

document.documentElement.scrollTop

or

document.body.scrollLeft

document.body.scrollTop

Since compatibility is messy, the method is to add the two methods together. Since it is impossible for both methods to have values at the same time, we can encapsulate a method that is compatible with all browsers and can be used to check the scrolling distance of the scroll bar:

window.getScrollLT = function () {
  return {
    left: window.pageXOffset || document.documentElement.scrollLeft + document.body.scrollLeft,
    top: window.pageYOffset || document.documentElement.scrollTop + document.body.scrollTo
  }
}
Copy the code
  1. Popup window

There are three kinds of pop-ups in JS: warning box, confirmation box and prompt box

  • window.alert("sometext")

When the warning box appears, the user needs to click ok to continue the operation.

  • window.confirm("sometext")

Validation boxes are usually used to verify that user actions are accepted.

When the confirmation card pops up, the user can click “CONFIRM” or “cancel” to confirm the user action; Return true when you click OK, false if you click Cancel.

  • window.prompt("sometext","defaultvalue")

When the prompt appears, the user needs to enter a value and then click the OK or cancel button to continue manipulation.

If the user clicks OK, the value returned is the entered value. If the user clicks Cancel, the return value is null.

  1. The timer method is also defined on the window

window.clearInterval()

window.setTimeout()

window.clearInterval()

window.clearTimeout()

Specific use can see the JS timer piece, very clear.

Location Location object

The URL used to get the page

  • location.href Returns the entire URL of the current page
  • location.protocol Back to Web Protocol (http:// or https://)
  • location.hostnameReturns the domain name of the Web host
  • location.portReturn port number
  • location.pathnameReturn path and file name.
  • Location. hash returns the anchor part of a URL
  • Assign () loads a new document
  • Reload () reloads the current document
  • Replace () replaces the current document with a new one

History Indicates the browser history object

  • history.back();
  • history.forword();

Correspond to the last and previous URLS in the load history list

  • History.go () loads a specific page in the history list
  • History. length Number of historical entries

Screen Screen object

Available screen width and height

  1. Full resolution:
  • screen.width
  • screen.height
  1. Remove the available width and height of the taskbar (minus interface features such as the taskbar)
  • screen.availWith
  • screen.availHeight

The navigator object

  • The Navigator object contains information about the browser
  • Navigator.appcodename returns the code name of the browser
  • Navigator.appname Returns the name of the browser
  • Navigator. appVersion returns platform and version information for the browser
  • Navigator.cookieenabled returns a Boolean value indicating whether cookies are enabled in the browser
  • Navigator. platform returns the operating system platform on which the browser is running
  • Navigator. UserAgent returns the value of the user-Agent header of the server sent by the client

  • Navigator.javaenabled () specifies whether Java is enabled in the browser
  • Navigator.taintenabled () specifies whether the browser enables data tainting.

That’s all about BOM and common attributes and methods