JavaScript BOM papers foundation records

A: BOM meanings:

1. What is the BOM?
The DOM is a set of operations API (interface / methods / properties) HTML tags
BOM is a set of operating browser API (interface / method / property)

2.BOM common objects
window: representative of the browser window
Note: window is an object of the BOM, and is a top target (global)
Navigator: Information on behalf of the current browser by Navigator we can determine the user's current What browser
Location: on behalf of the browser address bar of the information, we will be able to set or get the current address information through the Location
history: This means the browser history information, history by step to achieve refresh / on / Next
Precautions: for privacy considerations, we can not get all the user's history can only get the current history
screen: information on behalf of a user's screen

II: Get the width and height element in several ways

1. Get the width and height by the getComputedStyle
1.1 acquired width and height, without borders and padding
1.2 can be acquired width and height may be provided in the line width and height of the CSS to obtain
1.3 support access, does not support setting
1.4 and above support IE9 browser

    var oDiv = document.getElementById("box");
    // oDiv.style.width = "166px";
    // oDiv.style.height = "166px";
    var style = getComputedStyle(oDiv);
    // style.width = "166px";
    // style.height = "166px";
    console.log(style.width);
    console.log(style.height);

2. Get the width and height attributes by currentStyle
2.1 acquired width and height, without borders and padding
2.2 can be acquired width and height may be provided in the line width and height CSS to obtain the
2.3 Get support, can not be set
2.4 or less supports IE9 browser

 var oDiv = document.getElementById("box");
    // oDiv.style.width = "166px";
    // oDiv.style.height = "166px";
    var style = oDiv.currentStyle;
    style.width = "166px";
    style.height = "166px";
    // console.log(style);
    console.log(style.width);
    console.log(style.height);

3. Get the width and height by style property
3.1 Gets the width and height, without borders and padding
3.2 can only get the width and height settings in line, can not get to set the width and height CSS
3.3 can be set to obtain
3.4 Advanced low-level browsers support

 var oDiv = document.getElementById("box");
    oDiv.style.width = "166px";
    oDiv.style.height = "166px";
    console.log(oDiv.style.width);
    console.log(oDiv.style.height);

4.offsetWidth and offsetHeight
4.1 includes high-acquired wide border + padding + width and height of the element
4.2 can be acquired width and height settings can also obtain inline CSS to set the width and height of
4.3 to obtain support, does not support setting
4.4 Advanced low-level browser support

var attire = document.getElementById ( "box" );
    // oDiv.offsetWidth = "166px"; 
    // oDiv.offsetHeight = "166px"; 
    oDiv.style.width = "166px" ; 
    oDiv.style.height = "166px" ; 
    console.log (oDiv.offsetWidth); 
    console.log (oDiv.offsetHeight);
   

to sum up:

1.getComputedStyle / currentStyle / style
acquired width and height, without borders and padding
2.offsetWidth / offsetHeight
width comprises obtaining high borders and padding

3.getComputedStyle / currentStyle / offsetXXX
only get support, does not support setting
4.style
can get, you can also set

5.getComputedStyle / currentStyle / offsetXXX
can be acquired within a line, and the chain can also be obtained inline style
6.style
only obtain inline style

Three: Getting element of the way location

offsetLeft offsetTop action and
acquires the offset position between the elements to a first positioning element ancestor
If no ancestor element is positioned, the body is acquired offset position

offsetParent role:

Get the elements of the first positioning ancestor
if there is no ancestor element is positioned, it is to get to is the body

Four: client property

1.offsetWidth = + width + padding borders
  offsetHeight = + height + padding border
2.clientWidth = width + padding
   clientHeight = height padding +

3 offsetLeft / offsetTop: positioning a distance between the first shift position ancestor body ||

clientTop 4 clientLeft /: range and top border of the left border