本文详细介绍了DOM（文档对象模型）的概念、用途及解析方式，以及DHTML（动态HTML）的组成与各组件作用，同时展示了如何利用DOM与DHTML技术实现网页交互与动态效果，包括使用JavaScript操作DOM、利用事件与窗口对象实现动态事件处理。
DOM：Document Object Model（文档对象模型）
1）主要用来将标记型文档封装成对象，并将标记型文档中的所有的内容（标签，文本，属性等）都封装成对象。
2）封装成对象的目的是为了更方便的操作这些文档以及文档中的所有内容，因为对象的出现就可以有属性和行为被调用。
3）文档对象模型：
文档：标记型文档
对象：封装了属性和行为的实例，可以被直接调用
模型：所有标记型文档都具备的一些共性特征的一个体现，标记型文档（标签，属性，标签中封装的数据）
4）只要是标记型文档，DOM这种技术都可以对其进行操作
常见的标记型文档：html XML
5）DOM这种技术是如何对标记型文档进行操作的呢？
要操作标记型文档首先必须对其进行解析，
DOM技术的解析方式：
如上图所示：DOM技术的解析方式：将标记型文档解析成一棵DOM树，并将树中的内容都封装成节点对象
注意：这个DOM解析的好处是可以对树这种的节点进行任意操作，比如：增删改查
弊端：这种解析需要将整个标记型文档加载进内存，意味着如果标记型文档体积过大，较为浪费内存空间
另一种解析方式：SAX
（是由一些组织定义的一种民间常用的解析方式，并不是w3c标准，而DOM是w3c的标准）
SAX解析：基于事件驱动的解析，获取数据的速度非常快，但不能对标记进行增删改查。
DOM模型有三种：
1）模型1：将html文档封装成对象
2）模型2：在模型1基础上加入了一些新功能，比如可以解析名称空间，（跟Java中的包差不多，就是如果两个类名相同，则必须放到两个包中，以示区分），名称空间一般是这么用的：
如上，可以表示这个<table>标签在这两个空间中的含义不一样，不过一般都用域名进行区分，因为域名不可能重复，是唯一的。
3），模型3：将XML文档封装成了对象
DHTML：动态的html。（不是一门语言，是多项技术综合体的简称，其中包含了html，CSS，DOM，javascript，那么这四个技术在DHTML页面效果定义时，都处于什么样的角色呢？负责什么样的职责呢？）
HTML：负责提供标签，对数据进行封装，目的是便于对该标签中的数据进行操作。（简单说：用标签封装数据）
CSS：负责提供样式属性，对标签中的数据进行样式的定义。（简单说：对数据进行样式定义）
DOM：负责将标记型文档（标签型文档）以及文档中的所有内容进行解析，并封装成对象，在对象中定义了更多的属性和行为，便于对对象进行操作。（简单说：将文档和标签以及其他内容变成对象）
Javascript：负责提供程序设计语言，对页面中的对象进行逻辑操作。（简单说：负责页面的行为定义，就是页面的动态效果，所以javascript是动态效果的主力编程语言）
DHTML+XMLhttpRequest=AJAX
BOM:Browser Object Model(浏览器对象模型)
这个模型方便与操作浏览器
浏览器对应的对象就是window对象，这个可以通过查阅DHTML 的API.
实例：演示Window对象中的navigator
为了演示方便，定义一个事件源，通过对事件源的触发，获取想要的结果。
比如让用户通过点击按钮就可以知道浏览器的一些信息
<input type=”button” value=”演示Window对象” onclick=”windowObjDemo()”/>
用javascript自己定义一个方法windowObjDemo().
那么该javascript的代码该放的哪儿呢？
如果只是关联这一个按钮，紧接着上面的代码写就写，但是如果跟多个按钮关联，就要放的<head></head>之内。
<script type=”text/javascript”>
function windowObjDemo()
{
var name=window.navigator.appName;
var version=window.navigator.appVersion;
Document.write(“name=”+name+”version=”+version);
}
</script>
2)另一个对象location（地址栏），可以和服务器进行交互
function windowObjDemo2()
{
var pro=location.protocol;
var text=location.href;（拿到地址栏中的内容）
alert(pro);
//注意locationz中的属性既可以得到值，也可以给它赋值，并对其值进行了解析。如果是http,还信息链接访问。
//eg:location.href=”http://www.baidu.com”;
}
3)介绍window对象中的一些常见方法
confirm()方法//该方法会弹出一个窗体，包含确定，取消两个按钮，点击确定返回true，点击取消，返回false。
setTimeout(表达式，毫秒值)；//将过指定毫秒值，执行这个表达式
setInterval(表达式，毫秒值);//每隔指定毫秒值，执行这个表达式（那么如何停止呢？这就要用的下一个方法stopTime()方法，它根据timeid来停止一个方法）
var Timeid=setInterval(表达式，毫秒值)；
clearInterval（timeid）;
moveBy(ix,iy);窗口移动ix,iy
moveTo(ix,iy);窗口移动到ix,iy
open()方法//窗口中的广告就是用这个原理。
close（）方法
（下面利用open()方法，close()方法，setTimeout()方法来实现网页中弹出一条广告，3s后再让其自动关闭）
window.html
<BODY>
<script type="text/javascript">
function windowOpenDemo()
{
setInterval(
window.open("abc.html",null,
"height=200,width=400,status=yes,toolbar=no,menubar=no,location=no"),4000);
}
windowOpenDemo();
</script>
</BODY>
abc.html
<BODY>
<script type="text/javascript">
setTimeout("close()",3000);
</script>
</BODY>
3)window中的常见事件
onload事件
(让该事件去指向一个函数，这样当该事件触发的时候就会去执行该函数)
当我们去加载一个页面，当页面中的所有数据（包括文字，图片等）都被加载完毕时，就会触发该事件。
onunload事件（关闭窗口时触发，此时窗口已经消失）
onbeforeunload事件(关闭窗口时触发，此时窗口并没有消失)
4）常见属性
status属性(就是状态栏)
用法：
列如我们让窗体加载完成时，状态栏显示一些特定信息
onload=function(0
{
window.status=“啊，美女呀！”;
}
练习：
流氓网页（怎么关都关不掉）
window.html
<BODY>
<script type="text/javascript">
onload=function(){
open("abc.html","_blank",
"height=200,width=400,status=yes,toolbar=no,menubar=no,location=no");
}
</script>
</BODY>
abc.html
<BODY>
<script type="text/javascript">
setInterval("focus()", 1000);
onbeforeunload=function()
{
window.open("abc.html","_blank",
"height=200,width=400,status=yes,toolbar=no,menubar=no,location=no");
}
</script>
</BODY>
(运行不出效果，不知是否是浏览器太牛逼了)
扫一扫
840
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
