DOM札记

2012-09-23

DOM笔记DOM一. DHTML1. JavaScript将浏览器本身、网页文档、以及网页文档中的HTML元素等都用相应的内置对象

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标签上增加一个要处理的事件属性，让事件属性值等于处理该事件的函数名或程序代码

6.2 直接JavaScript代码中，设置元素对象的事件属性，让事件属性值等于处理该事件的函数名或程序代码。

二.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对象----方法举例

??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对象。

?
9.2
?
三. 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
?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、

热点排行

Web前端

DOM札记