浏览器对象模型BOM（Browser Object Model）

BOM全称Browser Object Model - 浏览器对象模型，他提供了很多对象，用于访问浏览器的功能，没有规范，BOM的核心是window

什么是window，什么是document?

window是js中最大的对象，表示窗口，包含document

document文档对象，表示HTML

1、window对象

1、window

// 所有的全局变量和全局函数，都是window的成员。
​
var a = 5;
function fn() {
    console.log('平头哥');
}
​
console.log(a);
console.log(window.a);
​
fn();
window.fn();
​
​
// -----------------------
// window是一个对象，它下面就有很多的属性和方法
// console.log(window); // {}
var n = 0;
for (var attr in window) {
    n++;
    console.log(n, attr, window[attr]);
}

 

  • 系统对话框

// 所有 JavaScript 全局对象均自动成为 window 对象的成员。
// alert：有确定按钮的弹出窗，返回undefined
var n = window.alert('弹出');
console.log(n);
​
// confirm：有确定和取消的弹出窗，确定返回true，取消返回false
var n = window.confirm('来不来？');
console.log(n);
​
// prompt：有输入框的弹出窗，确定返回输入框的内容，取消返回null
var n = window.prompt('请填入你的年龄', 800);
console.log(n);

 

 

  • open和close

<button>打开</button>
<button>关闭</button>
// 可以通过js的方式，打开一个页面
​
// 打开
// window.open(url, 打开窗口的方式, 设置窗口大小, 新窗口是否取代浏览器记录中的位置)
//      _self ：在当前窗口打开
//      _blank:在新窗口打开
//      返回新页面的window对象
​
// 关闭
// 被关闭窗口的window对象.close();  只能关闭由js打开的窗口
​
var btn = document.querySelectorAll('button');
var w = null; // 新打开窗口的window对象的引用
​
// 打开
btn[0].onclick = function () {
    w = open('https://www.baidu.com/', '_blank', 'width=600px,height=400px', false);
    // console.log(w);
}
​
// 关闭
btn[1].onclick = function () {
    w.close();
}

 

2、location对象

// location 是最有用的 BOM 对象之一，它提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。
console.log(location);
​
// 从location里面获取信息
// console.log(location.href); // url地址
// console.log(location.hash); // #号后面的东西，包括#号
// console.log(location.search); // ?号后面的东西，包括?号
// console.log(location.host); // 返回服务器名称和端口号
// console.log(location.hostname); // 域名
// console.log(location.pathname); // 文件地址
// console.log(location.port); // 端口号
// console.log(location.protocol ); // 协议
​
// 设置
// location.hash = '123'
// location.search = 'a=2&c=3'
setTimeout(function () {
    // 跳转页面
    location.href = 'https://www.baidu.com/'
}, 3000);

 

 

3、history对象

保存着用户上网的历史记录，从窗口被打开的那一刻算起。

    history.go(-1); // 后退一页

    history.go(1); // 前进一页

    history.go(2); // 前进两页

    history.back(); // 后退

    history.forward(); // 前进

 

4、navigator对象

navigator 对象的属性通常用于检测显示网页的浏览器类型

console.log('浏览器代号', navigator.appCodeName);
console.log('浏览器名称', navigator.appName);
console.log('浏览器版本', navigator.appVersion);
console.log('是否启用了cookie', navigator.cookieEnabled);
console.log('硬件平台', navigator.platform);
console.log('用户代理', navigator.userAgent);
console.log('代理语言', navigator.systemLanguage);

 

 

2、位置属性

1、元素宽高

  • 获取元素的宽高（不能获取隐藏元素的宽高）

var box = document.getElementById('box');
console.log(box.clientWidth); // 120  width + padding
console.log(box.offsetWidth); // 122  width + padding + border
console.log(box.clientHeight); // 120  height + padding
console.log(box.offsetHeight); // 122  height + padding + border

 

 

  • 获取特殊标签

console.log(document.body); // body标签
console.log(document.documentElement); // html标签
document.title = '起飞了'; // 获取title标签

 

 

  • 获取可视区宽高 （html的宽高）

alert(document.documentElement.clientWidth);
alert(document.documentElement.clientHeight);

 

 

  • 元素上边框和左边框(用处不大)

console.log(box.clientTop); // 获取元素上边边框的宽度
console.log(box.clientLeft); // 获取元素左边边框的宽度

 

 

2、元素位置

  • 元素.offsetParent 返回离它最近的有定位属性的父级，如果没有定位的父级，则返回body

  • 元素.offsetTop 返回离它最近的有定位属性的父级的顶边的距离，如果没有定位的父级，则返回body的距离

  • 元素.offsetLeft 返回离它最近的有定位属性的父级的左边的距离，如果没有定位的父级，则返回body的距离

<div id="box1">
    <div id="box2">
        <div id="box3"></div>
    </div>
</div>
var box3 = document.getElementById('box3');
console.log(box3.offsetLeft);
console.log(box3.offsetParent);

// 封装一个方法，用于获取元素到文档的距离
console.log(getPos(box3));
​
function getPos(ele) {
    var l = 0;
    var t = 0;
​
    while (ele) {
        l += ele.offsetLeft;
        t += ele.offsetTop;
        ele = ele.offsetParent;
        // console.log(ele);
    }
    return {
        left: l,
        top: t
    }
}

 



 


3、滚动


    

  • 

    获取元素的滚动条
    

      

    • 

      元素.scrollTop 被卷去的高
      

      • 

    • 

      元素.scrollLeft 被卷去的宽
      

      • 

    

    • 

  • 

    设置滚动条
    

      

    • 

      元素.scrollTop = 值
      

      • 

    • 

      元素.scrollLeft = 值
      

      • 

    

    • 

  • 

    滚动事件(在滚动的时候，会不断的触发)
    

      

    • 

      元素.onscroll = function(){}
      

      • 

    

    • 

  • 

    窗口的滚动条
    

      

    • 

      标准浏览器认为是滚动条的高度是html的，而谷歌认为是body的（新版谷歌也认为是html的），所以要做兼容
      

      • 

    • 

      console.log(document.documentElement.scrollTop);
      

      • 

    • 

      console.log(document.body.scrollTop);
      

      • 

    

    • 





// 在页面中滚动时，打出它的滚动条的高度
window.onscroll = function () {
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    console.log(scrollTop);
}
​
// 在页面中点击一下，让滚动条到500
document.onclick = function () {
    document.documentElement.scrollTop = 500;
    document.body.scrollTop = 500;
}




 


案例：返回顶部


4、总结




// client系列
// 元素.clientWidth         width + padding    （可视区的宽高）
// 元素.clientHeight        height + padding
// 元素.clientTop           上边框的高度（不常用）
// 元素.clientLeft          左边框的宽度
​
// offset系列
// 元素.offsetWidth         width + padding + border
// 元素.offsetHeight        height + padding + border
// 元素.offsetParent        有定位的父级
// 元素.offsetTop           到有定位父级顶边的距离
// 元素.offsetLeft          到有定位父级左边的距离
​
​
// scroll系列
// 元素.scrollTop          被卷去的高
// 元素.scrollLeft         被卷去的宽
// 元素.scrollWidth        获取元素实际内容宽
// 元素.scrollHeight       获取元素实际内容高




 


 


3、懒加载


先只加载可视窗口区域的图片，当用户向下拖动滚动条时再继续加载后面的图片（也是只加载目前可视窗口区域内的图片）。


1、这样减少了加载时的线程数量，使可视区域内的图片也能够快速加载，优化了用户体验。


2、减少了同一时间发向服务器的请求数，服务器压力剧减。


方法：在写网页<img>标签时并不会将图片的路径放入src属性。而是自定义一个其他的属性src。将路径放入这个自定义的属性中。那么在加载页面时，这个图片一开始是无法加载的。而当浏览器的可视区域移动到此图片上时，将src中的路径赋值给src属性，并开始加载。


resize事件




// resize事件，窗口大小发生变化时触发
window.onresize = function () {
    var w = document.documentElement.clientWidth;
    var h = document.documentElement.clientHeight;
    console.log(w, h);
}




 








            

            
posted @ 
2020-09-13 21:07 
正经的流刺源 
阅读(198) 
评论(0) 
编辑 
收藏 
举报