DOM对象

一、DOM简述

DOM—Document ObjectModel,它是W3C国际组织的一套Web标准。它定义了访问HTML文档对象的一套习属性、方法和事件。

DOM是以层次结构组织的节点或信息片断的集合。文档对象模型(DocumentObjectModel)是给HTML与XML文件使用的一组API。DOM的本质是建立网页与脚本语言或程序语言沟通的桥梁。

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

DOM对象

从上图可以看出:

(1)打开网页后,首先看到的是浏览器窗口,即顶层的window对象。

(2)其次,看到的是网页文档的内容,即document文档。

(3)定位对象:

window.document.myform.text1

document.myform.text1

因为window窗口对象是所有页面的根对象,所以常常省略。

(4)地址对象location和历史对象history,它他对应IE浏览器中的地址栏和前进/后退按钮。
二、窗口window

常用属性:

1window.clesed:指明窗口是否关闭。

2window.defaultValue:窗口状态栏的默认信息。

3window.docement:表示浏览器窗口中的HTML文档。

4window.location:表示有关当前URL的信息。

5window.history:表示有关当前访问过的RUL的信息。

6window.name:设置或检索窗口或框架的名称。

7window.screen:包含有关客户的屏幕和显示性能的信息。

8window.screenX:窗口X坐标

9window.screenY:窗口Y坐标

10window.status:设置或检索窗口状态栏中的信息。

11window.title:设置或检索窗口顶部标题栏中的信息。

12window.self:当前窗口。

13window.parent:当前窗口的最上层窗口。

14window.top:当前显示的窗口的最上层窗口。

15window.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>
 

常用方法:

1window.alert(“提示信息”)显示一个包含确定按钮的对话框。

2window.blur()使对象失去焦点并激发onblur事件。

3window.close()关闭窗口。

4window.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表示不显示。

5window.confirm(“提示信息”)显示一个确认对话框,包括确定和取消按钮。当点确定按钮时返回的是true,点取消按钮时返回的是false。

6window.prompt(“提示信息”,显示在text中的默认值)显示带输入框提示对话框,主要用来收集信息。当点确定按钮时返回的是true,点取消按钮时返回的是false。

7窗口定位的方法:

1window.moveBy(x,y)实现窗口的定向、定量移动。两个参数分别表示x方向移动的距离和y方向移动的距离。

2window.moveTo(x,y)把窗口移动到指定坐标位置。两个参数分别表示横坐标、纵坐标。

8 窗口大小控制的两个方法:
1resizeBy(x,y)按指定的尺寸调整窗口的大小。两个参数分别表示在水平方向上的改变量和垂直方向上的改变量。

2resizeTo(x,y)把窗口调整到指定尺寸。两个参数分别表示浏览器窗口的宽和高。

9 操作定时器的两个方法:

1setTimeout(“函数’,毫秒数)设置定时器,经过指定毫秒值后执行某个函数。2clearTimeout(定时器对象)取消某个定时器。

三、历史对象history

主要属性:

1window.history.length:得到浏览器历史清单中的项目个数。

主要方法:

1window.history.back():加载History列表中的上一个URL,相当于IE的后退按钮。等同于window.history.go(-1);

2window.history.forward():加载History列表中的下一个URL,相当于IE的前进按钮。等同于window.history.go(1);

3go(“url”ornumber):加载History列表中的一个URL,或要求浏览器移动指定的页面数。

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

1window.location.hash

设置或检索另一个页面里的锚

2window.location.host设置或检索URL的主机名和端口号

3window.location.hostname设置或检索URL的主机名部分

4window.location.pathname设置或检索URL相对路径

5window.location.href:设置或检索完整的URL字符串(常用)

6window.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>
 

主要方法:

1assign(“url”)加载URL指定的新的HTML文档。

2reload()重新加载当前页。

3replace(“url”)通过加载URL指定的文档来替换当前文档。

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

主要属性:

1 alinkColor设置或获取元素中所有激活链接的颜色
2linkColor设置或获取对象文档链接的颜色。
3vlinkColor设置或获取用户已访问过的链接颜色。
4URL设置或获取当前文档的URL。
5location:获取当前URL的信息。
6title设置或获取当前文档的标题。
7protocol设置或获取 URL 的协议部分。
8readyState获取表明对象当前状态的值。
9alinkColor设置或获取元素中所有激活链接的颜色。
10bgColor设置或获取表明对象后面的背景颜色的值。
11fgColor设置或获取文档的前景(文本)颜色。
12all返回对象所包含的元素集合的引用。
13anchors获取所有带有 name 和/或id 属性的 a 对象的集合。此集合中的对象以 HTML 源顺序排列。
14applets获取文档中所有 applet 对象的集合。
15childNodes获取作为指定对象直接后代的 HTML 元素和 TextNode 对象的集合。
16embeds获取文档中所有 embed 对象的集合。
17forms获取以源顺序排列的文档中所有 form 对象的集合。
18frames获取给定文档定义或与给定窗口关联的文档定义的所有window 对象的集合。
19images获取以源顺序排列的文档中所有 img 对象的集合。
20links获取文档中所有指定了 HREF 属性的 a 对象和所有 area 对象的集合。
21namespaces获取 namespace 对象的集合。
22scripts获取文档中所有 script 对象的集合。
23styleSheets获取代表与文档中每个 link 或style 对象的实例相对应的样式表的 styleSheet 对象的集合。
主要方法:
1clear(): 清除当前文档。
2close(): 关闭输出流并强制将数据发送到显示。
3write("text"): 在指定窗口的文档中写入一个或多个HTML 表达式。
4writeln("text"): 在指定窗口的文档中写入一个或多个HTML 表达式,后面追加一个换行符。5focus(): 使得元素得到焦点并执行由 onfocus 事件指定的代码。6 hasFocus():获取表明对象目前是否拥有焦点的值。7getElementById("ID "):8 getElementsByName("Name"):9getElementsByTagName_r(“TagName”):

DOM对象

相关推荐