初识DOM

最新推荐文章于 2023-03-02 14:28:22 发布

菜鸟的封装史

最新推荐文章于 2023-03-02 14:28:22 发布

阅读量769

点赞数

分类专栏： DOM 文章标签： dom

本文链接：https://blog.csdn.net/yangxin_540/article/details/12012357

版权

DOM 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

第一 DOM概括

一、概述：

1、DOM：Document Object Model文档对象模型。该技术的出现，将标记型文档封装成了对象，当标记型文档被DOM解析器解析后，会按照标签的底层关系，产生一个树形结构，可以称之为DOM树，这棵树的每一个分支就可以称之为节点。而标签就是节点中的一种。并将该标记型文档中的所有内容（标签、属性、文本）都封装成了对象。这样就可以将对象中封装更多的属性和行为，方便与操作这些对象。

2、DOM本身是不依赖于平台和语言的一项技术，只对标记型文档进行操作，每一个软件只要内部封装了DOM解析器，就可以解析标记型文档。对于浏览器可以解析html文档，并生成DOM树，就是因为本身封装了DOM解析器

3、DOM在不断升级过程中产生了三层模型：

DOM level1：对html进行封装

DOM level2 ：对1进行升级，提供了一些新特性，比如可以融入名称空间

DOM level3 ：对xml 进行封装

4、日后常用的标记型语言还xml，作为通用的配置文件，需要被其他应用程序所解析获取其中封装的配置信息。在java中为xml解析提供了很多对象来操作xml，这些数据都封装到了org.w3c.dom包中。但是java自己的解析方式比较麻烦，所以就有了一些组织定义了一些解析工具针对java语言：DOM4J

5、DOM的特点：将标记性文档封装成了DOM树，也就是会将整个标记型文档加载进内存

注：如果该文档体积过大，会对内存消耗，运行速度会稍慢。所以就有了一些民间组织定义了一个解析方式：SAX，基于时间驱动方式来解析数据。该解析方式速度快，但是只能xml文档数据进行获取不可以进行修改，而DOM可以。

第二 DHTML（动态的HTML）

一、概述：

1、DHTML它不是一门语言，是多个技术的综合体简称，这里包含的技术有HTML、CSS、DOM、Javascript

2、上述四种语言在DHTML中的角色：

①、HTML提供了标签用于封装数据，它是基础，没有标签什么都做不了

②、CSS提供了样式，可以对HTML中封装的数据进行样式操作

③、DOM将HTML文档封装成了对象，并将文档中的内容都封装成了对象，对象中都定义了更多的属性和行为，方便于对对象的操作

④、Javascript提供了逻辑性很强的程序设计语言，负责页面的行为

注：如果加入一个xmlHttpRequest对象，就成了AJAX。

二、window对象的使用，没什么可说的，看代码吧：

<body>
<script type="text/javascript">
	//window对象简单演示
	function windowdemo(){
		alert(window.navigator.appName);
	}
	
	function windowdemo2(){
		//alert(window.location.href);
		location.href="http://www.baidu.com";
	}
	
	//window方法简单演示
	function windowmethod(){
		var b = window.confirm("请选择！");
		window.alert(b);
	}
	
	function windowmethod2(){
		for(var x=1; x<10; x++){
			moveBy(20,0);
			resizeTo(100,100);
			moveBy(0,20);
			resizeTo(1000,1000);
			moveBy(-20,0);
			resizeTo(100,100);
			moveBy(0,-20);
			resizeTo(1000,1000);
		}
	}
	
	var timeid;
	function windowmethod3(){
		//setTimeout("alert('haha')",2000);
		timeid = setInterval("alert('hehheh')",2000);
	}
	
	function windowmethod4(){
		clearInterval(timeid);
	}
	
	function windowmethod5(){
		clearInterval(timeid);
		window.open("ad.html",null,"height=200,width=400,status=no,toolbar=no,menubar=no,location=no");
	}
	
	//window事件简单演示，下面演示的可以用作流氓广告，这里就不写了
	onload = function(){
		alert("onload");
	}
	
	onunload = function(){
		alert("onunload");
	}
	
	onbeforeunload = function(){
		alert("onbeforeunload");
	}
	
</script>
<input type="button" value="演示window对象" οnclick="windowdemo2()" />
<input type="button" value="演示window方法" οnclick="windowmethod3()" />
<input type="button" value="停止弹出" οnclick="windowmethod4()" />
<input type="button" value="广告弹出" οnclick="windowmethod5()" />
</body>