阅读 219

原生js 之 (BOM操作)

BOM(浏览器对象模型)

Window对象对应着浏览器窗口本身,它的属性和方法通常被统称为BOM (浏览器对象模型)

  • BOM 提供了独立于内容而与浏览器窗口进行交互的对象。
  • BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是Window
  • BOM由一系列相关的对象组成,每一个对象都提供了很多方法和属性
  • Window是BOM的顶级对象,所有的对象都是由Window延伸出来的,BOM也可以称为window的子对象

BOM的作用

  • BOM提供了一组访问窗口对象的一些方法,例如:移动窗口位置,改变窗口大小,打开窗口与关闭窗口,弹出对话框,进行导航以及获取客户的一些信息,如浏览器的品牌版本,屏幕分辨率。BOM最强大的功能是它提供了一个访问HTML页面的入口:document 对象,通过document 对象入口可以使用DOM的强大功能。

Window对象

认识Window对象

Window对象是浏览器的顶级对象,它具有双重角色

  • Window对象是js访问浏览器窗口的一个接口
  • Window对象是全局对象。定义在全局作用域的变量和函数都会变成Window对象的属性和方法。
    • 在使用Window身上的方法和属性时,因为Window对象是全局对象,所以不需要在它的属性和方法上加上前缀 Window,可直接调用它们。(Window的直接后代可不加前缀 window) 例如:alert() 、prompt() 等
    • 除Window直接后代以外的对象,则需要在它们的前面加上前缀 window对象的名字,例如document对象是window的直接后代不需要加前缀 ,但是document对象的后代却需要document 前缀,
  • 注意:window下有一个特殊有属性,window.name 。 此属性会在声明变量时需要注意 变量不能name

Window对象的事件

页面(窗口)加载事件 (2种)

  • window.onload是窗口(页面) 加载事件,当页面内容完全加载完成后在触发该事件(包括图像,html,css文件等)就调用处理函数。

    • 有了 window.onload就可以把 js代码写到页面元素的上方,因为window.onload是等页面的内容加载完毕再去执行处理函数。
    • 传统的注册事件方式只能注册一次,后者会覆盖前者,而使用addEventListener则没有限制
    window.onload=function(){};  //传统的注册事件方式 只能注册一个
    
    //使用addEventListener可能注册多个事件
    window.addEventListener("load",function(){});
    复制代码
  • DOMContentLoaded事件触发时,仅当DOM加载完成,不包括样式表,图片,flash等等。

    • 只支持IE9以上 浏览器
    • 优点:应用在图片加载较多时,交互效果不能实现,必然会影响用户的体验,此时使用DOMContentLoaded事件比较合适。
    //应用在图片加载较多时,交互效果不能实现。
    document.addEventListener("DOMContentLoaded",function(){
    })
    复制代码

调整窗口大小事件

  • window.onresize是调整窗口大小的加载事件,当调整窗口大小时触发事件并执行处理函数。

    • 注意:只要窗口大小发生像素变化,就会触发这个事件
    • 经常使用 onresize 完成响应式布局。window.innerWidth 当前屏幕的宽度
        <script>
            // 注册页面加载事件
            window.addEventListener('load', function() {
                var div = document.querySelector('div');
            	// 注册调整窗口大小事件
                window.addEventListener('resize', function() {
                    // window.innerWidth 获取窗口大小
                    console.log('变化了');
                    if (window.innerWidth <= 800) {
                        div.style.display = 'none';
                    } else {
                        div.style.display = 'block';
                    }
                })
            })
        </script>
    复制代码

UI事件

UI事件指的是哪些不一定与用户操作有关的事件,UI事件 如下表所示

类型描述
load当页面内容完全加载完后在Window上触发或 在所有框架加载完毕后在框架集上触发
unload当页面完全卸载后在Window上触发;
abort当用户停止下载过程时,如果嵌入的内容没有加载完毕,则在<object> 元素上触发
error当JavaScript发生错误时在 window上触发;
select当用户选择文本框( <input><texterea> )中的一个或多个字符时触发
resize当窗口或框架的大小变化时在window或框架上触发
scroll当用户滚动带滚动条的元素时,将会在该元素上触发,元素包含所有加载页面的滚动条。

定时器 (两种)

  • window.setTimeout() 一次性定时器(炸弹定时器)
  • window.setInterval() 循环定时器
  • 定时器属性回调函数:普通函数是按顺序执行,而回调函数在事件触发时,回头调用处理函数。

setTimeout() 一次性定时器

  • setTimeout() 这是一个回调函数
window.setTimeout(调用函数,[延迟的毫秒数]); 
复制代码

注意

  • window 可以省略
  • 调用函数可以直接写函数,或者函数名
  • 延迟的毫秒数可省略不写则为 0,如果写则,必须以毫秒
  • 因为平时使用定时器较多,可给定时器赋值一个标识
<body>
    <img src="images/ad.jpg" alt="" class="ad">
    <script>
        // 获取要操作的元素
        var ad = document.querySelector('.ad');
		// 开启定时器
        setTimeout(function() {
            ad.style.display = 'none';
        }, 5000);
    </script>
</body>
复制代码
清除 一次性定时器
window.clearTimeout(定时器的标识符)
复制代码
  • clearTimeout ( ) 方法取消,先前通过调用 setTimeout() 建立的定时器

  • window可以省略

  • clearTimeout里面的参数是定时器的标识符。

        <button>点击停止定时器</button>
        <script>
            var btn = document.querySelector('button');
    		// 开启定时器
            var timer = setTimeout(function() {
                console.log('爆炸了');
            }, 5000);
    		// 给按钮注册单击事件
            btn.addEventListener('click', function() {
                // 停止定时器
                clearTimeout(timer);
            })
        </script>
    复制代码

setInterval()循环定时器

window.setInterval(回调函数,[间隔的毫秒数])
复制代码
  • setInterval() 在间隔时间中重复调用函数,
  • 可省略 window
  • 调用函数可以直接写函数,或者函数名
  • 延迟的毫秒数可省略不写则为 0,如果写则,必须以毫秒
  • 第一次执行也是间隔毫秒之后执行,之后每隔毫秒数就执行一次。
<body>  
<script>
        // 1. setInterval 
        setInterval(function() {
            console.log('继续输出');
        }, 1000);
</script>
<body>
复制代码
清除循环定时器
window.clearInterval(定时器的标识符) 
复制代码
  • clearInterval()方法可取消,先前通过setInterval创建的循环定时器
  • window可以省略
  • 里面的参数就是定时器的标识符

案例:倒计时

1551321298787

1551321322188

<body>   
   <div>
        <span class="hour">1</span>
        <span class="minute">2</span>
        <span class="second">3</span>
    </div>
    <script>
        // 1. 获取元素(时分秒盒子) 
        var hour = document.querySelector('.hour'); // 小时的黑色盒子
        var minute = document.querySelector('.minute'); // 分钟的黑色盒子
        var second = document.querySelector('.second'); // 秒数的黑色盒子
        var inputTime = +new Date('2019-5-1 18:00:00'); // 返回的是用户输入时间总的毫秒数

        countDown(); // 我们先调用一次这个函数,防止第一次刷新页面有空白 

        // 2. 开启定时器
        setInterval(countDown, 1000);
		
        function countDown() {
            var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
            var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数 
            var h = parseInt(times / 60 / 60 % 24); //时
            h = h < 10 ? '0' + h : h;
            hour.innerHTML = h; // 把剩余的小时给 小时黑色盒子
            var m = parseInt(times / 60 % 60); // 分
            m = m < 10 ? '0' + m : m;
            minute.innerHTML = m;
            var s = parseInt(times % 60); // 当前的秒
            s = s < 10 ? '0' + s : s;
            second.innerHTML = s;
        }
    </script>
<body>
复制代码

this的指向问题

  • 一般情况下,this指向的是函数的调用者

    • 全局作用域或者普通函数中this指向的是全局对象window(注意定时器的this指向的是window)
  • 在方法中调用this,谁调用this ,this指向谁

  • 构造函数中this指向构造函数的实例

 <body>   
    <button>点击</button>
    <script>
        // this 指向问题 一般情况下this的最终指向的是那个调用它的对象
        // 1. 全局作用域或者普通函数中this指向全局对象window( 注意定时器里面的this指向window)
        console.log(this);
        function fn() {
            console.log(this);
        }
        window.fn();
        window.setTimeout(function() {
            console.log(this);
        }, 1000);
        // 2. 方法调用中谁调用this指向谁
        var o = {
            sayHi: function() {
                console.log(this); // this指向的是 o 这个对象
            }
        }
        o.sayHi();
        var btn = document.querySelector('button');
        btn.addEventListener('click', function() {
                console.log(this); // 事件处理函数中的this指向的是btn这个按钮对象
            })
        // 3. 构造函数中this指向构造函数的实例
        function Fun() {
            console.log(this); // this 指向的是fun 实例对象
        }
        var fun = new Fun();
    </script>
<body>
复制代码

location对象

  • window对象提供了一个location属性用于获取 或设置窗体的URL,并且可以用于解析URL。因为这个属性返回的是一个对象,所以我们将这个属性也称为location对象
  • 如果想获取文档中的URL字符串,有四种方式:
    1. document.location;
    2. document.location.href;
    3. document.URL;
    4. document.loction.toString();

解析URL地址的组成

URL:http://www.w3c.com:80/index.jsp? name=jim&when=2021#first
解析:protocol://hostname:port/pathname ? search #hash
复制代码
属性含义
protocol通信协议,常用http, ftp、maito等http:
hostname服务器域名www.w3c.com
port端口号:可省略,如http的默认端口为 80:80
pathname一般用于表示主机的一个目录或文件地址/index.jsp
search“?” 后面的部分,为查询字符串,以键值对的形式通过&符号分隔开来?name=jim&when=2021
hash返回 “#” 后面的内容,常见于链接锚点#first
host相当于hostname+portwww.w3c.com:80
href获取或设置整个URLwww.w3c.com:80/index.jsp? name=jim&when=2021#first

location对象可以改变浏览器的历史

  1. location.assign(url) 跟window.href与window.location 效果一样
  2. location.replace( url ) 替换当前页面 不能 单击前进后退按钮 跳转页面
  3. location.reload( force ) 重新加载页面 force为 true 时从服务器重载,force为false则从缓存中重载。
location对象方法返回值
location.assign(url)跟window.href与window.location 效果一样,可以跳转页面(也称为重定向页面)
location.replace(url)替换当前页面,从浏览器栈中删除本页页面,所以不能后退页面
location.reload(force)重载页面。相当于刷新页面,
<body>   
   <button>点击</button>
    <script>
        var btn = document.querySelector('button');
        btn.addEventListener('click', function() {
            // 记录浏览历史,所以可以实现后退功能
            location.assign('http://www.itcast.cn');
            // 不记录浏览历史,所以不可以实现后退功能
            location.replace('http://www.itcast.cn');
            //重新加载页面,相当于单击刷新按钮
            location.reload(true);
        })
    </script>
<body>
复制代码

history对象 (前进与后退)

  • window对象提供的 history 对象 ,与浏览器历史记录进行交互。

    history对象作用
    back()后退一页
    forward ( )前进功能
    go( 参数)前进后退功能,参数1为前进一页,参数-1为后退一页 参数0为刷新当前 页面
  • history.length=0 可以确定用户是否一开始就打开了某个页面

  • history对象一般在实际开发中比较少用,但是会在一些OA办公系统中见到。

    if(history.length==0){
      //这是用户打开窗口后的第一个页面
    }
    复制代码

screen对象(客户端屏幕信息)

  • screen对象包含有关客户端显示屏幕的信息,例如显示器的尺寸大小,颜色、位置等。

  • screenc对象具体支持的属性会随着浏览器及其版本的改变而发生变化。不过screen对象至少能支持如下属性。

    属性描述
    availTop窗口可放置的最顶部位置 (以像素为单位)
    availLeft窗口可放置的最左边位置 (以像素为单位)
    availWidth屏幕的宽度(以像素为单位)
    avaiHeight屏幕的高度(以像素为单位)
    colorDepth屏幕的颜色深度
    pixelDepth屏幕上每个像素的位元素

navigator对象 (浏览器的相关信息)

通过navigator对象 可以检查操作系统、浏览器、安全策略、语言以及是否用cookie。

注意

  • navigator数据可被浏览器使用者更改
  • 一些浏览器对测试站点会识别错误。
  • 浏览器无法报告晚于浏览器发布的新操作系统。

下面前端代码可以判断用户打开的是哪个端的页面,实现跳转。

<script>
if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
    window.location.href = "";     //手机
 } else {
    window.location.href = "";     //电脑
 }
<script>
复制代码

JS是单线程

javaScript语言的最大特点就是单线程,也就是同一时间只能做一件事。比如在操作DOM元素进行添加和删除操作,不能同时进行。应该先进行添加,之后再删除。

单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。如果前一个任务执行耗时很长,后一个任务就不得不一直等着。
  这样所导致的问题是:如果 JS执行时间过长,这样就会造成页面的渲染不连贯,导致页面加载阻塞的感觉
复制代码

同步任务与异步任务

单线程导致的问题就是后面的任务需要等待前面任务的完成。为了解决这一问题HTML5 提出web Worker标准,允许javaScript脚本创建多个线程,但是子线程完全受主线程控制。于是,js中出现了同步任务和异步任务。

同步任务

  • 前一个任务完成后再执行后一个任务,程序的执行顺序与任务的排列顺序是一致的。
  • 同步任务都是在主线程上执行,形成一个执行栈

异步任务

  • 异步当执行一件耗时较长的任务时,可同时处理其他任务。
  • js的异步是通过回调函数实现的一般异步有三种类型。
    • 普通事件:如 click,resize等
    • 定时器:setlnterval、setTimeout等
    • 资源加载: 如 load 、error等
  • 异步任务相关回调函数添加到任务队列中(任务队列也称为消息队列 )

js执行机制(事件循环)

  1. 按顺序执行(执行栈)则为同步任务
  2. 异步任务(回调函数)放入任务队列中
  3. 一旦执行栈中的所有同步任务执行完毕,系统就会按次序读取任务队列中的异步任务,于是被读取的异步任务结束等待状态,进入执行栈,开始执行。
  4. 由于主线程不断的重复获得任务,执行任务,再获取任务,再执行,所以这种机制被称为事件循环

image-20210622102801355

1551435398306

原生js 之 (DOM操作) >-<

「点赞、收藏和评论」

❤️关注+点赞+收藏+评论+转发❤️,鼓励笔者创作更好的文章,谢谢🙏大家。

文章分类
前端
文章标签