JavaScript BOM详解

最新推荐文章于 2022-07-12 22:49:53 发布

Lechar0327

最新推荐文章于 2022-07-12 22:49:53 发布

阅读量690

点赞数 4

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/liuqiao0327/article/details/107754514

版权

JavaScript 专栏收录该内容

33 篇文章

订阅专栏

JavaScript BOM

文章目录

- JavaScript BOM

一.概念及作用

BOM (Browser Object Model),即浏览器对象模型.

BOM提供了独立于内容而与浏览器窗口进行交互的对象,核心对象是window

DOM是为了操作文档节点出现的API, document是其核心对象

BOM是为了操作浏览器对象出现的API, window是其核心对象

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

二.BOM和DOM对比

BOM	DOM
浏览器对象模型	文档对象模型
把浏览器当做一个对象看待	把文档当做一个对象看待
BOM的顶级对象是window	DOM的顶级对象document
BOM主要是浏览器窗口交互的一些对象	DOM主要是操作页面元素
BOM是浏览器厂商在各自浏览器上定义的,兼容性较差	DOM是W3C标准规范

三.BOM五大核心对象

在这里插入图片描述
实际上window是顶层对象,包含了以下5中对象,并且BOM比DOM大

1.window对象

window对象是浏览器中的Global对象

window对象的双重角色:

1.它是JS访问浏览器窗口的一个接口
2.它是一个全局对象,定义在全局作用域中的变量,函数都会变成window对象的属性和方法.调用时都快可以省略window关键字

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

1.1 常用窗口事件

1.1.1 window.open() 打开新窗口

window.open(URL,name,specs) 接收3个参数,返回一个新窗口

URL:打开页面的URL,没有指定URL将打开新的空白窗口
name: _blank 新窗口打开,默认的. _self 当前页面打开

specs:一个逗号分隔的项目列表.支持以下值:

最小值100
width=pixels 
height=pixels  
left=pixels
top=pixels

示例:window.open('','',width=200,height=200);

1.1.2 window.close() 关闭新打开的窗口

window.close() 用于关闭浏览器窗口(新打开的)

1.1.3 resizeTo和resizeBy 调整窗口大小

window.resizeTo(width,height);
window.resizeBy(width,height);

1.1.4 window.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>
    <div></div>

1.1.5 window.onload 窗口(页面)加载事件

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

注意点:

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

除了以上方法,还可以使用DOMContentLoaded

DOMContentLoaded事件触发时,仅当DOM加载完成,不包括样式表,图片,flash等等 IE9以上支持!

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

 <script>
        window.addEventListener('load', function() {
            var btn = document.querySelector('button');
            btn.addEventListener('click', function() {
                alert('点击我');
            })
        })
        window.addEventListener('load', function() {
            alert(22);
        })
        document.addEventListener('DOMContentLoaded', function() {
            alert(33);
        })
    </script>

1.2 定时器

1.2.1 window.setInterval()

window.setInterval(回调函数,[延迟毫秒数])

表示每经过一定的毫秒后,执行一次相应的函数(重复执行)

注意:它的返回值是相当于一个id, 1,2,3,4…

var timer=setInterval(function(){},0);
console.log(timer);//1

1.2.2window.setTimeout()

表示经过一定的毫秒后,只执行一次相应的函数(不重复),俗称延时器

1.2.3 清除定时器

window.clearInterval()
window.clearTimeout()

1.3 弹框

1.3.1 提示框 alert

用户必须先关闭该消息框之后才能继续操作

1.3.2 确认框 confirm

confirm(‘需要确认的内容’)

选择确定返回true,选择取消,返回false

1.3.3 输入框 prompt

prompt(‘对话框提示的文本’,‘默认输入的文本’)

单击取消:返回null,单击确认,返回输入的文本

1.4 离开页面事件 onbeforeunload

当离开当前页面触发事件

window.onbeforeunload = function(e){// 离开当前页面触发事件
　　var e = window.event || e;
    e.returnValue = false;
}

2.history对象

history对象包含有关用户的访问历史记录

1.HTML5之前的方法

方法/属性	描述
length	返回浏览器历史表中的URL数量
forward()	加载history列表中的下一个URL
back()	加载history列表中的上一个URL
go()	加载history列表中的某个具体页面
history.go(-1)	后退一页
history.go(1)	前进一页

2.HTML5新出的history API

HTML5新接口,可以改变网址(存在跨域限制)而不刷新页面,这个强大的特性后来用到了单页面应用,比如vue-router,react-router-dom中

window.history.pushState() 向histroy栈的历史记录中追加一条记录
window.history.replaceState() 替换历史记录中的信息
window.history.onpopState() 是一个事件,在点击浏览器后退按钮或js调用forward(),back(),go()时触发,监听函数中可以传入一个event对象,event.state即为通过pushState()或replaceState()方法传入的data参数
```
//监听此函数:可获取之前在pushState和replaceState中传入的data
window.onpopstate = function(event) {
  console.log(event.state);
  console.log(window.history.state;);
};
```

注意:仅改变网址,网页不会真的跳转,也不会获取新的内容,本质上网页还停留在原页面

所以可以得出一个结论:

实际上单页面应用监听history模式使用的是window.history.onpopState()事件

这也是vue-router,react-router-dom实现history模式的真正原理!

3.location对象

location对象包含有关当前页的URL信息

一般在处理浏览器的URL地址时,会非常有用

方法/属性	描述
hash	从#号开始的URL (锚点)
host属性	设置或返回主机名和当前URL的端口号
hostname属性	当前URL的主机名
pathname属性	当前URL的路径部分
port属性	设置或返回当前URL的端口号
href属性	设置或返回完整的URL
protocol属性	当前URL的协议
assign()	加载新的文档
reload()	重新加载新的文档
replace()	用新的文档替换当前文档
search	从问号(?)开始的URL(查询部分)

4.navigator 对象

navigator对象用于提供与用户浏览器相关的信息

4.1 常用属性和方法

属性	描述
appCodeName	返回浏览器的代码名
appName	返回浏览器的名称
cookieEnabled	返回知名浏览器中是否启用cookied的布尔值
platform	返回运行浏览器的操作系统平台
appVersion	返回浏览器的平台和版本信息
`userAgent`	返回用户浏览器发送服务器的user-agent头部的值

<div id="example"></div>
<script>
txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>";
txt+= "<p>浏览器名称: " + navigator.appName + "</p>";
txt+= "<p>浏览器版本: " + navigator.appVersion + "</p>";
txt+= "<p>启用Cookies: " + navigator.cookieEnabled + "</p>";
txt+= "<p>硬件平台: " + navigator.platform + "</p>";
txt+= "<p>用户代理: " + navigator.userAgent + "</p>";
txt+= "<p>用户代理语言: " + navigator.systemLanguage + "</p>";
document.getElementById("example").innerHTML=txt;
</script>

浏览器代号: Mozilla

浏览器名称: Netscape

浏览器版本: 5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36

启用Cookies: true

硬件平台: Win32

用户代理: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36

用户代理语言: undefined

4.2 识别浏览器

在日常开发中,我们经常会使用这个对象来识别用户使用的是哪种浏览器

function validBrowser() {
    var u_agent = navigator.userAgent;
    var browser_name = 'Failed to identify the browser';
    if (u_agent.indexOf('Firefox') > -1) {
        browser_name = 'Firefox';
    } else if (u_agent.indexOf('Chrome') > -1) {
        browser_name = 'Chrome';
    } else if (u_agent.indexOf('Trident') > -1 && u_agent.indexOf('rv:11') > -1) {
        browser_name = 'IE11';
    } else if (u_agent.indexOf('MSIE') > -1 && u_agent.indexOf('Trident') > -1) {
        browser_name = 'IE(8-10)';
    } else if (u_agent.indexOf('MSIE') > -1) {
        browser_name = 'IE(6-7)';
    } else if (u_agent.indexOf('Opera') > -1) {
        browser_name = 'Opera';
    } else {
        browser_name += ',info:' + u_agent;
    }
    document.write('browser_name:' + browser_name + '<br>');
    document.write('u_agent:' + u_agent + '<br>');
}

在浏览器厂商中,还有比较特殊的浏览器:如360浏览器.360的兼容模式用的是IE、极速模式用的是chrom的内核

if (window.navigator.userAgent.indexOf('compatible') != -1) {
	alert('360兼容模式');
}
if(window.navigator.userAgent.indexOf('AppleWebKit') != -1) {
	alert('360极速模式');
}

4.3 识别移动端

<!-- 手机用户判断 -->
<script type="text/javascript">
    try {
        var urlhash = window.location.hash;
        if (!urlhash.match("fromapp")) {
            if ((navigator.userAgent.match(/(iPhone|iPod|Android|ios|iPad)/i)) && window.location.search == "") {
                //手机用户
            } else if (window.location.search == "?vt=1" && (navigator.userAgent.match(/(iPhone|iPod|Android|ios|iPad)/i))) {
                //非手机用户
            }
        }
    }
    catch (err) { }
</script>

5.screen对象

screen对象包含有关客户端显示屏幕的信息

属性	描述
width	返回显示器屏幕的宽度
height	返回显示器屏幕的高度
availHeight	返回显示屏幕的高度 (除 Windows 任务栏之外)
availWidth	返回显示屏幕的宽度 (除 Windows 任务栏之外)

四.原生对象与宿主对象

1.原生对象

本地对象 native object

ECMA所定义的对象

Number
String
Boolean
Object
Array
Function
Date
RegExp

还有内置对象(不需要实例化)

Math
Global
Error

2.宿主对象

host object 宿主对象是指:web的运行环境,即操作系统,浏览器

宿主提供的对象 => 宿主对象

window
BOM
DOM

五.Math对象

Math对象用于执行数学任务

Math是一个内置对象,不需要创建,可以直接使用

1.常用API

属性	描述
Math.PI	返回圆周率3.1415926… π
Math.ceil(x)	对数值x进行向上取整
Math.floor(x)	对数值x进行向下取整
Math.round(x)	对数值x进行四舍五入
Math.abs(x)	返回x的绝对值
Math.pow(x,y)	返回x的y次方
Math.sqrt(x)	返回x的平方根，如果参数 number 为负值，则 sqrt 返回 NaN
Math.min(a,b,c…)	返回abc…中的最小值
Math.max(a,b,c…)	返回abc…中的最小值
`Math.random()`	返回介于[0,1)之间的随机小数

注意：Math.random() 理论上能得到0，实际使用几乎不可能得到0

1.写一个函数 randomInt(min,max) 随机生成[min,max]区间的整数。

// 写一个函数 randomInt(min,max) 随机生成[min,max]区间的整数
function randomInt(min, max) {
    return Math.round(Math.random() * (max - min)) + min;
}

2.写一个函数 randomCode() 生成6位随机验证码(大小字母和数字)

// 写一个函数 randomCode() 生成6位随机验证码(大小字母和数字)
// 48-122
// 58-64 || 91-96
function randomCode() {
    var arr = [1, 1, 1, 1, 1, 1];
    for (var index in arr) {
        do {
            var num = randomInt(48, 122);//48-122
        } while ((num >= 58 && num <= 64) || (num >= 91 && num <= 96));
        arr[index] = String.fromCharCode(num);
    }
    // console.log( arr );//["h", "4", "a", "9", "l", "I"]
    return arr.join('');
}
var code = randomCode();
// console.log(code);

3.写一个函数 randomColor 生成随机的十六进制颜色值

// 写一个函数 randomColor 生成随机的十六进制颜色值
// #3e3e3e   #cccccc   #4a5bc6
// 0 1 2 3 4 5 6 7 8 9 a b c d e f
function randomColor() {
    var color = "#";
    var str = "0123456789abcdef";
    var array = [1, 1, 1, 1, 1, 1];
    for (var i = 0; i < array.length; i++) {
        var num = randomInt(0, 15);
        array[i] = str[num];
    }
    color += array.join('');
    return color;
}
console.log(randomColor());

六.三角函数

1.Math.sin(x) ----- 返回x的正弦

2.Math.cos(x) ----- 返回x的余弦

x 是弧度

一个角，可以用度数来表示，也可以用弧度来表示弧度更加符合计算机的计算模式【60°=π / 3】，【90°=π / 2】，【180°=π】，【360°=2π】弧度 = 角度 × π / 180

var angle = 60; //60度角
var radian = angle * Math.PI / 180; //计算出弧度

在这里插入图片描述