极度郁闷，有一段时间没登陆51了，今天回来竟然把提示问题给弄丢了，猜了半个小时才猜出来。。。。
DOM
上一篇 / 下一篇 2010-01-07 07:01:15 / 个人分类：页面设计
1.DHTML
a. jacascript将浏览器本身、网页文档、以及网页文档中的HTML元素等都用相应的内置对象来表示，这些对象及对象之间的层次关系统称为javascript:;" onClick="javascript:tagshow(event, 'DOM');" target="_self">DOM(Document Object Model,文档对象模型)。
b.用户通过鼠标或按键在浏览器窗口或网爷元素上执行的操作，对DOM对象来说，就称之为事件。譬如，用户用鼠标单击了网爷上的某个按忸，在这个按忸上就发生了鼠标单击事件，按忸就是事件源。
c.如果将一段程序代码与某个事件源上发生的某种事件相关联的程序代码，从而引发的一连串程序动作，这个过程被称之为事件驱动（Event Driver）.对时间进行处理的程序或函数，被称之为时间处理程序（Event Handler）.它完成对事件进行响应的动作。
d.CSS（级联样式表）、脚本编程语言和DOM的结合使用，能够使HTML文档与拥护具有交互性和动态变换性，这三种技术的单一称谓叫DHTML（Dynamic,动态HTML）。
================================================================
2.DOM对象的层次关系
window
|---------location
|---------frames
|--------history
|--------navigator
|--------exent
|-------screen
|-------document
|-----links
|-----anchors
|-----images
|-----filters
|------forms
|------applets
|-------embeds
|-------plugIns
|-------frames
|-------scripts
|-------all
|--------selection
|---------styleSheets
|---------body
================================================================
3.如何编写事件处理程序
①在事件源对象所对应的HTML标签上增加一个要处理的事件属性，让事件属性值等与处理该时间的函数名或程序代码。
例1：
<html>
<head>
<script. language="javascript">
function hideContextmenu() ----------(怎么排查程序中的错误呢？
1. 分段加入alert语句，确定错误范围
{
2.单击浏览器左下角的黄色图标）
window.event.returnValue=false;
}
</scrript>
</head>
<body ncontextmenu="hideContextmenu()">
</body>
</html>
</head>
例2：
<html>
<script. language="javascript">
function hideContextmenu(){
return false;
}
</script>
</head>
<body ncontextmenu="return hideContextmenu()">
</body>
</html>
②直接在javascript代码中，设置元素对象的事件属性，让事件属性值等于处理事件的函数名或程序代码。
举例：
<script. language="javascript">
document.oncontextmenu=hideContextmenu;
function hideContextmenu(){
return false;
}
</script>
③在一个专门的<script>标签中编写某个元素对象的某种事件处理程序代码，并用for属性指定事件源和用event属性指定事件名。
举例：
<script. language="javascript" for="document" event="oncontextmenu">
window.event.returnValue=false;
</script>
===============================================================
4.window对象
a.widow对象代表浏览器的整个窗口，编程人员可以利用window对象控制浏览器窗口的各个方面，如改变状态拦上的显示文字、谈出对话框、移动窗口的位置等。
b.对window对象的属性和方法的引用，可以省略“widow.”这个前缀，例如，window.alert("你好");可以直接写成alert("你好");
===============================================================
5.window对象----方法
◆ alert方法
◆ confirm 方法
◆ prompt 方法
◆ navigate方法（将当前窗口导航到新的url地址）
◆ serInterval方法（设置浏览器每隔多长时间定期调用指定的程序代码，设置的时间以豪秒为单位）
◆ setTimeout 方法（设置浏览器过多长时间以后执行指定的程序代码，设置时间以豪秒为单位）
◆ clearInterval方法，取消setInterval方法设置，参数要取消setInterval方法调用的返回值。
◆ clearTimeout方法，取消setTimeout方法设置，参数为要取消的setTimeout方法调用的返回值。
◆ moveTo方法，将浏览器窗口移动到屏幕指定的某个位置。
◆ resizeTo方法，改变浏览器窗口大小。
◆ open方法
◆ showModalDialog 方法 产生一个摸态窗口
◆ showModelessDialog 方法
test.html网页文件：
<script. language=javascript>
window.open("information.html","_blank","top=0,left=0,width=200,height=200,toolbar=no")
</script>
information.html网页文件：
<script. language=javascript>
window.serTimeout("window.close",5000);
</script>
<body>
<center><h3>通知</h3></center>
5秒钟后，这个窗口自动关闭！
<body>
================================================================
6.window对象-frames数组对象（1）
window对象的franes属性是一个数组，它与window对象的parent,top等对象属性，都是用于对HTML的侦标签（<frameset>或iframe）进行编程的javascript对象。
franedemo.html
<html>
<head>
<frameset rows="20%,80%">
<frame. name=top src="top.html">
<frame. name=bottom src="bottom.html">
</frameset>
</html>
top.html
<input type=button value="刷新" nclick="window.parent.frames[1].location.reload()">
<input type=button value="刷新" nclick="parent.bottom.location.reload()">
<input type=button value="刷新"onclick="parent.frames['bottom'].location.reload()">
<input type=button value="刷新"onclick="parent.frames.item(1).location.reload()">
<input type=button value="刷新"onclick="parent.bottom.location.reload()">
================================================================
window对象-----frames数组对象（2）
top.html
<frameset rows="20%">
<frame. name="a">
<frame. name="x" src="bottom.html">
</frameset>
bottom.html
<frameset cols="30">
<frame. name="b">
<frame. name="c" src="bottom_right.html">
<frameset>
bottom_right.html
<script. language="javascript">
top.a.document.write("www.it315.org");
</script>
===============================================================
document对象方法：
◆ write方法
◆ open方法
◆ close方法
◆ clear方法 清除稳当里面的内容
◆ getElementByid()：返回id属性值等于指定参数的所有HTML元素对应的对象数组。（在同一个HTML文档中，不能有2个相同的ID属性值相同的元素）
◆ getElementsByName 返回name属性等于指定参数的所有HTML元素对应的对象数组。
◆ getElementByTagName, 返回标签名等于指定参数的所有HTML标签对应的对象数组。
◆ crateElement，产生一个代表某个HTML元素的对象。（可以使用其他的一些方法将这个对象所表示的HTML元素插入到HTML稳当中）
◆ crateStyleSheet方法：为当前HTML文档产生一个样式表或增加一条样式规
则。
================================================================
ducument对象的属性
◆ alinkColor属性 超连接被选中（即在超连接上按下鼠标）时的颜色/
◆linkColor 超连接的正常状态（没有任何动作前）下颜色
◆vlinkColor属性 访问过的超连接的显示颜色
◆ bgColor属性，指定整个稳当背景的颜色
◆ fgColor属性 指定稳当中文本默认的前景颜色
================================================================
document对象的对象属性
◆forms数组，代表了文档中所有<form></form>标签对的集合。
◆anchors数组，代表了文档中所有指定了name属性或id属性的<a></a>标签对
◆ links数组，代表文档中所有指定了href属性的<a></a>标签对的集合。
◆images数组，代表了html文档中所有<img>标签集合
◆scripts数组：代表了文档中所有<script></script>标签对的集合。
◆applets数组。代表了文档中<applet></applet>标签对集合。
◆ all数组。代表文档中所有标签对集合
◆styleSheets数组
◆body
◆title
a. jacascript将浏览器本身、网页文档、以及网页文档中的HTML元素等都用相应的内置对象来表示，这些对象及对象之间的层次关系统称为javascript:;" onClick="javascript:tagshow(event, 'DOM');" target="_self">DOM(Document Object Model,文档对象模型)。
b.用户通过鼠标或按键在浏览器窗口或网爷元素上执行的操作，对DOM对象来说，就称之为事件。譬如，用户用鼠标单击了网爷上的某个按忸，在这个按忸上就发生了鼠标单击事件，按忸就是事件源。
c.如果将一段程序代码与某个事件源上发生的某种事件相关联的程序代码，从而引发的一连串程序动作，这个过程被称之为事件驱动（Event Driver）.对时间进行处理的程序或函数，被称之为时间处理程序（Event Handler）.它完成对事件进行响应的动作。
d.CSS（级联样式表）、脚本编程语言和DOM的结合使用，能够使HTML文档与拥护具有交互性和动态变换性，这三种技术的单一称谓叫DHTML（Dynamic,动态HTML）。
================================================================
2.DOM对象的层次关系
window
|---------location
|---------frames
|--------history
|--------navigator
|--------exent
|-------screen
|-------document
|-----links
|-----anchors
|-----images
|-----filters
|------forms
|------applets
|-------embeds
|-------plugIns
|-------frames
|-------scripts
|-------all
|--------selection
|---------styleSheets
|---------body
================================================================
3.如何编写事件处理程序
①在事件源对象所对应的HTML标签上增加一个要处理的事件属性，让事件属性值等与处理该时间的函数名或程序代码。
例1：
<html>
<head>
<script. language="javascript">
function hideContextmenu() ----------(怎么排查程序中的错误呢？
1. 分段加入alert语句，确定错误范围
{
2.单击浏览器左下角的黄色图标）
window.event.returnValue=false;
}
</scrript>
</head>
<body ncontextmenu="hideContextmenu()">
</body>
</html>
</head>
例2：
<html>
<script. language="javascript">
function hideContextmenu(){
return false;
}
</script>
</head>
<body ncontextmenu="return hideContextmenu()">
</body>
</html>
②直接在javascript代码中，设置元素对象的事件属性，让事件属性值等于处理事件的函数名或程序代码。
举例：
<script. language="javascript">
document.oncontextmenu=hideContextmenu;
function hideContextmenu(){
return false;
}
</script>
③在一个专门的<script>标签中编写某个元素对象的某种事件处理程序代码，并用for属性指定事件源和用event属性指定事件名。
举例：
<script. language="javascript" for="document" event="oncontextmenu">
window.event.returnValue=false;
</script>
===============================================================
4.window对象
a.widow对象代表浏览器的整个窗口，编程人员可以利用window对象控制浏览器窗口的各个方面，如改变状态拦上的显示文字、谈出对话框、移动窗口的位置等。
b.对window对象的属性和方法的引用，可以省略“widow.”这个前缀，例如，window.alert("你好");可以直接写成alert("你好");
===============================================================
5.window对象----方法
◆ alert方法
◆ confirm 方法
◆ prompt 方法
◆ navigate方法（将当前窗口导航到新的url地址）
◆ serInterval方法（设置浏览器每隔多长时间定期调用指定的程序代码，设置的时间以豪秒为单位）
◆ setTimeout 方法（设置浏览器过多长时间以后执行指定的程序代码，设置时间以豪秒为单位）
◆ clearInterval方法，取消setInterval方法设置，参数要取消setInterval方法调用的返回值。
◆ clearTimeout方法，取消setTimeout方法设置，参数为要取消的setTimeout方法调用的返回值。
◆ moveTo方法，将浏览器窗口移动到屏幕指定的某个位置。
◆ resizeTo方法，改变浏览器窗口大小。
◆ open方法
◆ showModalDialog 方法 产生一个摸态窗口
◆ showModelessDialog 方法
test.html网页文件：
<script. language=javascript>
window.open("information.html","_blank","top=0,left=0,width=200,height=200,toolbar=no")
</script>
information.html网页文件：
<script. language=javascript>
window.serTimeout("window.close",5000);
</script>
<body>
<center><h3>通知</h3></center>
5秒钟后，这个窗口自动关闭！
<body>
================================================================
6.window对象-frames数组对象（1）
window对象的franes属性是一个数组，它与window对象的parent,top等对象属性，都是用于对HTML的侦标签（<frameset>或iframe）进行编程的javascript对象。
franedemo.html
<html>
<head>
<frameset rows="20%,80%">
<frame. name=top src="top.html">
<frame. name=bottom src="bottom.html">
</frameset>
</html>
top.html
<input type=button value="刷新" nclick="window.parent.frames[1].location.reload()">
<input type=button value="刷新" nclick="parent.bottom.location.reload()">
<input type=button value="刷新"onclick="parent.frames['bottom'].location.reload()">
<input type=button value="刷新"onclick="parent.frames.item(1).location.reload()">
<input type=button value="刷新"onclick="parent.bottom.location.reload()">
================================================================
window对象-----frames数组对象（2）
top.html
<frameset rows="20%">
<frame. name="a">
<frame. name="x" src="bottom.html">
</frameset>
bottom.html
<frameset cols="30">
<frame. name="b">
<frame. name="c" src="bottom_right.html">
<frameset>
bottom_right.html
<script. language="javascript">
top.a.document.write("www.it315.org");
</script>
===============================================================
document对象方法：
◆ write方法
◆ open方法
◆ close方法
◆ clear方法 清除稳当里面的内容
◆ getElementByid()：返回id属性值等于指定参数的所有HTML元素对应的对象数组。（在同一个HTML文档中，不能有2个相同的ID属性值相同的元素）
◆ getElementsByName 返回name属性等于指定参数的所有HTML元素对应的对象数组。
◆ getElementByTagName, 返回标签名等于指定参数的所有HTML标签对应的对象数组。
◆ crateElement，产生一个代表某个HTML元素的对象。（可以使用其他的一些方法将这个对象所表示的HTML元素插入到HTML稳当中）
◆ crateStyleSheet方法：为当前HTML文档产生一个样式表或增加一条样式规
则。
================================================================
ducument对象的属性
◆ alinkColor属性 超连接被选中（即在超连接上按下鼠标）时的颜色/
◆linkColor 超连接的正常状态（没有任何动作前）下颜色
◆vlinkColor属性 访问过的超连接的显示颜色
◆ bgColor属性，指定整个稳当背景的颜色
◆ fgColor属性 指定稳当中文本默认的前景颜色
================================================================
document对象的对象属性
◆forms数组，代表了文档中所有<form></form>标签对的集合。
◆anchors数组，代表了文档中所有指定了name属性或id属性的<a></a>标签对
◆ links数组，代表文档中所有指定了href属性的<a></a>标签对的集合。
◆images数组，代表了html文档中所有<img>标签集合
◆scripts数组：代表了文档中所有<script></script>标签对的集合。
◆applets数组。代表了文档中<applet></applet>标签对集合。
◆ all数组。代表文档中所有标签对集合
◆styleSheets数组
◆body
◆title
相关阅读:
- 子html 页面刷新父页面并关闭 (qaarchitech, 2008-10-16)
- 改写jQuery实现固定表头，滚动内容 (liangjz, 2008-10-26)
- 改写jQuery实现固定表头，滚动内容 (qaarchitech, 2008-10-26)
- 巧用批处理解决ie不支持javascript等问题 (超越自我, 2008-11-01)
- HTTPUnit对部分中文网页JS检测出错的处理方法 (liangjz, 2009-1-01)
- QTP使用JavaScript操作ActiveX控件 (chenyb85, 2009-5-20)
- 自动化测试 (douxiance, 2009-7-21)
- JavaScript CSS Style属性对照表 (51testing, 2009-11-03)
- JavaScript与Java的区别 (51testing, 2009-11-04)
TAG: JavaScript js DOM javascript