首页 > 编程语言> 文章详细

JavaScript中的BOM

2021-07-17 23:34:35 阅读：198 来源： 互联网

标签：console log 对象 JavaScript window BOM location

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>

标签：console,log,对象,JavaScript,window,BOM,location
来源： https://blog.csdn.net/tiben/article/details/118863612

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

JavaScript中的BOM