JavaScript BOM篇 基础记录

Posted 2021-12-28 xiaonanxia

一：BOM的含义：

1.什么是BOM?
DOM就是一套操作html标签的API(接口/方法/属性)
BOM就是一套操作浏览器的API(接口/方法/属性)

2.BOM中常见的对象
window: 代表整个浏览器窗口
注意: window是BOM中的一个对象, 并且是一个顶级的对象(全局)
Navigator: 代表当前浏览器的信息, 通过Navigator我们就能判断用户当前是什么浏览器
Location: 代表浏览器地址栏的信息, 通过Location我们就能设置或者获取当前地址信息
History: 代表浏览器的历史信息, 通过History来实现刷新/上一步/下一步
注意点: 出于隐私考虑, 我们并不能拿到用户所有的历史记录, 只能拿到当前的历史记录
Screen: 代表用户的屏幕信息

二：获取元素宽高的几种方式

1.通过getComputedStyle获取宽高
1.1获取的宽高不包括 边框和内边距
1.2即可以获取行内设置的宽高也可以获取CSS设置的宽高
1.3只支持获取, 不支持设置
1.4只支持IE9及以上浏览器

    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.通过currentStyle属性获取宽高
2.1获取的宽高不包括 边框和内边距
2.2即可以获取行内设置的宽高也可以获取CSS设置的宽高
2.3只支持获取, 不支持设置
2.4只支持IE9以下浏览器

 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.通过style属性获取宽高
3.1获取的宽高不包括 边框和内边距
3.2只能获取行内设置的宽高, 不能获取CSS设置的宽高
3.3可以获取也可以设置
3.4高级低级浏览器都支持

 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和offsetHeight
4.1获取的宽高包含 边框 + 内边距 + 元素宽高
4.2即可以获取行内设置的宽高也可以获取CSS设置的宽高
4.3只支持获取, 不支持设置
4.4高级低级浏览器都支持

var oDiv = 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);
   

总结：

1.getComputedStyle/currentStyle/style
获取的宽高不包括 边框和内边距
2.offsetWidth/offsetHeight
获取的宽高包括 边框和内边距

3.getComputedStyle/currentStyle/offsetXXX
只支持获取, 不支持设置
4.style
可以获取, 也可以设置

5.getComputedStyle/currentStyle/offsetXXX
即可以获取行内,也可以获取外链和内联样式
6.style
只能获取行内样式

三：获取元素位置的方式

offsetLeft和offsetTop作用
获取元素到第一个定位祖先元素之间的偏移位
如果没有祖先元素是定位的, 那么就是获取到body的偏移位

offsetParent作用：

获取元素的第一个定位祖先元素
如果没有祖先元素是定位的, 那么就是获取到的就是body

四：client属性

1.offsetWidth = 宽度 + 内边距 + 边框
  offsetHeight = 高度 + 内边距 + 边框
2.clientWidth = 宽度 + 内边距
   clientHeight = 高度 + 内边距

3 offsetLeft/offsetTop: 距离第一个定位祖先元素偏移位 || body

4 clientLeft/clientTop: 左边框 和 顶部边框 的 范围