码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript的DOM操作

时间:2015-04-24 18:52:03      阅读:204      评论:0      收藏:0      [点我收藏+]

标签:

javascriptBOM

一、BOM(The Browser ObjectModel):-浏览器对象模型,

(1)BOM提供了独立于内容而与浏览器窗口进行交互的对象。

(2)BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是window。

(3)BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性。

(4)BOM没有统一的标准,每种浏览器都有自己的BOM实现。

 

三、BOM主要对象详解:

1. Window对象:

window对象是BOM的顶层(核心)对象,因此调用它的子对象时可以不显示的指明window对象.

eg: window.alert("hello"); 等同于 alert("hello");

JavaScript中的任何一个全局函数或变量都是window的属性.

1.1 window对象的主要方法:

(1) moveBy(dx, dy); -- 窗口移动(dx,dy)个像素。

(2) moveTo(x, y); -- 窗口移动到(x,y)像素。

(3) resizeBy(dw, dh); -- 调整(dw,dy)个像素,当x、y的值大于0时为扩大,小于0时为缩小。

(4) resizeTo(w, h); -- 调整到宽为w个像素,高为h个像素。

(5) scrollTo(x, y); -- 将窗口中的内容滚动到指定位置。 

(6) scrollBy(dx, dy); -- 将窗口中的内容滚动(dx,dy)个像素。

(7) focus(); -- 使得窗口得到焦点并执行由 onfocus 事件指定的代码。

(8) blur(); --把焦点从顶层窗口移开。

(9) alert(text); -- 弹出一个信息框。

(10) comfirm(text); -- 弹出一个确认框.

(11) prompt(text,Defaulttext); -- 弹出一个提示框

第一个参数是显示给用户看的文本

第二个参数就是文本框中的默认文本

返回值是用户写入文本框中的字符串。编程人员

(12) open(URL,Name,parameterList,replace); -- 创建一个新的浏览器窗口,并在新窗口中载入一个指定的URL地址 

第一个参数:要打开的网页url,可以是相对路径;

第二个参数:打开窗口的名称(还可以包括_self,_parent, _top及_blank几个特殊值)
第三个参数:用于描述打开窗口的特性,比如大小、是否有工具栏等。

注意:特性字符串中的每个特性使用逗号分隔,每个特性之间不允许有空格。

第四个参数:布尔值,说明新载入的页面是否替换当前载入的页面,此参数通常不用指定。

eg: window.open(“http://www.baidu.com/”,“_blank”,“height=150,width=300,top=10,left=10,resizable=yes”);

(13) close();--方法关闭一个浏览器窗口

(14) setTimeout(fn,time); -- 用于指定一段时间后执行某函数

第一个参数:可以是字符串组成的jascript代码,也可以是一个函数名称。

第二个参数:表示时间,毫秒为单位。

(15) clearTimeout(timer); -- 清除由setTimeout创建的定时器

eg: var iTimeoutId =setTimeout(“alert(‘Hello world!’)”, 1000);

clearTimeout(iTimeoutId);

(16) setInterval(fn,time); -- 用于周期性执行某函数;

(17) clearInterval(timer); -- 清除由setInterval指定的定时器;

(18) createPopup(); --创建弹出窗口。

(19) execScript(); -- 以给定语言执行指定的脚本。

(20) navigate(sURL); -- 跳转到指定 URL,只有IE有效.

(21) print(); --打印当前窗口的内容。

(22) showModalDialog(sURL [, vArguments] [,sFeatures]); -- 

sURL:必选参数,类型:字符串。用来指定对话框要显示的文档的URL。

vArguments:可选参数,类型:变体。用来向对话框传递参数。传递的参数类型不限,包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。

sFeatures:可选参数,类型:字符串。用来描述对话框的外观等信息,可以使用以下的一个或几个,用分号“;”隔开。

1.dialogHeight :对话框高度,不小于100px,IE4中dialogHeight 和 dialogWidth 默认的单位是em,而IE5中是px,为方便其见,在定义modal方式的对话框时,用px做单位。
2.dialogWidth: 对话框宽度。
3.dialogLeft: 离屏幕左的距离。
4.dialogTop: 离屏幕上的距离。
5.center: {yes | no | 1 | 0 }:窗口是否居中,默认yes,但仍可以指定高度和宽度。
6.help: {yes | no | 1 | 0 }:是否显示帮助按钮,默认yes。
7.resizable: {yes | no | 1 | 0 } [IE5+]:是否可被改变大小。默认no。
8.status: {yes | no | 1 | 0 } [IE5+]:是否显示状态栏。默认为yes[ Modeless]或no[Modal]。
9.scroll:{ yes | no | 1 | 0 | on | off }:指明对话框是否显示滚动条。默认为yes。

1.2 window对象的主要属性:

(1) screenX,screenY

测量窗口位置(Firefox 和 Safari支持)。

(2) screenLeft,screenRight

测量窗口位置(IE、Safari 和 Opera支持)。

(3) status,defaultStatus

用来来控制状态栏信息(设置或获取),其中,defaultStatus是指第一次载入页面时,使用的默认的状态栏信息.

(4) opener

获得打开本窗口的主窗口

eg:window.opener.msg

(5) closed

判断引用窗口是否已关闭。

(6) dialogArguments

设置或获取传递给模式对话框窗口的变量或变量数组。

(7) dialogHeight/dialogWidth/dialogLeft/dialogTop

设置或获取模式对话框的高度/宽度/左坐标/顶坐标。

(8) frameElement

获取在父文档中生成 window 的 frame 或 iframe 对象。

(9) length

设置或获取窗口中的框架数目。

(10) name

设置或获取窗口名称。Java

(11) offscreenBuffering

设置或获取对象在对用户可见之前是否要先在屏幕外绘制。

(12) parent

获取对象层次中的父窗口。

(13) returnValue

设置或获取从模式对话框返回的值。

(14) self

获取对当前窗口或框架的引用。

(15) top

获取最顶层的祖先窗口。

(16) innerwidth/innerheight

获取窗口的文档显示区的宽度/高度。

(17) outerwidth/outerheight

获取窗口的外部宽度/高度。

(18) pageXOffset/pageYOffset

设置或返回当前页面相对于窗口显示区左上角的 X 位置。

2. document对象:

document对象是window对象的属性,window对象的任何属性和方法都可直接访问。它是唯一一个既属性BOM又属性DOM。

2.1 document对象的主要方法:

(1) addEventListener();--添加事件监听器

(2) appendChild();--添加节点

(3) createElement(); -- 创建节点

(4) getElementById(); -- 获得指定id的dom节点

(5) getElementsByName(); -- 获得指定名称的节点集合

(6) getElementsByTagName(); --获得指定标签的节点集合

(7) removeChild(); -- 删除子节点

(8) replaceChild(); -- 替换子节点

(9) insertBefore(); -- 在指定节点位置插入节点

(10) write()及writeln() --用于在文档中输出内容

eg: <script>document.write(newDate().getFullYear())</script>

(11) open(); --用于打开文档,准备输出内容

(12) close(); -- 关闭文档输出

2.2 document对象的主要属性:

普通属性:

(1) lastModifier -- 网页最后修改时间

(2)referrer -- 打开该文档的上一个页面

(3) title -- 文档的标题

(4) URL -- 文档的URL

(5) alinkColor -- 鼠标移到连接标签的颜色,body中alink属性的值

(6) bgColor -- 背景颜色,body标签中bgcolor属性的值

(7) linkColor -- 连接标签颜色,body中link属性的值

(8) fgColor -- 文本颜色,body中text属性的值

(9) vlinkColor -- 访问连接的颜色,body中vlink的值

集合属性:

(1) anchors -- 文档中的所有书签<a name="a1"></a>

(2) applets -- 获得文档中的所有applets对象

(3) embeds -- 获得文档中的所有embeds对象

(4) forms -- 获得文档中的所有表单对象

(5) images -- 获得文档中的所有图片对象

(6) links -- 获得文档中的所有连接对象<a href="test.html>aaa</a>

访问集合元素:document.links[0]或者document.links["a1"].

3. location对象:

location对象表示载入窗口的URL,还可以解析URL.

3.1 location对象的主要方法:

(1) assign(); -- 用于导向指定的连接

(2) replace(); -- 用于发射指定的连接,不会把打开的文档信息记录到历史记录中.

(3) reload(cache); -- 用于重新加载文档的内容, 参数cache表示是否允许从cache中加载

cache -- true : 从服务器加载.

-- false:从缓存中载入.

3.2 location对象的主要属性:

(1) href -- 获得url 

(2) port /protocol -- 端口及协议 

(3) search -- 地址中?后的字符串

(4) host /hostname -- 主机或主机名称

(5) hash -- 地址中#及后面的内容

4. navigator对象:

4.1 navigator对象的主要属性:

(1) appCodeName -- 产品名称

(2) appName -- 应用名称

(3) appVersion -- 版本号

(4) cookieEnabled -- 是否允许使用cookie

(5) language -- 语言

(6) oscpu -- 操作系统名称

(7) platform -- 操作系统平台

(8) product -- 产品代号或名称

(9) productSub -- 产品发布日期

(10) userAgent -- 客户端详细信息

(11) cpuclass -- 浏览器系统的 CPU 等级

5. screen对象:

5.1 screen对象的主要属性:

(1) availHeight -- 窗口可以使用的屏幕的高度(以像素计)

(2) availWidth -- 窗口可以使用的屏幕的宽度(以像素计)。
(3) colorDepth -- 用户表示颜色的位数,大多系统采用32位。
(4) height -- 屏幕的高度,以像素计。
(5) width -- 屏幕的高度,以像素计。

6. history对象:

6.1 history对象主要的方法:

(1) history.go(index); -- 在浏览器历史记录中跳转(正数为前跳,负数为后跳)

(2) history.back(); -- 后跳

(3) history.forward(); -- 前跳

6.2 history对象的主要属性:

(1)history.length; -- 获得历史记录的长度

JavaScript的DOM操作

标签:

原文地址:http://www.cnblogs.com/luanshijiaren1/p/4454010.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!