javascript初探(五)------ BOM

目录

一、概述

  • BOM:浏览器对象模型,提供了方法和属性,让开发者可以通过js对浏览器进行操作
  • 包含:window对象、navigator对象、location对象、history对象、screen对象

二、window对象

  • window对象:代表整个浏览器的窗口,也是网页的全局对象,可以省略window.这个前缀
  • window对象属性
    属性 描述
    document 对 Document 对象的只读引用
    innerHeight 窗口的文档显示区的高度,innerWidth宽度
    localStorage 在浏览器中存储 key/value 对。没有过期时间
    sessionStorage 在浏览器中存储 key/value 对。 在关闭窗口或标签页之后将会删除这些数据
  • window对象方法
    方法 描述
    alert() 警告框
    confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框
    prompt() 显示可提示用户输入的对话框
    setInterval() 定时器:按照指定的周期(以毫秒计)重复调用函数或计算表达式
    clearInterval() 取消由 setInterval() 设置的 timeout
    setTimeout() 延时器:在指定的毫秒数后调用函数或计算表达式,参数同定时器
    clearTimeout() 取消由 setTimeout() 方法设置的 timeout
    scrollBy() 相对滚动,按照指定的像素值来滚动内容
    scrollTo() 绝对滚动,把内容滚动到指定的坐标
    getComputedStyle() 获取指定元素的 CSS 样式
    print() 调出打印对话框
  • 页面自动向下滚动
    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>菜鸟教程(runoob.com)</title>
        <script>
            window.onload = function() {
                let btn = document.querySelector("button");
                btn.addEventListener("click", scrollWindow);
    			
    			// 定义个全局定时器序号变量,结合类
    			let timer;
                function scrollWindow() {
                	// 打开一个定时器之前,先关闭之前打开的定时器,
                	// 防止一个元素节点叠加多个定时器,非法值不会报错
                    clearInterval(timer);
                    // 存储循环次数
                    let i = 0;
                    // 定数器参数一:回调函数(此处为匿名函数)
                    timer = setInterval(() => {
                        // 滚动像素数,第一个参数x,第二个y
                        window.scrollBy(0, 10);
                        // 回调函数循环4次关闭
                        if (i > 4) {
                            // 关闭定时器,否则会一直持续到关闭页面
                            clearInterval(timer);
                            // 动画:此处可以再加含定时器的函数,可由外部传入,例如改变元素节点样式
                        }
                    // 每次调用此函数,i加一
                    i++;
                    // 定时器参数二:循环间隔为1000毫秒
                    }, 1000);
                }
            }
        </script>
    </head>
    
    <body>
    	<!-- 按钮开启定时器 -->
        <button onclick="scrollWindow()">启动滚动</button>
        <p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 </p>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
    	<!-- 写足够多个,知道把页面右边的滚动条写出来 -->
    
        <p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 </p>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
    
    </body>
    
    </html>
    

    定时器: 可以对同一个元素设置多个,丢失了定时器的timer则丢失了关闭定时器的句柄,只能关闭页面来关闭定时器

三、navigator对象

  • 功能:用来区分浏览器(chrome、Firefox、IE),基本被废弃了
  • 区分浏览器
    window.onload = function() {
        let ua = navigator.userAgent;
        if (/firefox/i.test(ua)) {
            alert("火狐浏览器");
        } else if (/chrome/i.test(ua)) {
            alert("chrome浏览器");
        } else if (/msie/i.test(ua)) {
            alert("IE浏览器");
        } else if ("ActiveXObject" in window) {
            alert("IE11浏览器");
        }
    }
    

四、location对象

  • 功能:当前浏览器地址栏信息
  • 地址操作
    // 在当前页面内触发页面跳转,生成历史记录
    location.assign("http://baidu.com");
    // 功能同上,不生成历史记录
    location.replace("http://baidu.com");
    
    // 在当前页面内触发页面跳转,相对路径,生成历史记录
    location.assign("bubble.html");
    // 功能同上,不生成历史记录
    location.replace("bubble.html");
    
    // 刷新页面(使用缓存),默认参数为false,可不填
    // 若参数为true,浏览器重新向服务器请求页面,ctrl+F5
    location.reload();
    

五、history对象

  • 功能:代表浏览器历史记录,控制历史记录跳转
  • 操作浏览记录
    // 相当于浏览器的后退按钮,等同于history.go(-1);
    history.back();
    // 相当于浏览器的前进按钮,等同于history.go(1);
    history.forward();
    // 本次打开浏览器的历史记录数量
    let num = history.length;
    // 前进一个
    history.go(1);
    // 后退一个
    history.go(-1);
    

六、screen对象

  • 功能:用户显示器相关信息,移动端用的多

上一篇:javascript初探(四)------事件对象

上一篇:对前端开发的补充:BOM和Bootstrap


下一篇:Kubernetes Deployment 源码分析(一)