`
白粥若水
  • 浏览: 101589 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
社区版块
存档分类
最新评论

《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）：

多余的话不说，我们先看一看一个最简单的HTML文件（文档）：

<html>
     <head></head>
     <body></body>
</html>

       html元素包括了两个嵌套元素：head和body。也就是说，head元素和body元素作为对象是以存在于容器对象html（对容器的概念，学过Java的人应该不陌生了吧）为基础的。

 

现在将之简化为树状模型：


 

 

注意，html对象本身是处于document容器对象之中的。

 

看完了例子我们再看一点理论的东西。

 

有一个趋势我想是比较重要的：标签，如：<div>，将只是用来定义文档结构和文档中不同内容的上下文。仅仅用标签来自定义文本外表的时代一去不复返，因为有css嘛。

 

上面说的上下文的意思，举个例子吧，如果我们想显示一行文本，我们这些新手一般用的是<h1>标签，但实际上这个不正确，因为<h1>的上下文是“一级标题”。比如：在googleCode中，就是用<h1>标签里面的内容作为文章的标题的。如果硬要显示，用<p>标签嘛。

 

 

靠，没写完，不小心点了发表草稿。

 

以后继续...

  • 大小: 17.3 KB
  • 大小: 12.4 KB
分享到：
| 《Thinking in Java》_类型信息与反射机制
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics