JavaScript中的BOM

JavaScript中的BOM


目录


一、BOM简介

1、BOM(Brower Object Model)
浏览器对象模型,提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是window
2、BOM和DOM区别

  • DOM是文档对象模型,把文档当作一个对象来看待,它的*对象是document
  • BOM是浏览器对象模型,是把浏览器当做一个对象来看待,它的*对象window
    3、BOM的构成
    JavaScript中的BOM

二、window对象的常见事件

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

window.onload = function () {};  //方式一
window.addEventListener('load', function () {});  //方式二

(2)document.DOMContentLoaded:document.DOMContentLoaded加载事件,会在DOM加载完成时触发,这里所说的加载不包括CSS样式表、图片和flash动画等额外内容的加载
2、调整窗口大小事件window.onresize
当调整window窗口大小的时候,就触发window.onresize事件,调用事件处理函数

// 方式1
window.onresize = function () {};
// 方式2
window.addEventListener('resize', function () {});

三、定时器函数

定时器方法如下:
JavaScript中的BOM案例:3秒后页面中的图片消失

<body>
    <img src="../image/1.jfif">
    <script>
        function fn(){
            var img = document.querySelector('img')  //获取标签
            img.style.display = 'none'   //style为样式规则
        }
        var hidden = setTimeout(fn,3000)
    </script>
</body>

四、JavaScript执行机制

(1)单线程:JavaScript语言的一大特点就是单线程,即同一个时间只能做一件事

A、进程:程序的一次动态运行,有独立的内存空间
B、线程:是进程的运行单位,一个进程可以分为若干个线程

(2)同步:前一个任务结束后再执行后一个任务,程序的执行顺序与任务的排列顺序是一致的、同步的
(3)异步:在做一件事情的同时去做其他的事情
执行栈和队列如下图:
JavaScript中的BOM

console.log(1);
setTimeout(function () {
  console.log(3);
}, 0);
for (var i = 0, str = ''; i < 900000; i++) {
  str += i;	 // 利用字符串拼接运算拖慢执行时间
}
console.log(2);

五、location对象

1、location对象:地址对象
2、URL(Uniform Resource Locator):统一资源定位符
URL组成
JavaScript中的BOM注: ①host:主机(即服务器名),例如:本地机的ip是127.0.0.1,或 localhost
②port:端口,65535个
0~1023:由系统使用
1024~65535:用户使用
③query:参数,以键值对的形式表示,参数之间用‘&’分隔,参数和地址之间用’?'分隔
例如:http://localhost:8000/admin/findUser?name=‘张三’&password=‘123’
3、location常用属性
JavaScript中的BOMJavaScript中的BOM案例:创建login.html登录页面

<form action="index.html">
  用户名: <input type="text" name="uname">
  <input type="submit" value="登录">
</form>
<script>
console.log(location.search);  // 结果为:?uname=andy
    // 1. 去掉search中的问号“?”
    var params = location.search.substr(1);
    console.log(params); // 结果为:uname=andy
    // 2. 把字符串分割为数组
    var arr = params.split('=');
    console.log(arr); // 结果为:["uname", "andy"]
    var div = document.querySelector('div');
    // 3. 把数据写入div中
    div.innerHTML = arr[1] + '欢迎您';
</script>

4、location的常用方法
JavaScript中的BOM

六、nevigator对象与history对象

1、nevigator对象
①常用属性
JavaScript中的BOM②常用方法javaEnabled():指定是否在浏览器中启用Java
案例

<body>
    <script>
        console.log('内核:' + navigator.appCodeName)
        console.log('名称:' + navigator.appName)
        console.log('版本:' + navigator.appVersion)
        console.log('cookie:' + navigator.cookieEnabled)
        console.log('操作系统' + navigator.platform)
    </script>
</body>

2、history对象
①常用属性:history.length属性:返回历史列表中的网址数
②常用方法
JavaScript中的BOM

<script>
        console.log(history.length)
    </script>
上一篇:前端(六)


下一篇:【前端】JavaScript学习笔记(五)——操作BOM与DOM对象