在学习了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
分享到:
相关推荐
javascript圣经,学习js必备的噢
Linux+Bible_10th edition_2020.pdf
Danny Goodman’s “JavaScript Bible” Object Road Map
JavaScript 圣经第5版 JavaScript 圣经第5版 JavaScript 圣经第5版
JavaScript Bible - Gold Edition.pdf JavaScript圣经-黄金版
一部有关C语言的电子教程,是方便的chm格式的。
### JavaScript Examples Bible - 关键知识点解析 #### 一、书籍概览 《JavaScript Examples Bible》是一本专门为JavaScript学习者设计的实战指南。本书由著名的编程书籍作者Danny Goodman编写,作为其畅销书...
JavaScript 圣经第5版(PDF).rar JavaScript 圣经第5版(PDF).rar JavaScript 圣经第5版(PDF).rar
c#_Bible_Hungry_Minds (VBL).pdf c#_Bible_Hungry_Minds (VBL).pdf
1142578_Adobe InDesign CS5 Bible_9780470607169__908
1148983_Adobe Acrobat 9 PDF Bible_9780470379196__1322
ActionScript 3.0 Bible_code
Javascript圣经(第五版)PDF格式,官方版本,非扫描,有大纲! John.Wiley.and.Sons.JavaScript.Bible.5th.Edition.eBook-DDU
The JavaScript classic Target Audience Anyone who either uses or wants to learn JavaScript. Contents This is a detailed reference and tutorial guide to the JavaScript language. It is divided into ...
javascript圣经(第五版)
Updated to include the latest coverage of JavaScript, including howit fits into current Web browsers and applications as well as an exploration of its interaction with XML data in Ajax - This mammoth ...
提到JavaScript的面向对象编程(OOP),它不同于传统的类为基础的OOP,而是基于原型的。在JavaScript中,对象可以直接从其他对象继承属性和方法,无需预先定义类。对象的属性和方法可以动态添加,这提供了很大的灵活...
JavaScript圣经:第五版英文版。清晰~~
10992245_OS X Mountain Lion bible_9781118499894_866