JavaScript 基于对象编程
基于对象编程
定位JavaScript 脚本为基于对象的脚本编程语言而不是面向对象的编程语言，是因为JavaScript 以DOM 和BOM 中定义的对象模型及操作方法为基础，但又不具备面向对象编程语言所必具备的显著特征如分类、继承、封装、多态、重载等，只能通过嵌入其他面向对象编程语言如Java 生成的Java applet 组件等实现Web 应用程序的功能。JavaScript 支持DOM 和BOM 提供的对象模型，用于根据其对象模型层次结构来访问目标对象的属性并施加对象以相应的操作。
JavaScript 对象的生成
JavaScript 是基于对象的编程语言，除循环和关系运算符等语言构造之外，其所有的特征几乎都是按照对象的处理方法进行的。JavaScript 支持的对象主要包括：
JavaScript 核心对象：包括同基本数据类型相关的对象（如String、Boolean、Number）、允许创建用户自定义和组合类型的对象（如Object、Array）和其他能简化JavaScript 操作的对象（如Math、Date、RegExp、Function）。
浏览器对象：包括不属于 JavaScript 语言本身但被绝大多数浏览器所支持的对象，如控制浏览器窗口和用户交互界面的window 对象、提供客户端浏览器配置信息的Navigator 对象。该部分内容将在第7 章重点叙述。
用户自定义对象：由Web 应用程序开发者用于完成特定任务而创建的自定义对象，可自由设计对象的属性、方法和事件处理程序，编程灵活性较大。该部分内容将在本章后续小节叙述。
文本对象：由文本域构成的对象，在DOM 中定义，同时赋予很多特定的处理方法，如insertData( )、 appendData( )等
HTML 文档结构
在HTML 文档中，其标记如<body>与</body>、<p>与</p>等都是成对出现的，称为标记对。文档内容通过这些成对出现的标记对嵌入到文档中，与JavaScript 脚本等其他代码一起构成一个完整的HTML 文档。
DOM 框架
关注在浏览器解释HTML 文档时如何设定各元素的这种“社会”关系及处理这种关系的方法，从实际应用的角度出发，HTML 文档根据DOM 中定义的框架模型在浏览器解释后生成对象访问层次，而JavaScript 脚本经常要控制其中的某个对象
DOM 基本框架如图所示，其中灰色代表模型中的顶级对象，包括window 对象及其下的frames、location、document、history、navigator、screen 等对像。
DOM中的顶级对象及其作用
顶级对象之间的关系
window 对象包含当前浏览器窗口中的所有对象，为对象访问过程忠默认的顶级对象，如引用该对象的alert( )方法，可将window.alert(msg)直接改写为alert(msg)，同样window.document.forms[1]可改写为document.forms[1]；
screen 对象包含当前浏览器运行的物理环境信息，如当前屏幕分辨率；
navigator 对象包含当前浏览器的相关信息，如浏览器版本等；
location 对象以URL 形式保存正在浏览的文档相关信息，如路径等；
history 对象包含浏览器当前窗口的访问历史列表，如单击链接进入新页面，则原始页面地址列入当前窗口的访问历史列表中；
frames[]对象包含当前Window 页面中的框架数组成员，如实例中的两个框架，每个框架都包含一个独立的document 对象；
document 对象包含HTML 文档中的HTML 标记和构成文档内容的文本的对象，在每个单独保存的HTML 文档中都直接包含一个document 对象。
JavaScript 核心对象
Array ：提供一个数组模型，用来存储大量有序的类型相同或相似的数据，将同类的数据组织在一起进行相关操作。
Boolean： 对应于原始逻辑数据类型，其所有属性和方法继承自Object对象。当值为真表示true，值为假则表示false。
Date：提供了操作日期和时间的方法，可以表示从微秒到年的所有时间和日期。使用Date读取日期和时间时，其结果依赖于客户端的时钟。
Function ：提供构造新函数的模板，JavaScript中构造的函数是Function对象的一个实例，通过函数名实现对该对象的引用。
Math： 内置的Math对象可以用来处理各种数学运算，且定义了一些常用的数学常数，如Math对象的实例的PI属性返回圆周率π的值。各种运算被定义为Math对象的内置方法，可直接调用。
Number： 对应于原始数据类型的内置对象，对象的实例返回某数值类型。Object 包含由所有 JavaScript 对象所共享的基本功能，并提供生成其它对象如Boolean等对象的模板和基本操作方法。
RegExp： 表述了一个正则表达式对象，包含了由所有正则表达式对象共享的静态属性，用于指定字符或字符串的模式。
String：和原始的字符串类型相对应，包含多种方法实现字符串操作如字符串检查、抽取子串、连接两个字符串甚至将字符串标记为HTML等。
文档对象的引用
通过对象位置访问文档对象
浏览器载入HTML 文档后，将根据该文档的结构和DOM 规范生成对象数组，该对象数组中各对象之间的相对位置随着HTML 文档的确定而确定下来，JavaScript 脚本可以通过这个确定的相对位置来访问该对象。
<form>
<input type=text value="Text in Form1">
</form>
<form>
<input type=text value="Text1 of Form2">
<input type=text value="Text2 of Form2">
</form>
浏览器载入该文档时，生成forms[]数组，第一个form 为form[0]，第二个form 为form[1]：
则通过它们的位置进行访问的方法如下：
document.forms[0]
document.forms[1]
而form[1]下面还有两个文本框，可通过如下方式访问：
document.forms[1].elements[0]
document.forms[1].elements[1]
则访问第二个form 里面的第二个text 的value 属性可通过如下的方法：
document.forms[1].elements[1].value
此种方法简单明了，但对象的位置依赖于HTML 文档的结构，如果文档结构改变而不改变上述的访问代码，浏览器弹出“某某对象为空或无此对象”错误信息。
通过对象名称访问文档对象
1．通过name 属性访问文档对象
程序首先设定第一个表单的name 属性为MyForm1，包含在它里面的文本框的name 属性为MyTextOfForm1，第二个表单的name 属性为MyForm1，包含在它里面的两个文本框的name 属性分别为：MyText1OfForm2 和MyText2OfForm2。则通过如下的代码访问三个文本框的value 属性：
<form name="MyForm1">
<input type=text name="MyTextOfForm1" value="Text in Form1">
</form>
//第二个表单
<form name="MyForm2">
<input type=text name="MyText1OfForm2" value="Text1 of Form2">
<input type=text name="MyText2OfForm2" value="Text2 of Form2">
</form>
document.MyForm1.MyTextOfForm1.value
document.MyForm2.MyText1OfForm2.value
document.MyForm2.MyText2OfForm2.value
2．通过id 属性访问文档对象
在段落语句中，设定id 为p1：
<p id="p1">Welcome to<B> DOM </B>World! </p>
然后通过这个id 属性访问到p 元素，即定位了该对象（元素对象）：
currentElement=document.getElementById('p1');
通过id 属性和name 属性访问文档对象的方法，有利于文档对象的精确定位，同时从根本上解决了“通过对象位置访问文档对象”方法过于依赖文档结构的问题。
通过联合数组访问文档对象
在HTML 被浏览器解释执行的同时，同类型的元素将构成某个联合数组的元素，可通过一个整数或者字符串为索引参数，完全定位该对象。一般情况下使用HTML 文档中分配给标记元素的id 属性或name 属性作为参数。
在访问文档对象的实现语句document.forms["MyForm1"].elements[0]中，也可用如下的语句代替，可实现同样的功能：
document.forms["MyForm1"].elements["MyTextOfForm1"]
创建和使用自定义对象
JavaScript 脚本中创建自定义对象的方法主要有两种：通过定义对象的构造函数的方法和通过对象直接初始化的方法。
通过定义对象的构造函数的方法
用户必须先定义一个对象的构造函数，然后再通过new 关键字来创建该对象的实例。
定义对象的构造函数如下：
function School(iName,iAddress,iGrade,iNumber)
{
this.name=iName;
this.address=iAddress;
this.grade=iGrade;
this.number=iNumber;
this.information=showInformation;
}
当调用该构造函数时，浏览器给新的对象分配内存，并隐性地将对象传递给函数。this操作符是指向新对象引用的关键词，用于操作这个新对象。下面的句子：
this.name=iName;
该句使用作为函数参数传递过来的iName 值在构造函数中给该对象的name 属性赋值，该属性属于所有School 对象，而不仅仅属于School 对象的某个实例如上面中的ZGKJDX。对象实例的name 属性被定义和赋值后，可以通过如下方法访问该实例的该属性：
var str=ZGKJDX.name;
使用同样的方法继续添加其他属性address、grade、number 等，但information 不是对象的属性，而是对象的方法：
this.information=showInformation;
方法information 指向的外部函数showInformation 结构如下：
function showInformation()
{
var msg="";
msg="自定义对象实例：\n"
msg+="\n 机构名称 : "+this.name+" \n";
msg+="所在地址 : "+this.address +"\n";
msg+="教育层次 : "+this.grade +" \n";
msg+="在校人数 : "+this.number
window.alert(msg);
}
同样，由于被定义为对象的方法，在外部函数中也可使用this 操作符指向当前的对象，并通过this.name 等访问它的某个属性。
通过对象直接初始化的方法
此方法通过直接初始化对象来创建自定义对象，与定义对象的构造函数方法不同的是，该方法不需要生成此对象的实例，
<script>
<!--
//直接初始化对象
var ZGKJDX={name:"中国科技大学",
address:"安徽·合肥",
grade:"高等学府",
number:"13400",
information:showInformation
};
//定义对象的方法
function showInformation()
{
var msg="";
msg="自定义对象实例：\n"
msg+="\n 机构名称 : "+this.name+" \n";
msg+="所在地址 : "+this.address +"\n";
msg+="教育层次 : "+this.grade +" \n";
msg+="在校人数 : "+this.number
window.alert(msg);
}
-->
</script>
修改、删除对象实例的属性
执行this.number=23500 语句后，对象实例的number 属性值更改为23500；执行delete this.number 语句后，对象实例的number 属性变为undefined，同任何不存在的对象属性一样为未定义类型，但我们并不能删除对象实例本身，否则返回错误。
JavaScript 动态添加、修改、删除对象实例的属性过程十分简单，之所以称之为对象实例的属性而不是对象的属性，是因为该属性只在对象的特定实例中才存在，而不能通过某种方法将某个属性赋予特定对象的所有实例。
通过原型为对象添加新属性和新方法
JavaScript 语言中所有对象都由Object 对象派生，每个对象都有指定了其结构的原型（prototype）属性，该属性描述了该类型对象共有的代码和数据，可以通过对象的prototype属性为对象动态添加新属性和新方法。
程序调用对象的prototype 属性给对象添加新属性和新方法：
School.prototype.addAttributeOfArea="3000";
School.prototype.addMethod=MyMethod();
原型属性为对象的所有实例所共享，用户利用原型添加对象的新属性和新方法后，可通过对象引用的方法来修改。
内存的分配和释放
创建对象的同时，浏览器自动为该对象分配内存空间，JavaScript 将新对象的引用传递给调用的构造函数，在对象清除时其占据的内存将自动回收，其实整个过程都是浏览器的功劳，JavaScript 只负责创建该对象。
浏览器中的这种内存管理机制称为“内存回收”，它动态分析程序中每个占据内存空间的数据(变量、对象等)，如果该数据对于程序标记为不可再用时，浏览器将调用内部函数将
其占据的内存空间释放，实现内存的动态管理。
文档对象模型(DOM)
文档对象模型（DOM）是一个能够让程序和脚本动态访问和更新文档内容、结构和样式的语言平台，提供了标准的HTML 和XML 对象集，并有一个标准的接口来访问并操作它们。它使得程序员可以很快捷地访问HTML 或XML 页面上的标准组件，如元素、样式表、脚本等等并作相应的处理。DOM 标准推出之前，创建前端Web 应用程序都必须使用Java Applet 或ActiveX 等复杂的组件，现在基于DOM 规范，在支持DOM 的浏览器环境中，Web 开发人员可以很快捷、安全地创建多样化、功能强大的Web 应用程序。
DOM 概述
文档对象模型定义了 JavaScript 可以进行操作的浏览器，描述了文档对象的逻辑结构及各功能部件的标准接口。主要包括如下方面：
核心 JavaScript 语言参考（数据类型、运算符、基本语句、函数等）
与数据类型相关的核心对象（String、Array、Math、Date 等数据类型）
浏览器对象（window、location、history、navigator 等）
文档对象（document、images、form 等）
JavaScript 使用两种主要的对象模型：浏览器对象模型（BOM）和文档对象模型（DOM），前者提供了访问浏览器各个功能部件，如浏览器窗口本身、浏览历史等的操作方法；后者则提供了访问浏览器窗口内容，如文档、图片等各种HTML 元素以及这些元素包含的文本的操作方法。
基本对象模型
基本对象模型提供了一个非常基础的文档对象层次结构，并最先受到NN2 的脚本支持。在该模型中，window 位于对象层次的最高级，包括全部的document 对象，同时具有其他对象所没有的属性和方法，document 就是浏览器载入的HTML 页面，其上的链接和表单元素如按钮等交互性元素被作为有属性、方法和事件处理程序的元素对象来对待。由于功能十分有限，JavaScript 主要应用于简单的网页操作，如表单合法性验证、获取程序最后一次修改的时间等等。
对象的属性和方法
DOM 将文档表示为一棵枝繁叶茂的家谱树，如果把文档元素想象成家谱树上的各个节点的话，可以用同样的记号来描述文档结构模型，在这种意义上讲，将文档看成一棵“节点
树”更为准确。
何谓节点
所谓节点(node)，表示某个网络中的一个连接点，换句话说，网络是节点和连线的集合在W3C DOM 中，每个容器、独立的元素或文本块都被看着一个节点，节点是W3C DOM
的基本构建块。当一个容器包含另一个容器时，对应的节点之间有父子关系。同时该节点树遵循HTML 的结构化本质，如<html>元素包含<head>、<body>，前者又包含<title>，后者包含各种块元素等。
1．元素节点(element node )
在HTML 文档中，各HTML 元素如<body>、<p>、<ul>等构成文档结构模型的一个元素对象。在节点树中，每个元素对象又构成了一个节点。
2．文本节点(text node)
在节点树中，元素节点构成树的枝条，而文本则构成树的叶子。如果一份文档完全由空白元素构成，它将只有一个框架，本身并不包含什么内容。没有内容的文档是没有价值的，而绝大多数内容由文本提供。在下面语句中：
<p>Welcome to<em> DOM </em>World! </p>
包含“Welcome to” 、“DOM” 、 “World!”三个文本节点。在HTML 中，文本节点总是包含在元素节点的内部，但并非所有的元素节点都包含或直接包含文本节点，如“购物清单”中，<ul>元素节点并不包含任何文本节点，而是包含着另外的元素节点，有的元素节点只是间接包含文本节点。
3．属性节点(attribute node)
HTML 文档中的元素或多或少都有一些属性，便于准确、具体地描述相应的元素，便于进行进一步的操作，例如：
<h1 class="Sample">Welcome to DOM World！</h1>
<ul id="purchases">…</ul>
这里class="Sample"、id="purchases"都属于属性节点。因为所有的属性都是放在元素标签里，所以属性节点总是包含在元素节点中。
对象属性
属性一般定义对象的当前设置，反映对象的可见属性，如checkbox 的选中状态，也可能是不很明显的信息，如提交form 的动作和方法。在DOM 模型中，文档对象有许多初始
属性，可以是一个单词、数值或者数组，来自于产生对象的HTML 标记的属性设置。如果标记没有显式设置属性，浏览器使用默认值来给标记的属性和相应的JavaScript 文本属性赋值。DOM 文档对象主要有如下重要属性
例如如下 HTML 语句：
<p id="p1">Welcome to<B> DOM </B>World! </p>
对象方法
对象方法是脚本给该对象的命令，可以有返回值，也可没有，且不是每个对象都有方法定义
id 属性和class 属性
id 属性的用途是给HTML 文档中的某个特定的元素对象加上独一无二（对当前文档而言）的标识符，便于精确访问这个元素对象。
每个元素对象只能有一个id 属性值，不同的元素对象必须有不同的id 属性值。也可利用id 属性为包含在某给定元素里的其他元素定义样式，这样定义的样式将只作用于包含在
给定元素里的指定元素。
id 属性就是一座桥梁，连接着文档中的某个元素和CSS 样式表中的特定样式，同时实现元素对象的相关操作。
所有的元素都有 class 属性，不同的元素可以有相同的class 属性值
getElementById( )方法
该方法返回与指定id 属性值的元素节点相对应的对象，对应着文档里一个特定的元素节点（元素对象）。该方法是与document 对象相关联的函数，其语法如下：
document.getElementById(id)
其中id 为要定位的对象id 属性值。
getElementByTagName( )方法
该方法返回文档里指定标签tag 的元素对象数组，与上述的getElementById( )方法返回对象不同，且返回的对象数组中每个元素分别对应文档里一个特定的元素节点（元素对象）。其语法如下：
element. getElementByTagName(tag)
其中tag 为指定的标签。下面给出的例子演示该方法返回的是对象数组，而不是对象。
var items=document.getElementByTagName("li");
for(var i=0;i<items.length;i++)
{
document.write(typeof item[i]);
}
getElementByName( )方法
相对于id 属性值，旧版本的HTML 文档更习惯于对<form>、<select>等元素节点使用name 属性。此时需要用到文档对象的getElementByName( )方法来定位。该方法返回指定名称name 的节点序列，其语法如下：
Document. getElementByName(name)
其中name 为指定要定位的元素对象的名字
getAttribute( )方法
该方法返回目标对象指定属性名称的某个属性值。语法如下：
object.getAttribute(attribute)
其中attribute 为对象指定要搜索的属性
setAttribute( )方法
该方法可以修改任意元素节点指定属性名称的某个属性值，语法如下：
object.setAttribute(attribute,value)
类似于getAttribute( )方法，setAttribute( )方法也只能通过元素节点对象调用，但是需要传递两个参数：
attribute：指定目标节点要修改的属性
value：属性修改的目标值
removeAttribute( )方法
该方法可以删除任意元素节点指定的属性，语法如下：
object.removeAttribute(name)
类似于getAttribute( )和setAttribute( )方法，removeAttribute( )方法也只能通过元素节点对象调用。其中name 标示要删除的属性名称
附加的节点处理方法
生成节点
DOM 中提供的方法生成新节点的操作非常简单，语法分别如下：
MyElement=document.createElement("h1")
MyTextNode=document.createTextNode("My Text Node!")
MyComment=document.createComment("My Comment!")
插入和添加节点
把新创建的节点插入到文档的节点树最简单的方法就是让它成为该文档某个现有节点的子节点，appendChild(newChild)作为要添加子节点的节点的方法被调用，将一个标识为
newChild 的节点添加到它的子节点的末尾。语法如下：
object.appendChild(newChild)
insertBefore(newChild,targetChild)方法将文档中一个新节点newChild 插入到原始节点targetChild 前面，语法如下：
parentElement.insertBefore(newChild,targetChild)
调用此方法之前，要明白三点：
要插入的新节点 newChild
目标节点 targetChild
这两个节点的父节点 parentElement
其中，parentElement=targetChild.parentNode，且父节点必须是元素节点。
复制节点
有时候并不需要生成或插入新的节点，而只是复制就可以达到既定的目标。DOM 提供cloneNode( )方法来复制特定的节点，语法如下：
clonedNode=targetNode.cloneNode(bool)
其中参数bool 为逻辑量：
bool=1 或true：表示复制节点自身的同时复制节点所有的子节点；
bool=0 或false：表示仅仅复制节点自身。
删除和替换节点
可以在节点树中生成、添加、复制一个节点，当然也可以删除节点树中特定的节点。DOM 提供removeChild()方法来进行删除操作，语法如下：
removeNode=object.removeChild(name)
参数name 指明要删除的节点名称，该方法返回所删除的节点对象。
DOM 中使用replaceChild( )来替换指定的节点，语法如下：
object.replaceChild(newChild,oldChild)
其中参数：
newChild：新添加的节点
oldChild：被替换的目标节点
816
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
