DOM基本应用

1.浏览历史管理(history)

history对象的方法和属性

(1)length属性 (2)back() 表示后退  (3)forward()表示前进

(4)go()表示可以跳转到下一个地址

eg: history.go([location])

其中location 可以是一个地址 也可以是一个整数。 当location 是一个地址的时候,表示跳转到那个地址URL上。 当location 为数字 表示前进后退多少步。整数表示前进  负数表示后退,0 表示刷新当前页。

html5新增的功能-----添加和替换历史项

(6)pushState() 方法  添加新的浏览历史项, replaceState()更新当前浏览历史项   state属性用于返回这两个方法添加的信息

当用pushState 和replaceState时 会出发onpopstate()事件, 当用前进 后退按钮切换网页时,会出发pageshow事件和pagehide事件。

2.解析地址(location)

location对象描述的是某个窗口对象所打开的URL地址。window.location可以返回一个对象。 这个location 对象就是地址

location 对象的属性

(1)hash  是URL对象的 #号后面的字符串 

(2)host  是主机名+端口号

(3)hostname  主机名  例如:www.zhang-yafei.com

 (4) port 是  返回或者设置网址中的主机名。默认的端口号是80, 默认的端口号在有些浏览器中的返回值为空。

(5)protocol 是网址中的协议部分,http  https ftp

 (6)search : 是网址中? 及以后的部分。

location 对象的方法

(1)assign   加载一个新的html文档

(2)reload() 刷新当前页  和history.go(0)作用相同。true是表示从网站重新加载,false表示从缓存重新加载

(3)replace()  打开另一个URL 并取代历史对象中的当前位置的地址。用这种方法打开这个URL后,浏览器中的后退按钮就不能反悔到刚才的页面

(4)resolveURL()将相对URL转换为绝对URL

3.获取浏览器信息(navigator)

(1) navigator对象的属性是反应浏览器对象的特定信息,比如浏览器应用程序的名称,版本,平台系统,和操作系统,脱机或者连线状态 用户代理字符串

可以通过 var ua=navigator.userAgent.toLowerCase()获得 版本信息

再通过 opera:ua.indexOf('opera')>-1    IE7 ua.indexOf('msie 7')>-1  IE8  ua.indexOf('msie 8')

(2)当代码中用了 document.cookie 或者localStorage ,在一个脚本完成执行之前,浏览器就会阻止其他脚本代码访问cookie 或者storage。

  通过 navigator.yieldForStorageUpdates() 会解除这种阻止。但是现在没有浏览器支持这种方式。

(3)navigator.onLine()  检查浏览器是否在脱机状态,是一个逻辑值,如果为真是脱机,否则为联机

当浏览器从脱机转为 联机的时候会触发 online事件

当浏览器从联机转为脱机的时候会触发offline事件。

在对document  body, window 可以用addlistenerAction(),对于直接加事件的只能在document 和documnent.body,还可以直接用online,offerline属性来设置监听函数。

4 screen 对象(只有属性成员,且都是只读属性)

screen表示用户的屏幕,提供了屏幕的大小,分辨率,和颜色深度等信息。使用window.screen可以返回screen对象。

availHeight 返回屏幕的可用高度, availWidth 返回屏幕的可用宽度。 width 屏幕的高度,heigh 屏幕的宽度, updateInterval 获取屏幕的刷新率。

原文地址:https://www.cnblogs.com/xuruweb/p/4169825.html