DOM：Document Object Model 文档对象模型。用来将标记性文档封装成对象，并将标记性文档中的所有内容(标签、文本、属性等)都封装成对象。封装成对象的目的是为了更为方便的操作这些文档以文档的所有内容。 标记型文档特点：除了标签就是标签封装的内容以及标签的属性 文档对象模型： 文档：标签性文档 对象：封装了属性和行为的实体，可以被直接调用 模型：所有标记性文档都具有的共性特征的一个体现 只要是标记型文档，DOM这种技术都可以对其进行操作 常见的标记型文档：html xml DOM这种技术是如何对标记型文档进行操作的？ 要操作标记型文档必须对其进行解析，将标记型文档解析成一个DOM树，并将其中的内容都封装成节点对象。将文档变成对象 DOM解析： 好处：可以对树中的节点进行任意操作。比如：增删改查 弊端：这种解析需要将整个标记型文档加载进内存。意味着如果标记性文档体积很大，较为浪费空间 另一种解析方式SAX，是由一些组织定义的一种民间常用解析方式，并不是w3c标准。而DOM是w3c的标准。SAX解析方式基于事件驱动的解析。获取数据的速度很快，但是不能对标记进行增删改。 DOM技术的解析方式： DOM解析将按照标签的层次关系体现出标签的所属。形成一个树状结构。这个树状结构称为DOM树。而树中的标签以及文本甚至属性称为节点。这个节点也称为对象。 DOM模型有三种: 模型一：将html文档封装成了对象 模型二：在模型一基础上加入了新功能，比如解析名称空间；如：<html xmlns="名称空间命名"><table><tbody><tr></tr></tbody></table></html> 模型三：将xml文档封装成了对象 DHTML:动态的HTML。不是一门语言，是多项技术综合体的简称。其中包含了HTML、CSS、DOM、BOM、Javascript 这四个技术在动态html页面效果定义时，都处于什么样的角色？负责什么样的职责？ html：负责提供标签，对数据进行封装，目的是便于对标签中的数据进行操作； 简单说：用标签封装数据 css：负责提供样式属性，对标签中的数据进行样式的定义。 简单说：对数据进行样式定义 dom：负责将标记型文档以及文档中的内容进行解析并封装成对象。在对象中定义了更多的属性和行为，便于对对象操作 简单说：将文档和标签以及其他内容对象变成对象 js：负责提供程序设计语言，对页面中的对象进行逻辑操作简单说：负责页面的行为定义。就是页面的动态效果。所以js是动态效果的主力编程语言 DHTML+XMLHttpRequest = AJAX BOM：Browser Object Model浏览器对象模型，这个模型方便于操作浏览器 浏览器对应的对象就是window对象。这个可以通过查询dhtml API获得
<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>演示window中的对象</title> </head> <body> <script type="text/javascript" src="out.js" </script> <script type="text/javascript"> function windowObjDemo(){ //想要知道这个浏览器的信息，就需要使用window对象中的navigator var name = window.navigator.appName; var version = window.navigator.appVersion; println(name+":"+version); } </script> <input type="button" value="演示window中的对象" οnclick="windowObjDemo();"/><script type="text/javascript"> function windowObjDemo1(){ //window:代表浏览器中一个打开的窗口。无需自行创建，当浏览器一打开此对象就已经创建 var name = window.navigator.appName;//navigator:包含关于 Web 浏览器的信息;属性appName: 获取浏览器的代码名称 var version = window.navigator.appVersion;//属性appVersion:获取浏览器运行的平台和版本。 println(name+":"+version); } function windowObjDemo2(){ //location:包含关于当前 URL 的信息。 var protocol = window.location.protocol;//设置或获取 URL 的协议部分。 var text = window.location.href;//设置或获取整个 URL 为字符串。 //设置location的href，改变了地址栏的值，并对其进行了解析，如果是http，还进行了链接访问 window.location.href="http://www.sina.com.cn"; } function windowMethodsDemo(){ var timeId; var b = window.confirm("确定点击吗？");//返回布尔值 window.setTimeout("alert('超时了~')"，4000);//设置一个毫秒值超时后执行一个表达式 timeId = window.setInterval("alert('时间到了，就执行一次')"，4000);//每经过指定毫秒值后计算一个表达式 //window.clearTimeout(timeId); window.clearInterval(timeId); } function windowMove(){ window.moveBy(10,10);//在原有坐标基础上在x和y两个方向偏移10 window.moveTo(x,y);//偏移到指定坐标点 } function windowOpen(){ window.open("http:www.sina.com.cn","_blank","height=200,width=400,status=yes,toolbar=yes,menubar=yes,location=yes");//利用其制作广告 } function windowClose(){ window.setTimeout("close()",3000);//window是可以省略不写的 } function windowEvent(){ window.onunload = function(){ alert("onunload run");};//在对象卸载前立即触发 window.οnlοad=fucntion(){ window.status="加载完毕！"; }； } /* 演示弹窗广告效果 */ function popUpAds(){ window.open("../demo/ad.html","_blank","height=400,status=no,toolbar=no,menubar=no,location=no"); /*在ad.html中添加以下脚本*/ window.οnunlοad=function(){ window.open("../demo/ad.html","_blank","height=400,status=no,toolbar=no,menubar=no,location=no"); }; window.setInterval("focus()",1000); }</script>
网页开发基础篇-DOM
最新推荐文章于 2023-08-25 19:20:44 发布
579
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
