当前位置：网站首页>DOM window related data, operations & BOM operations

DOM window related data, operations & BOM operations

2022-07-28 07:04:00 【Hahaha~】

One 、 Window related data and operations

（ One ） Let the window scroll to the specified position

1. Roll to the specified coordinates ： The premise is that the page is long enough Be able to roll

window.scrollTo(x,y)： Scroll to the specified position
scrollBy(x,y)： Accumulate on the basis of the previous rolling data （ Scroll a certain range each time ）

2. Scroll to the visible area of the specified element ：

el.scrollIntoView(true)： The bottom of the calling element will try to be flush with the top of the viewport
If the transfer parameter is true, Align the element with the top edge of the viewport Appear in the body Top
If the transfer parameter is false, Align the lower edge of the element with the lower edge of the viewport Appear in the body Bottom

3. Page scrolling distance ：

window.pageXOffset/window.pageYOffset   //bom operation ,IE8 And IE8 The following are not compatible 
document.body.scrollLeft/scrollTop 
document.documentElement.scrollLeft/scrollTop
// Compatible practices :
let sX=window.pageYOffset||document.body.scrollLeft || document.documentElement.scrollLeft
let sY=window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop

（ Two ） The size of the visible area of the window

1. Look at the dimensions of the viewport （ Affected by window scaling ）：

// In standard mode (<!DOCTYPE html>, Rendering mode )  Any browser is compatible 
document.documentElement.clientWidth
document.documentElement.clientHeight
//bom operation ,IE8 And IE8 The following are not compatible 
window.innerWidth
window.innerHeight
// For browsers in hybrid mode 
document.body.clientWidth
document.body.clientHeight
// Distinguish between standard mode and not (BackCompat： Standard compatibility mode off .CSS1Compat： Standard compatibility mode on )
document.compatMode
// Judge whether it is ie browser 
console.log(window.navigator.appVersion.toLocaleLowerCase().indexOf("msie")

2. Compatible practices ：

let cWidth,cHeight;
if (document.compatMode == "BackCompat") {
        cWidth = window.innerWidth||document.body.clientWidth;
        cHeight =window.innerHeight||document.body.clientHeight;
} else {
        //document.compatMode == "CSS1Compat"
        cWidth = window.innerWidth||document.documentElement.clientWidth;
        cHeight = window.innerHeight||document.documentElement.clientHeight;
}

（ 3、 ... and ） Geometric dimensions of elements

1. Get the geometric dimension of the element ：( No relevant information can be obtained when the element is hidden )

el.getBoundingClientRect()：
This method returns an object There are... In the object left,top,right,bottom,height,width attribute
left and top Represents the top left corner of the element X and Y coordinate
right and bottom Represents the lower right corner of the element X and Y coordinate
There are properties in the returned object x,y, Indicates that the left vertex of the element is relative to the page body Distance of left vertex
height and width Attribute old version IE Did not achieve

notes ：getBoundingClientRect().width= Cannot set It's wrong. , Because there is no unit in the object Can only get To set, you must use style attribute

2. Get visual width and height ：

el.offsetWidth
el.offsetHeight
Can completely replace getBoundingClientRect() Method

Two 、BOM operation

（ One ） Concept

BOM yes Browser object model Browser object model ==> Encapsulate the browser function into window in -- Lack of standards But all browser manufacturers make this API The functions of are basically similar, and all support
DOM yes Document object model Document object model ==> Encapsulate the functions of the document into document in -- yes W3C The standard model of

（ Two ）window

1.window object

yes BOM The top floor of ( The core ) object All objects ( Also known as window The children of ) Are extended through it
because window It is a top-level object, so when calling its sub objects, it can not show the indication

window.document.write(" I am a window object ")
//===> Equivalent to 
document.write(" I am also window object ")

2.window Properties of

closed Whether the return window has been closed
document Yes Document Read only reference to object
history Yes History Read only reference to object
innerHeight Returns the height of the document display area of the window
innerWidth Returns the width of the document display area of the window
outerHeight Returns the external height of the window , Contains toolbar and scroll bar
outerWidth Returns the external width of the window , Contains toolbar and scroll bar
screenLeft Returns the relative to the screen window x coordinate
screenTop Returns the relative to the screen window y coordinate
screenX Returns the relative to the screen window x coordinate
screenY Returns the relative to the screen window y coordinate
location Used of a window or frame Location object
navigator Yes Navigator Read only reference to object
onload Specify when all configurations are loaded ( Picture exception ) Called function .
pageXOffset Return to the top left corner of the current page relative to the window display area X Location (body Horizontal rolling distance )
pageYOffset Return to the top left corner of the current page relative to the window display area Y Location (body Vertical rolling distance )
screen Yes Screen Read only reference to object

3.window Methods

alert() Display a warning box with a message and a confirm button
close() Close the browser window
confirm() Displays a dialog box with a message and a confirm and Cancel buttons
open(url, Open mode , New window configuration ,BOOL) Open a new browser window
print() Print the contents of the current window
prompt(tishi,value) Displays a dialog box that prompts for user input
scrollBy() Scrolls content according to the specified pixel value ( The premise is that you have a scroll bar : Enough content )
scrollTo() Scroll content to specified coordinates .( The premise is that you have a scroll bar : Enough content )
setInterval(callback,times) According to the specified period （ In milliseconds ） To call a function
setTimeout(callback,times) Call the function after the specified millisecond count.
clearInterval() Cancel from setInterval() Set up timeout
clearTimeout() Cancel from setTimeout() Method set timeout

4.navigator

attribute :

appCodeName Return the code name of the browser
appName Return to the name of the browser
appVersion Return the platform and version information of the browser
cookieEnabled Return to indicate if... Is enabled in the browser cookie Boolean value
platform Return to the operating system platform where the browser is running
userAgent Returns... Sent by the client to the server user-agent The value of the head

5.screen

attribute :

availHeight Back to the height of the screen （ barring Windows The task bar ）
availWidth Back to the width of the screen （ barring Windows The task bar ）
height Returns the total height of the screen
width Returns the total width of the screen
pixelDepth Return to the color resolution of the screen （ The number of bits per pixel ）

6.history

attribute :

length Return the number of URLs in the access history list
back() load history The previous one in the list URL
forward() load history Next... In the list URL
go(number|url) load history A specific page in the list （ Negative numbers go back , Forward in positive numbers ）