JavaScript中的BOM

2022-01-09 11:41:03

JavaScript中的BOM

一、BOM简介

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

DOM是文档对象模型，把文档当作一个对象来看待，它的*对象是document
BOM是浏览器对象模型，是把浏览器当做一个对象来看待，它的*对象window
3、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 () {});

三、定时器函数

定时器方法如下：
案例：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）异步:在做一件事情的同时去做其他的事情
执行栈和队列如下图：

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组成
注： ①host：主机(即服务器名)，例如：本地机的ip是127.0.0.1，或 localhost
②port：端口，65535个
0~1023：由系统使用
1024~65535：用户使用
③query：参数，以键值对的形式表示，参数之间用‘&’分隔，参数和地址之间用’?'分隔
例如：http://localhost:8000/admin/findUser?name=‘张三’&password=‘123’
3、location常用属性
案例：创建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的常用方法

六、nevigator对象与history对象

1、nevigator对象
①常用属性
②常用方法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属性：返回历史列表中的网址数
②常用方法

<script>
        console.log(history.length)
    </script>

码农公寓

JavaScript中的BOM