日期:2014-05-16  浏览次数:20407 次

《JavaScript Bible》_基于W3C的基本对象模型

在学习了Java、C++这类面向对象编程语言之后,学习JavaScript的朋友可能会有一个很让人费解的疑问:我怎么可以用到一些我明明没有创建的对象?


?的确,在正式转向(也有人是第一次学习“语言”)JavaScript之前,应该对编程的对象有一个初步的了解。


首先有一点需要知道,在不远的以前,由于浏览器品牌与版本之间的相互不兼容,浏览器中定义的文档对象模型(DOM)是有很大的差异的。幸运的是,DOM世界正在围绕World Wide Web Consortium(W3C,这是一个很重要的Web标准组织,请google)定制的标准而稳定下来。因此,下文说的模型都是基于W3C而来的。

?

一、浏览器基本对象模型:

先来看一下现在浏览器的基本对象模型:


?

图有点丑哦,自己画的。不过没关系,只要看得清楚就行了么....

在这个模型里面,有一个很清楚的东西,就是层次模型----一层导出一层。事实上,时候记住这个模型并不重要,重要的是对象之间的关系,下面我们来简要描述这些对象:


@window对象:居于层次模型的最顶端。此对象表示HTML文档在浏览器窗口的内容区域(注意,包括内容,但不只是内容)。在多重框架的环境下,每个框架都是一个窗口(现在并不需要懂,事实上,我现在也不懂,囧...)


@navigator对象:表示当前浏览器的品牌与版本的东东。注意,此对象为只读,你不能修改....


@screen对象:看名字就知道,封装了显示器的信息。这也是一个只读的东东....


@history对象:我们知道,浏览器一般会保存最近的浏览信息(你按后退和前进键)。但不要以为这个对象仅封装保存了这些信息,它最多能帮助脚本模拟单击后退或前进的效果...


@location对象:一个浏览器能载入多个页面。我们现在只需要知道这个对象能帮助我们控制这些窗口或者框架就行了


@document对象:window对象下最重要的对象,也是使用率非常高的对象。因为我们载入的HTML文档(页面)整个就是一个document对象,你说它重要不重要。下面会继续分析这个对象的...

?

?

一个小小的应用:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>This is My First Script</title>
		<style type="text/css">
		.highlight {color :fuchsia;} 
}
		</style>
		
		<script type="text/javascript">
		<!-- hide from old browser 对不支持JavaScript的浏览器隐藏JS
			function shoeMyBrowserType(){
				document.getElementById("readout").innerHTML =
					"your browser say it is :"+
					"<span class ='highlight'> "+
					navigator.userAgent +"</span>.<hr />";
					//navigator.userAgent;
			}
			window.onload = shoeMyBrowserType;
			//end of hiding -->
		</script>
</head>
<body>
		<br>
		<h1>Let's Script..</h1>
		<br />
		<div id = "readout"></div>
	
</body>
</html>
?


二、HTML文档模型(DOM):