JavaScript浏览器对象模型BOM

敲你码呢? 2020-04-28 10:35:11
1.BOM是什么
BOM:浏览器对象模型,属于对象中的宿主对象
BOM提供了很多对象,用于访问浏览器的功能,这些功能与任何网页内容无关。
BOM将浏览器中的各个部分转换成了一个一个的对象,我们通过修改这些对象的属性,调用他们的方法,从而控制浏览器的各种行为;
简单来说:BOM可以使我们通过JS来操作浏览器,在BOM中提供了一组对象,用来完成对浏览器的操作
①Window对象
- 代表的是整个浏览器窗口,同时window也是网页中的全局对象
②Navigator对象 (网景公司)
- 代表的当前浏览器的信息,通过该对象可以来识别不同的浏览器
③Location对象
- 代表当前浏览器的地址栏信息,通过Location可以获取地址栏信息,或则操作浏览器页面跳转
④History对象
- 代表浏览器的历史记录,可以通过该对象来操作浏览器的历史记录
由于隐私问题,该对象不能获取到具体的历史记录,只能操作浏览器向前或向后翻页,而且 该操作只在当次访问时有效
⑤Screen对象
- 代表用户的屏幕的信息,通过该对象可以获取到用户的显示器的相关的信息
这5个BOM对象在浏览器中都是作为window对象的属性保存,可以通过window对象来使用,也可以直接使用
语法:window.属性名/属性名
2.Navigator对象
- 代表当前浏览器的信息,通过对象可以来识别不同的浏览器
- 由于历史原因,Navigator对象中的部分属性都是不能帮助我们识别浏览器了
- 一般我们只会使用userAgent来判断浏览器的信息
userAgent是一个字符串,这个字符串中包含有用来描述浏览器信息的内容,不同的浏览器会有不通过的userAgent;
下面是一个浏览器验证:

如果通过navigator.userAgent不能判断浏览器,还可以通过一些浏览器中特有的对象,来判断浏览器的信息。
比如:ActiveXObject(IE特有);
使用方法:if("ActiveXObject" in window)

3.History对象
History对象可以用来操作浏览器向前后或向后翻页
- length 返回浏览器历史列表中的 URL 数量。
History对象方法描述:
① back():加载 history 列表中的前一个 URL。
② forward():加载 history 列表中的下一个 URL。
③ go():加载history 列表中的某个具体页面。
go(-1) ==>back() 当为-1时与back方法相同
go(1) ==>forward()当为1时与forward方法相同
4. Location对象
Location对象中封装了浏览器的地址栏的信息
如果直接将location属性修改为一个完整的路径,或相对路径则我们页面会自动1跳转到该路劲, 并且生成历史记录
语法:location=”路径”
地址栏各部分名称:

Location 对象属性:
Hash:设置或返回从井号 (#) 开始的 URL(锚)。
host :设置或返回主机名和当前 URL 的端口号。
hostname :设置或返回当前 URL 的主机名。
href :设置或返回完整的 URL。
pathname :设置或返回当前 URL 的路径部分。
port :设置或返回当前 URL 的端口号。
protocol :设置或返回当前 URL 的协议。
search :设置或返回从问号 (?) 开始的 URL(查询部分)。
Location常用方法:
assign(): 用来跳转到其他的页面,作用和直接修改location一样;
语法:location.assign(”路径”)
reload(): 重新加载当前文档,作用和刷新按钮一样
如果在方法中传递一个true作为参数,则会强制清空缓存刷新页面
语法:location.reload(true)
replace():用新的文档替换当前文档,调用完毕也会跳转页面
不会生成历史记录,不能使用回退按钮回退
语法:location.reload(”路径”)
5.JavaScript定时器
JS的程序的执行速度是非常非常快的
如果希望一段程序,可以每间隔一段时间执行一次,可以使用定时调用
① setInterval()
* - 定时调用
* - 可以将一个函数,每隔一段时间执行一次
* - 参数:
* 1.回调函数,该函数会每隔一段时间被调用一次
* 2.每次调用间隔的时间,单位是毫秒
* - 返回值:
* 返回一个Number类型的数据
* 这个数字用来作为定时器的唯一标识
清除定时器:clearInterval();
例:

② setTimeout
延时调用,
* 延时调用一个函数不马上执行,而是隔一段时间以后在执行,而且只会执行一次
* 延时调用和定时调用的区别,定时调用会执行多次,而延时调用只会执行一次
* 延时调用和定时调用实际上是可以互相代替的,在开发中可以根据自己需要去选择
清除定时器:clearTimeout();

...全文
17 回复 打赏 收藏 转发到动态 举报
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复

2,100

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 非技术区
社区管理员
  • 非技术区社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧