Loading...
墨滴

CYF

2021/04/26  阅读:77  主题:默认主题

初识BOM

img
img

1、BOM概述

1.1 什么是BOM

BOMbrowser Object Model) 即浏览器对象模型,它提供了独立于内容而且与浏览器窗口进行交互的对象,其核心就是 window对象

BOM 由一系列的对象构成,并且每个对象都提供了很多方法和属性

但是需要注意的是:BOM缺乏标准,js语法的标准化组织是ECMADOM的标准化组织是W3CBOM最初是网景浏览器标准的一部分

下面来比较一下DOMBOM 的区别:

序号 dom BOM
1 文档对象模型 浏览器对象模型
2 把文档当成对象来看待 把浏览器当成对象来看待
3 DOM 的顶级对象是 document BOM的顶级对象是 window
4 DOM主要学习的是操作页面元素 BOM 主要学习浏览器窗口交互的一些对象
5 W3C 标准规范 浏览器厂商在各自浏览器上定义的,兼容性较差

1.2 BOM的构成

DOM描述的处理网页内容的方法和接口, 而BOM 描述的是与浏览器窗口进行交互的方法和接口

但是BOM范围比DOM大,因为它包含DOM

img
img

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

  1. 它是js访问浏览器的一个接口
  2. 它还是一个全局变量,定义在全局作用域中的变量、函数都会变成window对象的属性和方法

var声明的全局变量和函数才都成为window对象的属性和方法,用 letconst 则不能

var namer = '张三'
function foo({
    console.log('hello, ' + namer)
}

console.log(window.namer);  // 张三
window.foo();

alert()、prompt()等对话框都属于window对象方法,只是在调用的时候可以省略 window

window.alert('123');

window下还有一个特殊属性 window.name

2、window对象的常见事件

img
img

2.1 窗口加载事件

window.onload = function({}

window.onload 窗口(页面)加载事件当文件内容完全加载完成会触发该事件(包括图像、脚本文件、CSS文件等),就会调用的处理函数

<body>
    <button>按钮</button>
    <script>
        window.onload = function({
            var btn = document.querySelector('button');
            btn.addEventListener('click'function({
                alert('123');
            })
        }
    
</script>

</body>

注意:

  • 有了 window.onload 就可以把js代码写到页面元素的上方,因为 onload 是等页面内容全部加载完成之后,再去执行处理函数
  • window.onload 这种注册方式只能写一次,如果有多个,会以最后一个 window.onload 为准
  • 但是,如果使用 addEventListener 则没有限制
window.addEventListener('load'function({
    var btn = document.querySelector('button');
    btn.addEventListener('click'function({
        alert('123');
    })
})

DOMContentLoaded 事件

document.addEventListener('DOMContentLoaded'function() {})

DOMContextLoaded 事件触发时,仅当DOM 加载完成,不包括样式表、图片、flag等等

如果页面的图片很多的话,从用户访问到 onload 触发可能需要较长的时间,交互效果就不能实现,必然影响用户的体验,此时用 DOMContentLoaded 事件比较合适

DOMContentLoaded 只有IE9以上的才能支持

window.addEventListener('DOMContentLoaded'function({
    var btn = document.querySelector('button');
    btn.addEventListener('click'function({
        alert(123);
    })
})

2.2 调整窗口大小事件

window.onresize = function({}

window.addEventListener('resize', functiuon() {})
  • window.onresize 是调整窗口大小加载事件,当窗口大小一发生改变就调用的处理函数
  • 我们经常利用这个事件完成响应式布局,window.innerWidth 当前屏幕宽度
// 优先加载页面
window.addEventListener('load'function({
    var div = document.querySelector('div');
    // 调整窗口
    window.addEventListener('resize'function({
        console.log(window.innerWidth);  // 打印窗口尺寸
        console.log('变化');
        // 窗口小于800 隐藏div
        if (window.innerWidth <= 800) {
            div.style.display = 'none';
        } else {
            div.style.display = 'block';
        }
    })
})

3、定时器

img
img

window 对象给我们提供了2个非常好用的方法 --- 定时器

  • setTimeout():延时定时器,延迟一段时间之后执行
  • setInterval():间隔定时器,每间隔一段时间执行一次

3.1 setTimeout 定时器

window.setTimeout(调用函数, 延迟时间);
  • 这个 window 在调用的时候可以省略
  • 这个延时事件单位是毫秒 但是可以省略,省略默认是0
  • 这个调用函数可以直接写,也可以写函数名,外部调用
  • 我们的页面可能会很多的定时器,我们可以给定时器加上标识符(名字)

我们可以使用 clearTimeout() 来清除定时器

window.clearTimeout('定时器名')
  • clearTimeout() 方法取消了先前通过调用 setTimeout() 建立的定时器
  • window 可以省略

栗子:

<button>清除定时器</button>

添加定时器

// 1、2000ms 即2秒后输出
var time1 = setTimeout(function({
    console.log('时间到了');
}, 2000);

// 2、外部调用,有两种方式,第二种有点像字符串,需要加上()
// setTimeout(func, 2000);
setTimeout('func()'2000);  // 不推荐

function func({
    console.log('爆炸了');
}

清除定时器:

// 点击按钮 终止定时器
btn.addEventListener('click'function({
    clearTimeout(timer);
})

3.2 setInterval() 定时器

window.setInterval(回调函数, [间隔的毫秒数]);
  • setInterval() 方法重复调用一个函数,每隔一段时间,就取调用一次这个回调函数

注意:

  1. window 可以省略
  2. 这个回调函数可以直接写函数,也可以写函数名调用,或者采取字符串 ‘函数名()’ 三种形式
  3. 间隔的毫秒数省略默认是0,如果写,必须是毫秒,表示每隔多少时间就自动启动这个函数
  4. 我们也同样可以给这个定时器赋值一个标识符

我们可以使用 clearInterval() 来清除定时器

window.clearInterval('定时器名');
  • clearInterval() 方法取消了先前通过调用 setInterval() 建立的定时器
  • window 同样可以省略

栗子:

<button class="start">开始</button>
<button class="end">停止</button>
var start = document.querySelector('.start');
var stop = document.querySelector('.end');
var timer = null// 定义一个全局变量timer, 给它赋值一个空对象,这样结束函数就可以调用timer了

// 点击开始
start.addEventListener('click'function({
    timer = setInterval(function({
        console.log('你好吗!');
    }, 1000);
})

// 点击结束
stop.addEventListener('click'function({
    clearInterval(timer);
})

在定时器中,this指向的调用它的对象,如:上面定时器中的this指向调用它的按钮

4、三大对象

img
img

4.1 location对象

window对象为我们提供了一个location属性用于获取或设置URL,并且可以用于解析URL。因为这个属性返回的是一个对象,所以我们把这个属性称为 location对象


了解一下url

url唯一资源定位符

互联网上的每一个文件都有一个唯一的url,它包含的信息指出文件的位置以及浏览器应该怎么出处理它

urls一般语法格式:

protocol://host[:port]/path/[?query]#frahment

https://baike.baidu.com/item/%E5%91%A8%E6%B7%B1/15089196?fr=aladdin
组成 说明
protocol 通信协议 常用的httpftpmaito
host 主机(域名)baike.baidu.com
port 端口号 (可省略),省略时使用方案的默认端口号 如 http的默认端口号为80
path 路径 由 0 或 多个 / 符号隔开的字符串,一般用来表示主机上的一个目录或文件地址
query 参数 以键值对的形式,通过 & 符号分隔开来
fragment 片段 # 后面内容 常见于链接 锚点
img
img

1、location 对象属性

location 对象属性 返回值
location.href 获取或者设置 整个URL
location.host 返回主机名(域名) www.baidu.com
location.port 返回端口号 如果未写返回 空字符串
location.pathname 返回路径
location.search 返回参数
location.hash 返回片段 #后面内容 常见于链接、锚点

3秒后跳转到另外一个页面

let div = document.querySelector('div')
timer = 3
setInterval(function({
    if (timer === 0) {
        location.href = 'https://www.baidu.com'
    } else {
        div.innerHTML = '您将在' + timer + 's后跳转到百度首页'
        timer--;
    }
}, 1000)

2、location 对象的方法

location 对象方法 返回值
location.assign() href 一样,可以跳转页面(也称为重定向页面)
location.replace() 替换当前页面,因为不记录历史,所有不能后退
location.reload() 重新加载页面,相当于刷新按钮或者 f5 如果参数为true,表示强制刷新 Ctrl + f5
var btn = document.querySelector('button');
btn.addEventListener('click'function({
    // location.assign('http://www.baidu.com');  // 跳转
    // location.replace('http://www.baidu.com');  // 替换
    location.reload();  // 重新加载
})

4.2 navigator对象

navigator 对象包含有关浏览器的信息,它有很多属性,我们常用的就是 userAgent,该属性可以返回由客户机发送给服务器的 user-agent 头部的值

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

if ((navigator.userAgent.match (/ (phone | pad | pod | iPhone | iPod | ios | iPad | Android | Mobile | BlackBerry | IEMobile | MQQBrowser | JUC | Fennec | wOSBrowser | BrowserNG | WebosISymbian | Windows Phone)/i))) {
 location.href =””;   // 手机
else {
 location.href =”";  // 电脑

4.3 history对象

window对象提供了一个 history对象,与浏览器历史记录进行交互,该对象包含用户访问过的url

history 对象方法 作用
back() 可以后退功能
forward() 前进功能
go(参数) 前进后退功能 参数如果是1,前进一个页面;参数如果是-1,后退一个页面
<a href="index.html">index</a> <button>前进</button>
let btn = document.querySelector('button')
btn.addEventListener('click'function({
    // history.forward();  // 前进
    history.go(1);
})

CYF

2021/04/26  阅读:77  主题:默认主题

作者介绍

CYF