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 获取屏幕的刷新率。

时间: 2024-08-27 11:03:04

DOM基本应用的相关文章

虚拟DOM

DOM(Document Object Model)是很慢的,其元素非常庞大,页面的性能问题鲜有由JS引起的,大部分都是由DOM操作引起的.如果对前端工作进行抽象的话,主要就是维护状态和更新视图:而更新视图和维护状态都需要DOM操作. 在jQuery出现以前,我们直接操作DOM结构,这种方法复杂度高,兼容性也较差:有了jQuery强大的选择器以及高度封装的API,我们可以更方便的操作DOM,jQuery帮我们处理兼容性问题,同时也使DOM操作变得简单:MVVM使用数据双向绑定,使得我们完全不需要

JS学习--DOM

1.概念 文档对象模型DOM,定义访问和处理HTML文档的标准方法.DOM将HTML呈现为带有元素.属性和文本的树结构(节点树). 2.document.getElementById("id")--获取的是一个元素对象. documment.getElementById("id").innerHTML--才可获取其中的内容. 3.HTML样式 Object.style.property=new style;部分属性: 如: mychar.style.color=&q

高性能WEB开发:DOM编程

我们知道,DOM是用于操作XML和HTML文档的应用程序接口,用脚本进行DOM操作的代价很昂贵.有个贴切的比喻,把DOM和Javascript(这里指ECMscript)各自想象为一个岛屿,它们之间用收费桥梁连接,ECMAscript每次访问DOM,都要途径这座桥,并交纳"过桥费",访问DOM的次数越多,费用也就越高.因此,推荐的做法是尽量减少过桥的次数,努力待在ECMAscript岛上.我们不可能不用DOM的接口,那么,怎样才能提高程序的效率? 1.DOM访问与修改 访问DOM元素是

dom方法insertAfter的实现

在dom的原生api中,只用insertBefore,没有insertAfter,借助原有的api,可以模拟一个insterAfter. function insterAfter(newElement,targetElement){ var parent = targetElement.parentNode; if(parent.lastChild == targetElement){ parent.appendChild(newElement); } else{ parent.insertBe

第十章—DOM(0)—NODE类型

DOM1定义了一个node接口,该接口由DOM的所有节点类型实现. 所有的节点都存在这样或那样的关系.在HTML中,head,body可以看出是html的子元素,html是head,body的父元素,而head,body互为同胞元素. 这里要注意一个概念:nodeList 输出: 如下例子: 1 <div id="myDiv"> </div><!-- 此处有空格 --> 2 <script> 3 var div = document.ge

对dom的初步了解

什么叫DOM,DOM是文档对象模型Document Object Model DOM树 : 根结点(document) 父结点(parentNode) 子结点(childNodes) 兄弟结点 兄弟结点 sibling) (sibling) DOM在HTML文档中常见的几种结点类型:1.DOCUMENT_NODE (document)文档根结点类型,该枚举型的值是9. 2.ELEMENT_NODE (element)元素结点类型,该枚举型的值是1.上文中的html, body, div这些结点都

DOM基础(一)

在我们刚刚学JavaScript的时候,就应该听说过,JavaScript是由三部分组成的.分别是ECMAScript,DOM和BOM组成的.ECMAScript是JavaScript的核心,它描述了JavaScript的基本语法和对象,DOM则是描述了处理网页内容的方法和接口,而BOM描述了与浏览器进行交互的方法和接口.在我之前的关于JS入门系列的文章里,就讲了许多关于JavaScript的基本语法和对象,也就是ECMAScript.而在这个DOM系列的文章里,我将会介绍一些关于DOM的基础.

python2.0_s12_day13_javascript&amp;Dom&amp;jQuery

今天主要内容:JavaScriptDomjQuery http://www.cnblogs.com/wupeiqi/articles/5369773.html 今天主要内容大致了解:javascript 1.首先要知道 JavaScript 和 Java 没有半毛钱关系. 2.JavaScript 和python语言 一样 它也是一门语言.对于python语言需要用python解释器解释.而javascript的解释器是浏览器. 3.javascript 能实现什么.javascript就是让我

BOM和DOM

BOM 浏览器对象模型 BOM中的对象 Window对象:是指窗口对象,可通过Window对象的属性和方法控制窗口,例如打开或关闭一个窗口 History对象:指历史页面,通过History对象的属性和方法实现前进后退的功能 Location对象:指地址栏,通过属性的方法控制页面的跳转 Document对象:指网页中的内容,通过属性和方法控制页面元素 1.Window对象的常用方法: open(); close(); alert(); prompt(); confim(); setTimeout

JavaScript实现绑定DOM的定时器插件

问题 使用原生的setTimeout和setInterval仅仅能够实现, 定时执行事件处理函数, 在网页开发中, 往往会出现一种情况,定时器用于定时更新某个页面区域的数据, 往往在页面加载之后, 就启动这个定时器, 往后则间隔执行此定时器. 页面上定时刷新的区域可能会动态消失, 特别是在ajax被广泛使用的今天, 如果定时刷新的区域被删除了, 则定时器材也需要自动清除掉. 此二个接口,如果实现这种效果需要, 自己维护定时器句柄, 并且在处理定时器事件函数的时候, 首先判断 指定的刷新区域是否还