DOM对象

keshion

浏览: 403786 次
性别:
来自: 上海

最近访客更多访客>>

gang_bj

Nicksxs

悠悠默笙

ft3159572

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

一、 DOM 简述

DOM—Document Object Model, 它是 W3C 国际组织的一套 Web 标准。它定义了访问 HTML 文档对象的一套习属性、方法和事件。
DOM 是以层次结构组织的节点或信息片断的集合。文档对象模型（ Document Object Model ）是给 HTML 与 XML 文件使用的一组 API 。 DOM 的本质是建立网页与脚本语言或程序语言沟通的桥梁。

浏览器对象是一个分层结构，也称为文档对象模型，如下图所示：

从上图可以看出：
（1）打开网页后，首先看到的是浏览器窗口，即顶层的window对象。
（2）其次，看到的是网页文档的内容，即document文档。
（3）定位对象：
     window.document.myform.text1
     或
     document.myform.text1
     因为window窗口对象是所有页面的根对象，所以常常省略。
(4)地址对象location和历史对象history，它他对应IE浏览器中的地址栏和前进/后退按钮。

二、窗口 window
常用属性：
1 window.clesed ：指明窗口是否关闭。
2 window.defaultValue ：窗口状态栏的默认信息。
3 window.docement ：表示浏览器窗口中的 HTML 文档。
4 window.location ：表示有关当前 URL 的信息。
5 window.history ：表示有关当前访问过的 RUL 的信息。
6 window.name ：设置或检索窗口或框架的名称。
7 window.screen ：包含有关客户的屏幕和显示性能的信息。
8 window.screenX ：窗口 X 坐标
9 window.screenY ：窗口 Y 坐标
10 window.status ：设置或检索窗口状态栏中的信息。
11 window.title ：设置或检索窗口顶部标题栏中的信息。
12 window.self ：当前窗口。
13 window.parent ：当前窗口的最上层窗口。
14 window.top ：当前显示的窗口的最上层窗口。
15 window.opener ：所打开“子窗口”的“父窗口”的名称。

得到当前窗口的详细信息：

<head>
    <title>JavaScript</title>
</head>
<body >
<script language="javascript" type="text/javascript">
    window.document.writeln("当前位置："+window.location+"</br>");
    window.document.writeln("包含窗口个数："+window.length+"</br>");
    window.document.writeln("当前状态栏的信息："+window.status+"</br>");
    window.document.writeln("当前窗口的名称："+window.name+"</br>");
    window.document.writeln("当前窗口的X、Y坐标是："+window.screenX+","+window.screenY);
</script>
</body>

常用方法：
1 window.alert(“ 提示信息 ”) ：显示一个包含确定按钮的对话框。
2 window.blur() ：使对象失去焦点并激发 onblur 事件。
3 window.close() ：关闭窗口。
4 window.open(“ 打开窗口的 url”,” 窗口名 ”,” 窗口特征 ”) ：按指定特征打开窗口。
窗口特征参数如下 :
height ：窗口高度
width ：窗口宽度
top ：窗口距屏幕上方的象素值
left ：窗口跟屏幕左侧的象素值
toolbar ：是否显示工具栏， yes 或 1 表示显示， no 或 0 表示不显示。
menubar ：是否显示菜单栏， yes 或 1 表示显示， no 或 0 表示不显示。
scrollbars ：是否显示滚动栏， yes 或 1 表示显示， no 或 0 表示不显示。
resizable ：是否允许改变窗口大小， yes 或 1 表示否允， no 或 0 表示不否允示。
location ：是否显示地址栏， yes 或 1 表示显示， no 或 0 表示不显示。
status ：是否显示状态栏， yes 或 1 表示显示， no 或 0 表示不显示。
5 window.confirm(“ 提示信息 ”) ：显示一个确认对话框，包括确定和取消按钮。当点确定按钮时返回的是 true, 点取消按钮时返回的是 false 。
6 window.prompt(“ 提示信息 ”, 显示在 text 中的默认值 ) ：显示带输入框提示对话框，主要用来收集信息。当点确定按钮时返回的是 true, 点取消按钮时返回的是 false 。
7 窗口定位的方法：
（ 1 ） window.moveBy(x,y) ：实现窗口的定向、定量移动。两个参数分别表示 x 方向移动的距离和 y 方向移动的距离。
（ 2 ） window.moveTo(x,y) ：把窗口移动到指定坐标位置。两个参数分别表示横坐标、纵坐标。

8 窗口大小控制的两个方法：

（ 1 ） resizeBy(x,y) ：按指定的尺寸调整窗口的大小。两个参数分别表示在水平方向上的改变量和垂直方向上的改变量。
（ 2 ） resizeTo(x,y) ：把窗口调整到指定尺寸。两个参数分别表示浏览器窗口的宽和高。

9 操作定时器的两个方法：
（ 1 ） setTimeout(“ 函数 ’, 毫秒数 ) ：设置定时器，经过指定毫秒值后执行某个函数。
（ 2 ） clearTimeout( 定时器对象 ) ：取消某个定时器。

三、历史对象 history
主要属性：
1 window.history.length: 得到浏览器历史清单中的项目个数。

主要方法：
1 window.history.back(): 加载 History 列表中的上一个 URL ，相当于 IE 的后退按钮。等同于 window.history.go(-1);
2 window.history.forward(): 加载 History 列表中的下一个 URL ，相当于 IE 的前进按钮。等同于 window.history.go(1);
3 go(“url” or number): 加载 History 列表中的一个 URL ，或要求浏览器移动指定的页面数。

四、地址对象location
此对象相当于IE浏览器中的地址栏,包含了关于当前URL地址的信息.它提供了一种重新加载当前URL的方法。

主要属性：
1 window.location.hash ：设置或检索另一个页面里的锚
2 window.location.host ：设置或检索 URL 的主机名和端口号
3 window.location.hostname ：设置或检索 URL 的主机名部分
4 window.location.pathname ：设置或检索 URL 相对路径
5 window.location.href ：设置或检索完整的 URL 字符串（常用）
6 window.location.port ：设置或检索主机端口号

<script language="javascript" type="text/javascript">
    window.document.writeln("锚 "+window.location.hash+"</br>");
    window.document.writeln("主机名及端口号 "+window.location.host+"</br>");
    window.document.writeln("主机名 "+window.location.hostname+"</br>");
    window.document.writeln("端口号 "+window.location.port+"</br>");
    window.document.writeln("相对路径 "+window.location.pathname+"</br>");
    window.document.writeln("URL链接字符串 "+window.location.href+"</br>");
</script>

主要方法：
1 assign(“url”) ：加载 URL 指定的新的 HTML 文档。
2 reload() ：重新加载当前页。
3 replace(“url”) ：通过加载 URL 指定的文档来替换当前文档。

五、文档对象 Document

Document 对象表示给定浏览器窗口中的 HTML 文档，并用于检索文档的信息、检查和修改 HTML 元素和文档中的文本、以及处理事件。

主要属性：
1 alinkColor ：设置或获取元素中所有激活链接的颜色

2 linkColor ：设置或获取对象文档链接的颜色。

3 vlinkColor ：设置或获取用户已访问过的链接颜色。

4 URL ：设置或获取当前文档的 URL 。

5 location: 获取当前 URL 的信息。

6 title ：设置或获取当前文档的标题。

7 protocol ：设置或获取 URL 的协议部分。

8 readyState ：获取表明对象当前状态的值。

9 alinkColor ：设置或获取元素中所有激活链接的颜色。

10 bgColor ：设置或获取表明对象后面的背景颜色的值。

11 fgColor ：设置或获取文档的前景 ( 文本 ) 颜色。

12 all ：返回对象所包含的元素集合的引用。

13 anchors ：获取所有带有 name 和 / 或 id 属性的 a 对象的集合。此集合中的对象以 HTML 源顺序排列。

14 applets ：获取文档中所有 applet 对象的集合。

15 childNodes ：获取作为指定对象直接后代的 HTML 元素和 TextNode 对象的集合。

16 embeds ：获取文档中所有 embed 对象的集合。

17 forms ：获取以源顺序排列的文档中所有 form 对象的集合。

18 frames ：获取给定文档定义或与给定窗口关联的文档定义的所有 window 对象的集合。

19 images ：获取以源顺序排列的文档中所有 img 对象的集合。

20 links ：获取文档中所有指定了 HREF 属性的 a 对象和所有 area 对象的集合。

21 namespaces ：获取 namespace 对象的集合。

22 scripts ：获取文档中所有 script 对象的集合。

23 styleSheets ：获取代表与文档中每个 link 或 style 对象的实例相对应的样式表的 styleSheet 对象的集合。

主要方法：

1 clear(): 清除当前文档。

2 close(): 关闭输出流并强制将数据发送到显示。

3 write("text"): 在指定窗口的文档中写入一个或多个 HTML 表达式。

4 writeln("text"): 在指定窗口的文档中写入一个或多个 HTML 表达式，后面追加一个换行符。 5 focus(): 使得元素得到焦点并执行由 onfocus 事件指定的代码。 6 hasFocus(): 获取表明对象目前是否拥有焦点的值。 7 getElementById("ID "): 8 getElementsByName("Name "): 9 getElementsByTagName_r(“TagName”):

分享到：

ajax提交表单 | javascript一些基础

2011-09-14 16:56
浏览 956
评论(0)
分类:移动开发
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

DOM对象

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

DOM对象

评论

发表评论

相关推荐

年月日三级联动菜单

javascript中创建对象的几种方式

清除js缓存

JS操作cookie

iframe下的cookie设置

IE域名带有下划线导致的session丢失

Iframe父页面和子页面之间的JS调用

CSS3的一些特效

js中undefined,null,NaN的区别

jQuery---循环滚动新闻列表

html提交表单中input image和img

DTD文件定义

doctype声明、浏览器的标准、怪异等模式

IE，火狐，OPERA等浏览器CSS Hack和向后兼容

Javascript正则表达式

HTTP协议

Zend Studio中安装Aptana及几个配置说明

10 个很棒的 jQuery 代码片段

HTTP session cookie原理及应用

CSS子选择器

最近访客更多访客>>