博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JavaScript基础学习——BOM操作
阅读量:3916 次
发布时间:2019-05-23

本文共 3030 字,大约阅读时间需要 10 分钟。

一、认识BOM

JS是由ECMAScript(ECMA)、DOM(W3C)和BOM(无规范)。BOM(Browser Object Model:浏览器对象模型),提供了独立于内容而与浏览器进行交互的对象,用它来实现窗口与窗口之间的通信。BOM的核心对象是window。

1、BOM组成

window - frames history location navigator screen

2、BOM与DOM的区别

(1)DOM通过脚本动态地访问和更新文档内容、结构和样式的接口。

(2)BOM通过脚本操作浏览器的各个功能组件的接口。

区别:

(1)DOM提供了处理网页内容的接口,而BOM提供了与浏览器交互的接口;
(2)DOM的核心是document,BOM的核心是window。

二、window对象

打开一个浏览器,就自动创建了一个window对象。window就是浏览器打开的窗口。

1、常用属性

1.1、document  文档结构

  
Document

1.2、history   跳转的历史记录

  
Document

1.3、location  操作地址栏

1.4、navigator   浏览器

  
Document

1.5、opener  引用创建的这个新窗口的窗口

  
Document

1.6、screen  屏幕

1.7、screenX 窗口位于屏幕的x坐标

1.8、screenY 窗口位于屏幕的y坐标

  
Document

1.9、name  窗口名

  
Document

1.10、status  状态栏(目前主要是欧朋支持,其它浏览器都不支持。大多数浏览器都关闭这一功能,目的是为了避免被钓鱼攻击)

2、常用方法

2.1、alert() 显示一个警告框 

  
Document

2.2、confirm() 显示带有确认按钮和取消按钮的对话框

  
Document

2.3、prompt() 显示可接受用户输入的对话框

  
Document

2.4、open() 打开一个新的浏览器窗口或查找一个已命名的窗口

        open(url,name,attr,replace)
          url: 要跳转的网址或要打开的文件或创建一个窗口(url为空时)
          name: 窗口名或_blank _self _parent _top
          attr: 窗口设置
          replace: true/false true表示添加到历史记录中,false则反

  
Document 百度

2.5、close() 关闭浏览器窗口

2.6、scrollTo() 把内容滚动到指定的坐标 设置滚动条的位置

  
Document

2.7、setInterval() 按照指定的毫秒周期来调用函数或计算表达式

  
Document

2.8、setTimeout() 在指定的毫秒数后调用函数或计算表达式

  
Document

clearInterval() 取消由 setInterval() 方法设置的 timeout 无

clearTimeout() 取消由 setTimeout() 方法设置的 timeout 无

setTimeout与setInterval的区别:

相同点:
都是计时(定时)器,都是在指定的时间重复(一次)执行对应的代码。
都是异步执行的。

不同点:

setTimeout在指定时间到了之后只执行一次对应的代码。(只执行一次)
setInterval在指定时间到来之前重复执行对应的代码。(不停地循环)

计时如果不需要时,一定要做清除处理。定义计时器时,最好初值设置为null(垃圾回收机制)

三、location对象

  用来获取或设置url。
  获取或设置url地址信息、页面跳转(重定向)、页面刷新等。

1、常用属性 

    location.hash 设置或取得 URL 中的锚
    location.host 设置或取得 URL 中主机(包括端口号)
    location.hostname 设置或取得 URL 中的主机名
    location.href 设置或取得完整 URL(页面重定向应用)
    location.pathname 设置或取得 URL 中的路径
    location.port 设置或取得 URL 中的端口号
    location.protocol 设置或取得 URL 使用的协议
    location.search 设置或取得 URL 中的查询字串(一般是 ? 符号后面的内容) ?username=张三&sex=男

  
Document

2、常用方法

2.1、location.assign():加载新页面文档与location.href功能一样,用法一样,只是href是属性,而assign是一个方法

  
Document

2.2、location.reload():重新加载(刷新)当前页面,reload(true/false):默认为false。true表示重新从服务器下载,实现刷新;而false表示从缓存中获取刷新页面。

  
Document

2.3、location.replace():用新的文档替代当前文档,与location.assign()和location.href的区别是:replace不能将跳转的路径写到历史记录中,也是即是跳转后不能返回

  
Document

四、navigator

通过navigator对象获取浏览器相关信息,用于判断该浏览器是哪个浏览器,以及厂商等。

常用属性:

navigator.appName 取得浏览器的名称
navigator.appVersion  取得浏览器的平台和版本信息
navigator.userAgent 得到浏览器相关信息

  
Document

五、Screen对象

用于获取客户端屏幕相关信息。

常用属性:  

availHeight: 屏幕高度(不包含任务栏)
availWidth: 屏幕宽度(不包含任务栏)
colorDepth: 颜色深度
height: 显示屏幕的高度(包含任务栏)
width: 显示屏幕的宽度(包含任务栏)

  
Document

6.history对象

用来记录用户在客户端访问的url。

属性:length:返回历史记录的条数。

方法:

6.1、forward():跳转到下一个history中的url,如果history中没有url,将停留在当前页面

6.2、back():返回到上一个history中的url,如果history中没有url,将停留在当前页面

6.3、go(num|url): go(-1)相当于back(),go(1)相当于forward(),go(0)刷新当前页面

  
Document

这是首页

 

转载地址:http://tfvrn.baihongyu.com/

你可能感兴趣的文章
【原创】StackOverflow 20万关注的问题:如何实现异步Task超时的处理?
查看>>
.NET Core 3.1通用主机原理及使用
查看>>
UnitTest in .NET(Part 1)
查看>>
CAP 3.0 版本正式发布
查看>>
Xamarin.Forms弹出对话框插件
查看>>
UnitTest in .NET(Part 4)
查看>>
大量SQL的解决方案——sdmap
查看>>
与其每天重复,不如试着构建「正反馈闭环」
查看>>
【Azure学习.01】先从账号注册开始
查看>>
如何运用领域驱动设计 - 工作单元
查看>>
服务器应用服务为何卡顿?原来是内存耗尽惹的祸!
查看>>
什么?原来C#还有这两个关键字
查看>>
Mbp,一个用于学习.net core的开发框架
查看>>
【Magicodes.IE 2.0.0-beta1版本发布】已支持数据表格、列筛选器和Sheet拆分
查看>>
net下的高性能轻量化半自动orm+linq的《SqlBatis》
查看>>
如何利用Serilog的RequestLogging来精简ASP.NET Core的日志输出
查看>>
在 Blazor WebAssembly 中使用 gRPC-Web
查看>>
【实战 Ids4】║ 在Swagger中调试认证授权中心
查看>>
.NET Core开发实战(第10课:环境变量配置提供程序)--学习笔记
查看>>
WTM系列视频教程:View和Taghelper
查看>>