Web AP—BOM 浏览器对象模型

news/2024/11/17 10:05:20/

代码下载

BOM

BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。

BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。

BOM 缺乏标准，JavaScript 语法的标准化组织是 ECMA，DOM 的标准化组织是 W3C，BOM 最初是Netscape 浏览器标准的一部分。

DOMBOM
文档对象模型浏览器对象模型
DOM 就是把「文档」当做一个「对象」来看待把「浏览器」当做一个「对象」来看待
DOM 的顶级对象是 documentBOM 的质级对象是 window
DOM 主要学习的是操作页面元泰BOM 学习的是浏览器窗口交互的一些对象
DOM 是 W3C 标准规范BOM 是浏览器厂商在各自浏览器上定义的，兼容性较差

BOM的构成

BOM 比 DOM 更大，它包含 DOM。

顶级对象window包含：document，location，navigation，screen，history。

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

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

在调用的时候可以省略 window，前面学习的对话框都属于 window 对象方法，如 alert()、prompt() 等。

注意:window下的一个特殊属性 window.name

顶级对象window

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

  1. 有了 window.onload 就可以把 JS 代码写到页面元素的上方，因为 onload 是等页面内容全部加载完毕， 再去执行处理函数。
  2. window.onload 传统注册事件方式 只能写一次，如果有多个，会以最后一个 window.onload 为准。
  3. 如果使用 addEventListener 则没有限制。

DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等。Ie9以上才支持。如果页面的图片很多的话，从用户访问到onload触发可能需要较长的时间, 交互效果就不能实现，必然影响用户的体验，此时用 DOMContentLoaded 事件比较合适。

        window.onload = function() {let btOne = document.querySelector('.btOne');btOne.onclick = function() {alert('1');};};window.addEventListener('load', function() {let btTwo = document.querySelector('.btTwo');btTwo.addEventListener('click', function() {alert('2');});});window.addEventListener('DOMContentLoaded', function() {let btThree = document.querySelector('.btThree');btThree.addEventListener('click', function() {alert('3');});});

window.onresize 是调整窗口大小加载事件, 当触发时就调用的处理函数。 注意:

  1. 只要窗口大小发生像素变化，就会触发这个事件。
  2. 我们经常利用这个事件完成响应式布局。 window.innerWidth 当前屏幕的宽度
        window.addEventListener('DOMContentLoaded', function() {let resize = document.querySelector('.resize');window.addEventListener('resize', function() {if (window.innerWidth < 800) {resize.style.display = 'none';} else {resize.style.display = 'block';}});});

定时器

window 对象给我们提供了 2 个非常好用的方法-定时器：setTimeout()，setInterval()。

setTimeout() 方法用于设置一个定时器，该定时器在定时器到期后执行调用函数：

  1. window 可以省略。
  2. 这个调用函数可以直接写函数，或者写函数名或者采取字符串‘函数名()'三种形式。第三种不推荐
  3. 延迟的毫秒数省略默认是 0，如果写，必须是毫秒。
  4. 因为定时器可能有很多，所以我们经常给定时器赋值一个标识符。
        setTimeout(function() {alert('我爆了');}, 3000);function callback() {alert('爆炸了');}setTimeout(callback, 5000);let ad = setTimeout(function() {let ad = document.querySelector('.ad');ad.style.display = 'none';}, 3000);

clearTimeout()方法取消了先前通过调用 setTimeout() 建立的定时器。 注意:

  1. window 可以省略。
  2. 里面的参数就是定时器的标识符 。
        let clear = document.querySelector('.clear');clear.addEventListener('click', function() {window.clearTimeout(ad);});

setInterval() 定时器，setInterval() 方法重复调用一个函数，每隔这个时间，就去调用一次回调函数。注意:

  1. window 可以省略。
  2. 这个调用函数可以直接写函数，或者写函数名或者采取字符串 ‘函数名()’ 三种形式。
  3. 间隔的毫秒数省略默认是 0，如果写，必须是毫秒，表示每隔多少毫秒就自动调用这个函数。 4.因为定时器可能有很多，所以我们经常给定时器赋值一个标识符。
  4. 第一次执行也是间隔毫秒数之后执行，之后每隔毫秒数就执行一次。
        var num = 0;setInterval(function() {console.log(num)num++;}, 1000);

clearInterval()方法取消了先前通过调用 setInterval()建立的定时器。 注意:

  1. window 可以省略。
  2. 里面的参数就是定时器的标识符 。
        let add = document.querySelector('.add');let remove = document.querySelector('.remove');var timer = nulladd.addEventListener('click', function() {timer = setInterval(function() {console.log('你好！');}, 1000);});remove.addEventListener('click', function() {window.clearInterval(timer);});

倒计时案例：

        let hour = document.querySelector('.hour');let minute = document.querySelector('.minute');let second = document.querySelector('.second');let time = + new Date() + 5*3600*1000;let cd = setInterval(countdown, 1000);function countdown() {let now = + new Date();if (time > now) {let t = (time - now)/1000;console.log('t:' + t);let h = ('0' + parseInt(t/3600)).slice(-2);let m = ('0' + parseInt(t%3600/60)).slice(-2);let s = ('0' + parseInt(t%60)).slice(-2);hour.innerHTML = h;minute.innerHTML = ":" + m;second.innerHTML = ":" + s;} else {window.clearInterval(cd);}};

发送短信倒计时案例：

        let send = document.querySelector('.send');var count = 10send.addEventListener('click', function() {let timer = setInterval(function() {if (count > 0) {send.style.disable = true;send.innerHTML = count + ' s';} else {send.style.disable = false;send.innerHTML = '发送';count = 10;window.clearInterval(timer);}count--;}, 1000);})

this

this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，一般情况下this 的最终指向的是那个调用它的对象
现阶段，我们先了解一下几个this指向

  1. 全局作用域或者普通函数中this指向全局对象window(注意定时器里面的this指向window)
  2. 方法调用中，谁调用this指向谁
  3. 构造函数中this指向构造函数的实例
        console.log(this);function fn() {console.log(this);}fn();let o = {say: function() {console.log(this);}};let btn = document.querySelector('.btn');btn.addEventListener('click', function() {console.log(this);});o.say();function Fun() {console.log(this);}let f = new Fun();

JS 执行机制

同步任务，同步任务都在主线程上执行，形成一个执行栈。

异步任务，JS 的异步是通过回调函数实现的。一般而言，异步任务有以下三种类型:

  1. 普通事件，如 click、resize 等
  2. 资源加载，如 load、error 等
  3. 定时器，包括 setInterval、setTimeout 等 异步任务相关回调函数添加到任务队列中(任务队列也称为消息队列)

JS 执行机制：

  1. 先执行执行栈中的同步任务。
  2. 异步任务(回调函数)放入任务队列中。
  3. 一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。

由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环( event loop)。

        console.log('1');document.onclick = function() {console.log('click');}console.log('2');setTimeout(function() {console.log('3');});console.log('4');

location 对象

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

URL，统一资源定位符 (Uniform Resource Locator, URL) 是互联网上标准资源的地址。互联网上的每个文件都有 一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。

URL 的一般语法格式为:

protocol://host[:port]/path/[?query]#fragment 
http://www.itcast.cn/index.html?name=andy&age=18#link
组成说明
protocol通信协议 常用的http,ftp,maito等
host主机（域名）www.itheima.com
port端口号 可选，省路时使用方案的默认端口 如http的默认端口为80
pathV路径 由 零或多个!符号隔开的字符串，一般用来表示主机上的一个目录或文件地址
query参数 以键值对的形式,通过&符号分隔开来
fragment片段 ＃后面内容 常见于链接锚点

location 对象的属性：

location对象厲性返回值
location.href获取或者设置整个URL
location.host返回主机（域名） www.itheima.com
location.port返回端口号 如果未写 返回空字符串
location.pathname返回路径
location.search返回参数
location.hash返回片段 #后面内容 常见于链接锚点
        let jump = document.querySelector('.jump');let msg = document.querySelector('.jumpmsg');var jumptime = 5;jump.onclick = function() {msg.innerHTML = jumptime + 's后跳转'let jumptimer = setInterval(function() {if (jumptime > 0) {jump.style.disable = false;msg.innerHTML = jumptime + 's后跳转'} else {clearInterval(jumptimer);location.href = 'http://www.baidu.cn';}jumptime--;}, 1000);};

获取URL参数案例：

        console.log(location);console.log(location.search);let p = location.search.substr(1);console.log(p);let a = p.split('=');console.log(a);let d = document.querySelector('div');d.innerHTML = a[1] + "，欢迎您！"

location 对象的方法：

location对象方法返回值
location.assign()跟href 一样，可以跳转页面（也称为重定向页面)
location.replace()替换当前页面，因为不记录历史，所以不能后退页面
location.reload()重新加载页面，相当于刷新按钮或者{5 如果参数为true 强制刷新 ctrl+f5
        let baidu1 = document.querySelector('.baidu1');let baidu2 = document.querySelector('.baidu2');let refresh = document.querySelector('.refresh');baidu1.onclick = function() {location.assign('https://www.baidu.cn/');};baidu2.onclick = function() {location.replace('https://www.baidu.cn/');};refresh.onclick = function() {location.reload(true);};

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|WebOS |Symbian|Windows Phone)/i))) {window.location.href = ""; //手机 
} else {window.location.href = ""; //电脑 
}

history 对象

window 对象给我们提供了一个 history 对象，与浏览器历史记录进行交互。该对象包含用户(在浏览器窗口中) 访问过的 URL。

history对象方法作用
back()可以后退功能
forward()前进功能
go(参数）前进后退功能 参数如果是 1前进1个页面 如果是-1后退1个页面
        console.log(history.length);let back = document.querySelector('button');back.onclick = function() {// history.forward();history.go(1);};

http://www.ppmy.cn/news/1051242.html

相关文章

react通过ref获取函数子组件实例方法

react通过ref获取函数子组件实例方法

在react16之后带来了hooks之后&#xff0c;确实方便了很多组件开发&#xff0c;也加快了函数式编程的速度&#xff0c;但是当你通过useRef获取子组件的时候&#xff0c;又恰好子组件是一个函数组件&#xff0c;那么将会报一个错误&#xff1a;报这个错误的主要原因是函数组件没…
阅读更多...
算法通关村第5关【青铜】| Hash和队列的特征

算法通关村第5关【青铜】| Hash和队列的特征

1.Hash基础 &#xff08;1&#xff09;基础 哈希也称为散列&#xff0c;通过算法变成固定长度的输出值&#xff0c;存入对应的位置 例如这个算法为取模算法&#xff0c;indexnumber 模 7 存入1到15 &#xff08;2&#xff09;碰撞处理 当多个元素映射到同一位置上时就产生…
阅读更多...
拼多多商品详情API接入站点，实时数据json格式示例

拼多多商品详情API接入站点，实时数据json格式示例

作为国内最大的电商平台之一&#xff0c;拼多多数据采集具有多个维度。 有人需要采集商品信息&#xff0c;包括品类、品牌、产品名、价格、销量等字段&#xff0c;以了解商品销售状况、热门商品属性&#xff0c;进行市场扩大和重要决策&#xff1b; 商品数据&#xff1a;拼…
阅读更多...
opencv 矩阵运算

opencv 矩阵运算

1.矩阵乘&#xff08;*&#xff09; Mat mat1 Mat::ones(2,3,CV_32FC1);Mat mat2 Mat::ones(3,2,CV_32FC1);Mat mat3 mat1 * mat2; //矩阵乘 结果 2.元素乘法或者除法&#xff08;mul&#xff09; Mat m Mat::ones(2, 3, CV_32FC1);m.at<float>(0, 1) 3;m.at…
阅读更多...
Paython-datetime模块

Paython-datetime模块

datetime模块 本文介绍了Datetime,常用的内容 一：naive datetime和 aware datetime 的概念 二：datetime.date 三：datetime.time 四：datetime.datetime 五：时间之间的运算方法datetime.timedelta 六：使用pytz时区包,让datetime成为aware datetime naive datetime and awa…
阅读更多...
【深入理解jvm读书笔记】什么是引用分级（强引用、软引用、弱引用、虚引用）

【深入理解jvm读书笔记】什么是引用分级（强引用、软引用、弱引用、虚引用）

什么是引用分级&#xff08;强引用、软引用、弱引用、虚引用&#xff09; 引用设计引用分级的目的 引用 四种引用&#xff1a;强软弱虚 强引用是最传统的“引用”的定义&#xff0c;是指在程序代码之中普遍存在的引用赋值&#xff0c;即类似“Object objnew Object()”这种引…
阅读更多...
15. Canvas制作汽车油耗仪表盘

15. Canvas制作汽车油耗仪表盘

1. 说明 本篇文章在14. 利用Canvas组件制作时钟的基础上进行一些更改&#xff0c;想查看全面的代码可以点击链接查看即可。 效果展示&#xff1a; 2. 整体代码 import QtQuick 2.15 import QtQuick.Controls 2.15Item{id:rootimplicitWidth: 400implicitHeight: implicitWi…
阅读更多...
OrienterNet: visual localization in 2D public maps with neural matching 论文阅读

OrienterNet: visual localization in 2D public maps with neural matching 论文阅读

论文信息 题目&#xff1a;OrienterNet: visual localization in 2D public maps with neural matching 作者&#xff1a;Paul-Edouard Sarlin&#xff0c; Daniel DeTone 项目地址&#xff1a;github.com/facebookresearch/OrienterNet 来源&#xff1a;CVPR 时间&#xff1a…
阅读更多...
最新文章

Copyright @ 2022~2023