DOM笔记
DOM
一. DHTML
1. JavaScript将浏览器本身、网页文档、以及网页文档中的HTML元素等都用相应的内置对象来表示,这些对象及对象之间的层次关系统称为DOM(Document Object Model, 文档对象模型).
2. 用户通过鼠标或按键在浏览器窗口或网页元素上执行的操作,对DOM对象来说,就称之为事件(Event)。譬如,用户用鼠标单击了网页上的某个按钮,在这个按钮上就发生了鼠标单击事件,按钮就是事件源。
3. 如果将一段程序代码与某个是事件源上发生的某种事件相关联,当该事件源发生该事件时,浏览器便会自动执行与之关联的程序代码,从而引发的一连串程序动作,这个过程被称之为事件驱动(Event Driver). 对事件进行处理的程序或函数,被称之为事件处理程序(Event Handler), 它完成对事件进行响应的动作。
4. CSS(级联样式表)、脚本编程语言和DOM的结合使用,能够使HTML文档与用户具有交互性和动态变换性,这三种技术的单一称谓叫DHTML(Dynamic HTML, 动态HTML).
5. DOM对象的层次关系
window
|____location
|____frames
|____history
|____navigator
|____event
|____screen
|____document
|_____links
|_____anchors
|_____images
|_____filters
|_____applets
|_____embeds
|_____plugIns
|_____frames
|_____scripts
|_____all
|_____selection
|_____styleSheets
|_____body
6. 如何编写事件处理程序
6.1 在事件源对象所对应的HTML标签上增加一个要处理的事件属性,让事件属性值等于处理该事件的函数名或程序代码
<html> <head> <script language="javascript"> <!-- function hideContextmenu() { window.event.returnValue=false; } //--> </script> </head> <body oncontextmenu="hideContextmenu()"> </body> </html> <html> <head> <script language="javascript"> <!-- function hideContextmenu() { return false; } //--> </script> </head> <body oncontextmenu="return hideContextmenu()"> </body> </html> <a href="http://www.google.cn" onclick="return false">谷歌</a>
6.2 直接JavaScript代码中,设置元素对象的事件属性,让事件属性值等于处理该事件的函数名或程序代码。
<script language="javascript"> document.oncontextmenu=hideContextmenu; function hideContextmenu() { return false; } </script>
6.3 在一个专门的<script>标签对中编写某个元素对象的某种事件处理程序代码,并用for属性指定事件源和用event属性指定事件名。
<script language="javascript" for="document" event="oncontextmenu"> window.event.returnValue=false; </script>
二.window对象
1. window对象代表浏览器的整个窗口,编程人员可以利用window对象控制浏览器窗口的各个方面,如改变状态栏上的显示文字、弹出对话框、移动窗口的位置等。
2. 对window对象的属性和方法的引用,可以省略“window."这个前缀,例如,window.alert("你好")可直接写成alert("你好").
3. window对象----方法
3.1 alert方法
3.2 confirm方法
3.3 prompt方法
3.4 navigate方法:将当前网页导航到另一个URL
3.5 setInterval方法
3.5 setTimeout方法
3.6 clearInterval方法
3.7 clearTimeout方法
3.8 moveTo方法
3.9 resizeTo方法
3.10 open方法
3.11 showModalDialog方法
3.12 showModelessDialog方法
4. window对象----方法举例
<!--test.html网页文件:--> <script language="javascript"> window.open("information.html", "_blank", "top=0,left=0,width=200,height=200,toolbar=yes/no titlebar=yes/no fullscreen=yes/no"); </script> <!--information.html网页文件:--> <script language="javascript"> window.setTimeout("window.close()",5000); </script> <body> <center><h3>通知</h3></center> 5秒钟后,这个窗口将自动关闭! </body>
5. window对象----属性
5.1 closed
5.2 opener
5.3 defalultstatus
5.4 status
5.5 screenTop
5.6 screenLeft
5.7 window对象----属性举例
//test.html <script language="javascript"> var strStatus="www.google.cn"; var space_num=0; var dir=1; funcion scroll() { var str_space=""; space_num=space_num+1*dir; if(space_num>40||space_num<=0) { dir=-1*dir; } for(var i=0;i<space_num;i++) { str_space+=""; } window.status=str_space+strStatus; } function start() { window.setInterval("scroll()',100); } var child=window.open("information.html","_blank", "top=0,left=0,width=200,height=200,toolbar=no"); function closeChild() { if(!child.closed) { child.close(); } } </script> <body onunload="closeChild()"> </body> information.html <script language="javascript"> window.setTimeout("closeit()",5000); function closeit() { opener.start(); window.close(); } </script> <body> <center><h3>通知</h3></center> 5秒钟后,这个窗口会自动关闭! </body>
6. window对象----事件
6.1 专用事件:onload、onunload、onbeforeunload
<body onload="alert('欢迎')" onunload="alert('再见')"
onbeforeunload="window.event.returnValue='请小心'">
</body>
6.2 通用事件:onclick、onmousemove、onmouseover、onmouseout、onmousedown、
onmouseup、onkeydown、onkeyup、onkeypress
7. window对象----对象属性
7.1 location对象
★window.location.href="www.google.cn";
等效于:
window.navigate("www.google.cn");
★location对象的replace方法也可用于载入新的网页
★location对象的reload方法用于重新载入(刷新)窗口中的当前网页
7.2 event对象
7.3 frames数组对象:表示窗口中所有子窗口的集合
7.4 screen对象
7.5 clipboardData对象
7.6 history对象
7.7 navigator对象
7.8 document对象:表示整个网页文档
8.window对象----event对象
8.1 属性:altKey、ctrlKey、shiftKey、clientX、clientY、screenX、screenY、offsetX、offsetY
x、y、returnValue、cancelBubble、srcElement、keyCode、button
9. window对象----frames数组对象
9.1 window对象的frames属性是一个数组,它与window对象的parent, top等对象属性,都是用于对HTML的帧标签(<frameset>或<iframe>)进行编程的JavaScript对象。
<!--framedemo.html--> <html> <head> </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="刷新" onclick="window.parent.frames[1].location.reload()"> <input type=button value="刷新" onclick="parent.frames.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.item['bottom'].location.reload()"> <input type=button value="刷新" onclick="parent.bottom.location.reload()"> <input type=button value="刷新" onclick="parent['bottom'].location.reload()">
9.2
<!--top.html--> <frameset rows="20%,*"> <frame name="a"> <frame name="x" src="bottom.html"> </frameset> <!--bottom.htm--> <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.google.cn"); //parent.parent.a.document.write("www.google.cn"); </script> <!--top.html--> <frameset row="20%,*"> <frame name="a"> <frameset cols="30%,*"> <frame name="b"> <frame name="c" src="bottom_right.html"> </frameset> </frameset> <!--bottom_right.html--> <script language="javascript"> top.a.doucument.write("www.google.cn"); </script>
三. document
1. document对象----方法
1.1 write
1.2 writeln
1.3 open: 用于打开一个新的文档
1.4 close: 当向新打开的文档对象中写完数据后,使用该方法关闭文档流
1.5 clear
1.6 getElementById:
1.7 getElementByName:
1.8 getElementByTagName:
1.9 createElement:
1.10 createStyleSheet:
1.11
<html> 这是最初的内容<br> <script language="javascript"> document.write("这是write方法动态写入的内容<br>"); function updatedoc() { document.writeln("abc<br>"); document.writeln("def<br>"); document.close(); var owin=window.open("","_blank"); owin.document.writeln("xyz<br>"); owin.document.close(); owin.document.write("abc<br>"); owin.document.write("def<br>"); owin.document.close(); } </script> <input type=button name="update" value="更新" onclick="updatedoc()" > </html>
2. 网页文档加密
2.1 网页文档内容的加解密
<script>
document.write(unescape(escape('
//网页文档
')));
</script>
2.2 对Javascript脚本代码进行解密
<script language="JScript Encode">
</script>
2.3 对Javascript脚本代码进行解密
2.4 使用ASP、JSP等程序动态产生的Javascript脚本文件来隐藏网页文档内容
<script language="javascript" src="xxx.asp">
</script>
</script>
3. document对象----属性
3.1 与<body>标签相关的属性:alinkColor、linkColor、vlinkColor、bgColor、fgColor
3.2 描述网页文档信息的属性:charset、defaultCharset、cookie、fileCreatedDate、fileModifiedDate
fileSize、lastModified、URL、
上一篇: java web开发
下一篇: 一个crm系统数据设计问题