一、DOM简述
DOM—Document Object Model, 它是 W3C 国际组织的一套 Web 标准。它定义了访问 HTML 文档对象的一套习属性、方法和事件。
DOM 是以层次结构组织的节点或信息片断的集合。文档对象模型( Document Object Model )是给 HTML 与 XML 文件使用的一组 API 。 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 :所打开“子窗口”的“父窗口”的名称 。
常用属性:
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) : 把窗口移动到指定坐标位置。两个参数 分别 表示横坐标、纵坐标。
常用方法:
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) : 把窗口调整到指定尺寸。两个参数分别表示浏览器窗口的宽和高。
( 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的方法。
此对象相当于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">
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 指定的文档来替换当前文档。
</script>
主要方法:
1 assign(“url”) : 加载 URL 指定的新的 HTML 文档。
2 reload() : 重新加载当前页。
3 replace(“url”) : 通过加载 URL 指定的文档来替换当前文档。
五、文档对象
Document
Document
对象表示给定浏览器窗口中的
HTML
文档,并用于检索文档的信息、检查和修改
HTML
元素和文档中的文本、以及处理事件。
主要属性:
1 alinkColor : 设置或获取元素中所有激活链接的颜色
主要属性:
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(“TagName”):