JavaScript学习之BOM（BOM，Windows事件，JavaScript执行机制）

最新推荐文章于 2024-05-08 14:48:03 发布

星河梦~

最新推荐文章于 2024-05-08 14:48:03 发布

阅读量695

点赞数 7

分类专栏： JavaScript学习文章标签： javascript

本文链接：https://blog.csdn.net/weixin_53186633/article/details/118979281

版权

JavaScript学习专栏收录该内容

23 篇文章 1 订阅

订阅专栏

BOM简介

概念

首先看一下JavaScript的组成部分：
在这里插入图片描述
从上图可以看出：DOM是页面文档对象模型，BOM是浏览器对象模型

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

DOM与BOM的区别

1、DOM(Document Object Model)：一个文档就是一个DOM树。Html是树的根，标签、标签的属性、标签里的文本都是树的节点。核心对象（顶级对象）是document。

2、BOM(Brower Object Model):浏览器对象模型。核心对象（顶级对象）是window。可以独立于内容与浏览器进行交互.

BOM的构成：
在这里插入图片描述

window 对象常见事件

窗口加载事件

（1）window.onload事件：是窗口（页面）加载事件，当文档内容（包括图像、脚本文件、CSS文件等）完全加载完成会触发该事件。

实现方式：
方式一：

<body>
    <script>
        function fun(){
            alert('窗口加载事件')
        }
    </script>
</body onload="fun()">

方式二：

window.onload=function(){
    alert('页面加载事件')
}

方式三：事件监听

window.addEventListener('load',function(){
    alert('页面加载事件')
})

（2）document.DOMContentLoaded ： document.DOMContentLoaded加载事件，会在DOM加载完成时触发，这里所说的加载不包括CSS样式表、图片和flash动画等额外内容的加载。

调整窗口大小事件

window.onresize：当浏览器窗口大小发生改变时触发该事件

实现方式：
方式一：

window.onresize=function(){
 	alert('窗口大小改变了')
}

方式二：事件监听

window.addEventListener('resize',function(){
	alert('窗口大小改变了')
})

定时器

在这里插入图片描述

（1）setTimeout(function(){},时间)：在给定的时间(以毫秒为单位)之后，执行函数。返回值是一个定时器对象。

  变量名 = setTimeout(function(){},时间)

（2）clearTimeout(定时器对象)：清除setTimeout定时器对象。

练习

1.两秒后弹出消息框

法一：
setTimeout('alert("javaScript");',2000)   //2秒之后弹出消息框

法二：
setTimeout(function(){
   alert('JavaScript')
},2000)

法三：
function fn(){
    console.log("2秒后显示")
}
var timer=setTimeout(fn,2000)

clearTimeout(timer)       //清除定时器对象

2、3秒钟后让图片消失

function fn(){
   var img=document.querySelector('img')  //获取图片
   img.style.display='none'     //图片消失
}
var timer=setTimeout(fn,3000)

JavaScript执行机制

（1）单线程：JavaScript程序是单线程的，即同一个时间只能做一件事

进程与线程 ：

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

（2）同步：就是前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的

（3）异步：在做一件事情的同时，可以去做其他的事情

location对象

location对象：地址对象

(1)URL(Uniform Resource Locator)：统一资源定位符

URL组成：

在这里插入图片描述
（2）location常用属性：

location.href : 完整url地址
location.hostname：主机名
location.port：端口号
location.protocol：协议
ocation.search：’?'之后的参数字符串

例如：

<button>页面跳转</button>
    <script>
        var btn = document.querySelector('button')
        btn.addEventListener('click',function(){
            location.href = 'http://www.baidu.com'
        })
    </script>

请添加图片描述

navigator对象

navigator对象：导航对象

常用属性：

appCodeName：返回浏览器的内部名称(即浏览器的内核)
appName：返回浏览器完整名称
appVersion：浏览器平台和版本信息
cookieEnabled：浏览器是否启用cookie
platform：操作系统平台

例如：

console.log("内核："+navigator.appCodeName)
console.log("名称："+navigator.appName)
console.log("版本："+navigator.appVersion)
console.log("cookie："+navigator.cookieEnabled)
console.log("操作系统："+navigator.platform)
console.log("历史记录："+history.length)

history对象

(1)常用属性：

history.length：返回历史列表中的网址数

(2)常用方法：

history.back()：加载历史记录中的前一个URL地址
history.forward()：加载历史记录中的下一个URL地址
history.go()：加载历史记录中给定的URL地址

注意history后跟的关键字。

星河梦~

关注

7
点赞
踩
1

收藏

觉得还不错? 一键收藏
10
评论
JavaScript学习之BOM（BOM，Windows事件，JavaScript执行机制）

目录BOM简介概念DOM与BOM的区别window 对象常见事件窗口加载事件调整窗口大小事件定时器练习JavaScript执行机制location对象navigator对象BOM简介概念首先看一下JavaScript的组成部分：从上图可以看出：DOM是页面文档对象模型，BOM是浏览器对象模型BOM：浏览器对象模型（Brower Object Model，BOM）提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。DOM与BOM的区别1、DOM(Document Objec
复制链接

扫一扫

专栏目录