Javascript对象-浏览器Bom对象

1.javascript 对象之 bom 对象

BOM(Browser Object Mode)浏览器对象模型,是 Javascript 的重要组成部分。它提供了一系列对象用于与浏览器窗口进行交互,这些对象通常统称为 BOM

2.bom 对象图示

3.通过上图,可以看出 window 是 bom 对象的核心,在它的分支下面,划分为 document,frames,history,location,navigation,screen

  • 3-1、window 是 bom 的核心对象。顾名思义,窗口对象。它表示整个浏览器窗口,主要用来操作浏览器窗口。同时, window 对象还是 ECMAScript 中的 Global 对象,因而所有全局变量和函数都是它的属性,且所有原生的构造函数及其他函数也都存在于它的命名空间下。

弹出框方法,可以省略 window

alert("提示信息");

confirm("确认信息");

prompt("弹出输入框");

open("url地址", "_black或_self", "新窗口的大小");

close(); // 关闭当前的网页

定时器和清除定时器

setTimeout(回调函数函数,间隔时间) 延时器,只会执行一次;

clearTimeout(定时器名称) 清除延迟器,用于停止执行setTimeout()方法;

setInterval(回调函数,间隔时间) 设置定时器,可以无限执行;

clearInterval() 方法用于停止或者清楚定时器
  • 3-2、document 对象

它是 window 对象的一个属性,可以用来处理页面文档

对象属性:

document.title                 //设置文档标题等价于HTML的<title>标签

document.bgColor               //设置页面背景色

document.fgColor               //设置前景色(文本颜色)

document.linkColor             //未点击过的链接颜色

document.alinkColor            //激活链接(焦点在此链接上)的颜色

document.vlinkColor            //已点击过的链接颜色

document.URL                   //设置URL属性从而在同一窗口打开另一网页

document.fileCreatedDate       //文件建立日期,只读属性

document.fileModifiedDate      //文件修改日期,只读属性

document.fileSize              //文件大小,只读属性

document.cookie                //设置和读出cookie

document.charset               //设置字符集 简体中文:gb2312
----------------------------
常用对象方法:
document.write()                      //动态向页面写入内容

document.createElement(Tag)           //创建一个html标签对象

document.getElementById(ID)           //获得指定ID值的对象

document.getElementsByName(Name)      //获得指定Name值的对象

document.body.appendChild(oTag)
  • 3-3、location 对象
对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。

window.location 对象在编写时可不使用 window 这个前缀。 一些例子:
location.reload();页面重新加载,在本页面使用

locatiion.replace('url');页面也是可以重新加载,在本页面使用

location.herf = 'url 地址'

location.hostname 返回 web 主机的域名

location.pathname 返回当前页面的路径和文件名

location.port 返回 web 主机的端口 (80 或 443)

location.portocol 返回页面使用的 web 协议。 http:或 https:
  • 3-4、navigator 对象

提供了与浏览器的相关信息。userAgent(用户代理) 是最常用的属性,可以用来判断用户使用的浏览器,判断浏览器类型
判断是移动端还是 PC
( “Android”, “iPhone”, “SymbianOS”, “Windows Phone”, “iPad”, “iPod”

window.navigator 对象在编写时可不使用 window 这个前缀。
navigator.appCodeName       返回当前所用的浏览器的代码块,例如: Mozilla

navigator.appMinorVersion:  返回浏览器的次级版本。(IE4, Opera支持);

navigator.appName:        返回浏览器的名称(历史性遗留问题,返回都是Netscape)

navigator.browserLanguage: 返回当前浏览器的语言(只有 IE 和 Opera 支持)

navigator.cookieEnabled:  返回指明浏览器中是否启用 cookie 的布尔值(cookie 是记录我们登陆账号密码等信息,

navigator.cpuClass:       返回浏览器系统的 CPU 等级 (只有 IE 支持)

navigator.onLine:         返回指明系统是否处于脱机模式的布尔值(脱机,就是你电脑是否联网) ;

navigator.platform:       返回运行浏览器的操作系统平台

navigator.systemLanguage:  返回当前操作系统的默认语言(只支持 IE)

navigator.userAgent:      返回由客户机发送服务器的 user-agent 头部的值

navigator.userLanguage:   返回操作系统设定的自然语言(IE 和 Opera 支持)

navigator.plugins:        返回包含客户端安装的所有插件的数组

Navigator对象方法

javaEnabled():            规定浏览器是否支持并启用了 java

taintEnabled():           规定浏览器是否启用数据污点(data tainting)
  • 3-5、screen 对象

主要用来获取用户的屏幕信息。

window.screen 对象在编写时可以不使用 window 这个前缀

height: 获取整个屏幕的高。

width : 获取整个屏幕的宽。

availHeight: 整个屏幕的高减去系统部件的高( 可用的屏幕宽度 )

availWidth : 整个屏幕的宽减去系统部件的宽(可用的屏幕高度 )

coloDepth :用户浏览器表示的颜色为数,通常为32位(每像素的位数)

pixelDepth: 用户浏览器表示的颜色为数,通常为32位(每像素的位数。ie不支持此属性)
  • 3-6、history 对象

history 对象保存着用户上网的历史记录,从窗口被打开的那一刻算起。因为 history 是 window 对象的属性,因此每个浏览器窗口、每个标签页乃至每个框架,都有自己的 history 对象与特定的 window 对象关联。

window.history 对象在编写时可不使用 window 这个前缀。

back() 返回上一页。

forward() 返回下一页。

go('') -1 表示上一页,1 表示下一页,0表示刷新。

length表示访问的url地址的个数,初始为1,

HTML5 新增的方法,增改记录
history.pushState()和 history.replaceState(),
用来在浏览历史中添加和修改记录。state 属性用来保存记录对象,而 popstate 事件用来监听 history 对象的变化

*注意:IE9不支持;
history.pushState()方法向浏览器历史添加了一个状态。pushState()方法带有三个参数:一个状态对象、一个标题(现在被忽略了)以及一个可选的URL地址
history.pushState(state, title, url);

history.replaceState方法的参数与pushState方法一模一样,不同之处在于replaceState()方法会修改当前历史记录条目而并非创建新的条目

也许我写的并不是你想要的,但是你的浏览就是对我最大的鼓励和支持,如果写的有出入的地方,下方给我留言。

猜你喜欢

转载自blog.csdn.net/weixin_45356397/article/details/103043793