jQueryStorm-Chapter2
第2章必须知道的JavaScript知识
JavaScript是jQuery应用的基础，掌握JavaScript这门语言是使用jQuery的基础条件。本章不会全面细致的讲解JavaScript的全部，而是讲解其精髓，这些知识可以提升大家的JavaScript内功。切忌，要修炼上乘的武功，必须要有深厚的内功基础，否则只可学到其招式而发挥不了功力。JavaScript实际上包括三部分：
?ECMAScript描述了该语言的语法和基本对象。
?DOM描述了处理网页内容的方法和接口。
?BOM描述了与浏览器进行交互的方法和接口。
本章将讲解ECMAScript和DOM的相关知识。
2.1JavaScript基础
通常所说的JavaScript语法，实际上是指JavaScript中的ECMAScript部分。本节主要讲解JavaScript 的语法和语意特性。
2.1.1JavaScript与ECMAScript
很多人知道JavaScript，却不知道ECMAScript为何物。这就好比你知道本书的作者叫做张子秋，但是却不知道作者也属于人类一样。为什么要知道两者的关系呢？因为除了JavaScript，还有微软的JScript，以及Flash中的ActionScript，这几种语言写法上有太多的相似之处。懂得ECMAScript，就能够清楚地理解这些语言为何如此的相似
什么是ECMAScript？下面是维基百科中对于ECMAScript的定义：
ECMAScript是一种由ECMA国际（前身为欧洲计算机制造商协会）通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，但实际上后两者是ECMA-262标准的实现和扩展。
1995年Netscape公司发布的Netscape Navigator2.0中，发布了与Sun联合开发的JavaScript1.0并且大获成功，并且随后的3.0版本中发布了JavaScript1.1，恰巧这时微软进军浏览器市场，IE3.0搭载了一个JavaScript的克隆版-JScript，再加上Cenvi的ScriptEase（也是一种客户端脚本语言），导致了三种不同版本的客户端脚本语言同时存在。为了建立语言的标准化，1997年JavaScript1.1作为草案提交给欧洲计算机制造商协会（ECMA），第三十九技术委员会（TC39）被委派来“标准化一个通用的，跨平台的，中立于厂商的脚本语言的语法和语意标准”。最后在Netscape、Sun、微软、Borland等公司的参与下制订了ECMA-262，该标准定义了叫做ECMAScript的全新脚本语言。
从此以后的Javscript，JScript，ActionScript等脚本语言都是基于ECMAScript标准实现的。
所以，ECMAScript实际上是一种脚本在语法和语义上的标准。实际上JavaScript是由ECMAScript，DOM和BOM三者组成的。所以说，在JavaScript，JScript和ActionScript中声明变量，操作数组等语法完全一样，因为它们都是ECMAScript。但是在操作浏览器对象等方面又有各自独特的方法，这些都是各
自语言的扩展。图2-1显示了ECMAScript与各个语言的关系。
图2-1各种脚本语言的关系
2.1.2JavaScript中的值类型和引用类型
不同于C#，Java中多种多样的“类”，JavaScript是一个相对单纯的世界。JavasScript中也分为值类型和引用类型两大类，但是这两大类中都只含有很少的几种类型。
了解C#语言的都对值类型和引用类型不会陌生。JavaScript中有时也称为原始值（primitive value）和引用值（reference value）。
值类型：存储在栈（stack）中，一个值类型的变量其实是一个内存地址，地址中存储的就是值本身。
引用类型：存储在堆（heap）中，一个引用类型的变量的值是一个指针，指向存储对象的内存处。2.1.3JavaScript中的原始类型
时刻记着“值类型”和“引用类型”的区别有助于更好的理解语言的精髓。为了化繁为简，虽然从理论上应该分为“值类型”和“引用类型”，又可以将JavaScript中对象分为“本地对象”，“内置对象”和“宿主对象”，但是在实际应用中为了让JavaScript变得真正单纯，可以将JavaScript中的类型分为：undefined，null，number，string，boolean，function，其他object引用类型。
即使一个JavaScript初学者对这些类型也不会陌生。这种分类方法前6种都是最常使用的JavaScript 类型，第7种object引用类型其实并不是独立的类型，因为function就是一种引用类型，另外JavaScript 中的值类型背后其实也是一个“引用类型”，这一点和C#极其相似，就是所有的类型都是从Object中派生而来。比如number是一个“值类型”，但是其实存在一个引用类型“Number”，我们可以使用如下的方式声明一个变量：
var oNumberObject=new Number(55);
Number对象是ECMAScript标准中定义的。但是本文不准备深入的讲解它们，因为最常用的还是使用下面的方式创建一个“值类型”的数值为55的变量：
var iNumberObject=55;
这就够了不是吗？但是要记住藏在背后的Number对象是一个引用类型！
2.1.4undefined，null和typeof运算符
如果你对undefined和null这两种类型经常分辨不清，那么恭喜，因为你会找到很多的知音。其实要理解这两种类型，首先要知道它们设计的初衷：
undefined：表示一个对象没有被定义或者没有被初始化。
null：表示一个尚未存在的对象的占位符。
有意思的是undefined类型是从null派生来的。所以它们是相等的：
alert(null==undefined);//输出“true”
对于所有的JavaScript开发人员，最常碰到的就是对象不存在错误。正如在C#中的空引用错误一样。很多程序员习惯的以为JavaScript中的if会自动将undefined和null对象转化为false，比如：var oTemp=null;
if(oTemp){};//false
if(undefined){};//false
上面的语句都是正确的，if中的条件都是false。但是如果注释掉oTemp的声明部分，情况就不同了：//var oTemp=null;注释掉变量声明语句
if(oTemp){};//error
会抛出错误。但是无论是否声明过oTemp对象，使用typeof运算符获取到的都是undefined并且不会报错：
//var oTemp1;注释掉变量声明语句
alert(typeof oTemp1);//输出“undefined”
var oTemp2;
alert(typeof oTemp2);//输出“undefined”
所以如果在程序中使用一个可能没有定义过的变量，并且没有使用typeof做判断，那么就会出现脚本错误。而如果是此变量是null或者没有初始化的undefined对象，可以通过if或者“==”来判断。切记，未声明的对象只能使用typeof运算符来判断！
正因为如此，typeof经常和undefined变量一起使用。typeof运算符返回的都是一个字符串，而时常程序员会当作类型来使用。是否你也犯过如下的错误呢？
//var oTemp;注释掉变量声明语句
if(typeof oTemp==undefined){…};//false
这里if将永远是false。要时刻铭记typeof返回的是字符串，应该使用字符串比较：
//var oTemp;注释掉变量声明语句
if(typeof oTemp==”undefined”){…};//true
下面是typeof运算符对各类型的返回结果：
?undefined：“undefined”
?null：“object”
?string：“string”
?number：“number”
?boolean：“Boolean”
?function：“function”
?object：“object”
?array:“object”
结果只有null类型让人吃惊。null类型返回object，这其实是JavaScript最初实现的一个错误，然后被ECMAScript沿用了，也就成为了现在的标准。所以需要将null类型理解为“对象的占位符”，就可以
解释这一矛盾，虽然这只是一中“辩解”。对于代码编写者一定要时刻警惕这个“语言特性”，因为：alert(typeof null==“null”)；//输出false
永远为false。
还要提醒，一个没有返回值的function（或者直接return返回）实际上返回的是undefined。
function voidMethod()
{
return;
}
alert(voidMethod());//输出"undefined"
2.1.5变量声明
因为JavaScript是弱类型语言，所以在变量的声明上体现了与C#等强类型语言的明显不同。
JavaScript可以使用var显式的声明变量：
var iNum;
var sName;
也可以在一个var语句中声明多个变量，用“，”分割变量：
var iNum,sName;
变量的类型是在赋值语句中确定的，JavaScript使用“=”赋值，可以在声明变量的同时对其进行赋值：var sName=”ziqiu.zhang”;
因为是弱类型语言，即使变量的类型在初始化时已经被确定，仍然可以在之后把它设置成其它类型，比如：
var sName=“ziqiu.zhang”;
alert(sName);//输出“ziqiu.zhang”
sName=55;
alert(sName);//输出输出“55”
变量除了可以显式声明，也可以隐式声明。所谓隐式声明，就是不使用var关键词声明，而直接为变量赋值，比如：
//var sName;注释掉变量声明语句
sName=“ziqiu.zhang”
alert(sName);//输出输出“ziqiu.zhang”
上面的语句不会出任何的错误。就如同使用var声明过变量一样。但是不同之处是变量的作用域。隐式声明的变量总是被创建为全局变量。即使是在一个函数中创建的变量也依然是全局的。比如：function test()
{
sName="ziqiu.zhang";
}
//var sName;
test();
alert(sName);//输出输出“ziqiu.zhang”
虽然sName是在函数中创建的，但是在函数外层仍然能够访问sName，因为sName是全局变量。
变量可以隐式声明，但是不可以不声明。如果一个变量既没有隐式声明，也没有显式声明，那么在使用时会发生对象未定义的错误。
2.1.6JavaScript命名规范
因为JavaScript语言的灵活性，很多人会忽视变量的命名，有的公司即使制定了后段代码如C#的命名规范，却忽视了JavaScript变量的命名规范。
从一开始就制定完整的JavaScript命名规范是很有必要的，尤其是在越来越追求用户体验的今天，JavaScript将会承载越来越多的用户逻辑。
先来学习三种命名方法：
?Camel命名法：首字母小写，接下来的每个单词首字母大写。比如：
var firstName,var myColor;
?Pascal命名法：首字母大写，接下来的每个单词首字母大写。比如：
var FirstName,var MyColor;
?匈牙利类型命名法：在以Pascal命名法的变量前附加一个小写字母来说明该变量的类型。例如s表示字符串，则声明一个字符串类型的变量为：
var sFirstName；
在JavaScript中应该使用匈牙利命名法命名变量，使用Camel命名法命名函数。
这一点是和C#、Java不同的。通常服务器端语言都是用Pascal命名法命名方法，即首字母要大些。但是JavaScript中的所有方法首字母都是小写的，为了和JavaScript中的默认命名一致，所以要采用Camel 命名法命名方法。比如：
function testMethod(){};
虽然JavaScript中的变量可以变换类型，但是熟悉强类型语言的人都知道，这是很危险的做法，很有可能最后在使用时都无法确定变量的类型。所以应该尽量使用匈牙利命名法命名变量，下面是匈牙利命名法的前缀列表：
类型前缀示例
Array a aNameList
Boolean b bVisible
Float f fMoney
Function fn fnMethod
Int i iAge
Object o oType Regexp(正则表达式)re rePattern
string s sName
可变类型v vObj
表2-1JavaScript中的匈牙利命名法前缀
使用匈牙利命名法是推荐的做法。但是很多程序因为历史遗留原因都使用Camel命名法。记住匈牙利命名法才是正确的方法。写代码也是一门艺术，只要有机会就应该做正确的事。
2.1.7变量的作用域与闭包
变量的作用域就是变量作用的范围，只有在变量的作用域内才可以访问该变量，否则是无法访问此变量的。比如：
function test()
{
var sName="ziqiu.zhang";
}
alert(sName);//输出"sName未定义";
会提示错误”sName”未定义。
JavaScript变量的作用域基本上与C#、Java等语言相同。但是因为JavaScript语言的特殊性，有些需要特殊理解的地方。
首先要了解，全局变量是Window对象的属性。
前面已经提到过隐式声明的变量都是全局变量。说是“全局”但实际上还是有作用域的，那就是当前窗口window对象。一个全局变量就是window对象的一个属性：
function test()
{
sName="ziqiu.zhang";
}
//var sName;
test();
alert(sName);
alert(window.sName);
隐式声明了一个全局变量sName后，既可以直接访问sName，也可以通过window.sName访问，两者的效果是相同的。
如果说全局变量还是传统的作用域模型，那么闭包（closure）的概念是会让初学者迷惑的。闭包的概念比较难以理解,先看闭包的定义:
闭包是一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。
简单表述：
闭包就是function实例以及执行function实例时来自环境的变量。
无论是定义还是简单表述，都让人难以理解。因为这都是理论的抽象。通过实例就可以快速的理解闭包的含义：
【代码路径：jQueryStorm.Web/chapter2/closure.aspx】
"https://www.wendangku.net/doc/5c3272396.html,/TR/xhtml1/DTD/xhtml1-transitional.dtd">
上面的实例使用setInterval函数，设置了一个定时器，每3秒钟会向divResult容器中，添加count变量的值，并且count变量自增。
count是start函数体内的变量，按照通常的理解count的作用域是在start()函数内，在调用start()函数结束后应该也会消失。但是此示例的结果是count变量会一直存在,并且每次被加1，数据结果是：
10
11
12
13
这是因为count变量是setInterval中创建的匿名函数(也就是包含count++的函数)的闭包的一部分！
再通俗的讲,闭包首先就是函数本身，比如上面这个匿名函数本身，同时加上在这个函数运行时需要用到的count变量。
JavaScript中的闭包是隐式的创建的，而不像其他支持闭包的语言那样需要显式创建。在C#语言中很少碰到是因为C#中无法在方法中再次声明方法.而在一个方法中调用另一个方法通常使用参数传递数据。
JavaScript中的闭包是非常强大的，可以用于执行复杂的逻辑。但是在使用时要时刻小心，因为闭包的强大也导致了它的复杂，使用闭包会让程序难以理解和维护。
2.2悟透JavaScript中的function
function类型是JavaScript的灵魂，因为程序是由数据和逻辑两部分组成的，基本的数据类型可以存储各种数据，而function则用来存储逻辑。当然这只是将function当作“方法”来看待而已。实际上function 类型有着更加强大的生命力。
2.2.1使用function声明方法和类型
可以使用function声明一个方法，比如：
function testMethod()
{
alert("Hello world!");
}
testMethod();//输出"Hello world!"
调用该方法将显示“Hello world！”。然而除了方法，function还可以用来声明“类型”。JavaScript中本没有“类型”的概念，也就是C#中的Class的概念，但是可以使用function来伪装一个类型。比如：function Car()
{
this.color="none";
if(typeof Car._initialized=="undefined")
{
Car.prototype.showColor=function()
{
alert(this.color);
}
}
Car._initialized=true;
};
上面的代码声明了一个Car类，并且带有一个color属性和一个showColor方法。这里使用的是“动态原型”方法，此方法将在下一节中做详细讲解。
好了，现在可以使用“new”运算符创建一个类的实例，并使用它：
var car=new Car();
car.showColor();//输出"none"
car.color="blue";
car.showColor();//输出"blue"
2.2.2function的本质
虽然function有这么多的能力，但是其本质却很简单：
function变量是引用类型，内容存储的是指向function内容的指针，function的内容就是函数体。
JavaScript中的对象有一个特点，里面存储的都是name/value(名/值)。用name/value存储属性是比较容易理解的，一个属性的名称就是name，比如color属性。属性的值就是value，比如color的属性值red。这与C#语言是一样的。但是JavaScript中的function也是一个name/value，这一点十分独特。可以使用alert 方法输出function变量的内容：
alert(testMethod);
输出：
图2-2函数变量输出结果
发现输出的内容就是testMethod的方法体本身。如同一个属性输出的是其属性值。
认清这一点有助于更好的理解function的本质。
2.2.4function的arguments参数对象
JavaScript不支持方法的重载，原因是在JavaScript中同名的function只能有一个，并且function函数的参数个数可以使任意的。
虽然无法直接支持“重载”，但是可以通过arguments对象来伪装重载，让一个function根据参数的不同实现不同的功能。
arguments是在function中的特殊对象，通过arguments对象可以访问到function调用者传递的所有参数信息，比如获取到传入的参数个数：
function testMethod()
{
alert(arguments.length);
}
testMethod();//输出"0"
testMethod("abc");//输出"1"
可以通过arguments的索引arguments[index]获取到每一个传入的参数值：
function myMethod()
{
alert(arguments instanceof Array);
if(arguments.length==0)
{
alert("no arguments");
}
else if(arguments.length==1)
{
alert("Hello:"+arguments[0].toString())
}
}
myMethod();
myMethod("ziqiu.zhang");
显然，上面的方法通过判断参数的个数实现了伪装重载。但是这种实现并不好，因为所有的重载逻辑都集中在一个方法中，并且有令人厌烦的多个if-else分支。
但是使用arguments可以开发出功能强大灵活的函数。在开发jQuery的插件时就要经常使用arguments 对象实现函数的伪重载。
2.2.5理解this指针
在C#中，this变量通常指类的当前实例。JavaScript则不同，JavaScript中的“this”是函数上下文,，不是在声明时决定的，而是在调用时决定的。因为全局函数其实就是window的属性，所以在顶层调用全局函数时的this是指window对象，下面的例子可以很好的说明这一切：
showName是一个function，使用alert语句输出https://www.wendangku.net/doc/5c3272396.html,,。因为showName是一个全局的函数，所以其实showName是window的一个属性：window.showName，调用全局的showName就是调用window.showName,因为window上的name属性为”I am window”，所以直接调用showName和调用window.showName都会输出”I am window”。
oName是一个对象，前面已经讲过函数也是一个属性，可以像属性一样赋值，所以将showName方法复制给oName的show方法，当调用oName.show方法时，也会触发alert(https://www.wendangku.net/doc/5c3272396.html,)语句，但是此时方法的调用者是oName，所以https://www.wendangku.net/doc/5c3272396.html,输出的是oName的name属性。
利用“this指向函数调用者”的特性，可以实现链式调用。jQuery中大部分都是链式调用。首先实现一个链式调用的例子：
var oName={name:"ziqiu.zhang",age:999};
oName.showName=function()
{
alert(https://www.wendangku.net/doc/5c3272396.html,);
return this;
};
oName.showAge=function()
{
alert(this.age);
return this;
};
oName.showName().showAge();
上面的代码首先输出”ziqiu.zhang”,然后输出”999”。oName使用链式调用方法分别调用了两个方法，等效于：
oName.showName();
oName.showAge();
使用链式调用的关键点就是要返回调用者本身，也就是this指针。
在使用this时，也常常因为this指向函数上下文的特性，导致引用的错误，比如：
var myClass=
{
checkName:function(){return true;},
test:function(){
if(this.checkName()){
alert("ZZQ");
}
}
}
$("#btnTest").click(myClass.test);
上面的例子中试图使用面向对象的方式将一些方法封装在myClass中，并为btnTest对象添加单击事件的事件处理函数。现在如果单击btnTest调用myClass.test方法，会发生错误，提示找不到checkName 方法。jQuery.proxy函数解决此问题。参见“jQuery工具函数”一章中的“修改函数上下文”一节。
2.3JavaScript中的原型
JavaScript中的原型（Prototype）是JavaScript最特别的地方之一。无论是实现JavaScript的面向对象还是继承，使用prototype都必不可少。
2.3.1使用原型实现JavaScript的面向对象
“原型”表示对象的原始状态，JavaScript中的每个对象都有一个prototype属性，但是只有Function 类型的prototype属性可以使用脚本直接操作。Object的prototype属于内部属性，无法直接操作。prototype 属性本身是一个object类型。一个函数的prototype上所有定义的属性和方法，都会在其实例对象上存在。所以说prototype就是C#类中的实例方法和实例属性。实例方法和静态方法是不同的，静态方法是指不需要声明类的实例就可以使用的方法，实例方法是指必须要先使用"new"关键字声明一个类的实例,然后才可以通过此实例访问的方法。
下面是两种方法的声明方式：
function staticClass(){};//声明一个类
staticClass.staticMethod=function(){alert("static method")};//创建一个静态方法
staticClass.prototype.instanceMethod=function(){"instance method"};//创建一个实例方法
上面首先声明了一个类staticClass,接着为其添加了一个静态方法staticMethod和一个动态方法instanceMethod，区别就在于添加动态方法要使用prototype原型属性。
对于静态方法可以直接调用：
staticClass.staticMethod();
但是实例方法不能直接调用：
staticClass.instanceMethod();//语句错误,无法运行.
实例方法需要首先实例化后才能调用：
var instance=new staticClass();//首先实例化
instance.instanceMethod();//在实例上可以调用实例方法
使用prototype除了可以声明实例方法，也可以声明实例属性。正因为原型有着如此强大的功能，所以能够使用原型来实现JavaScript的面向对象。目前存在着很多以面向对象的形式创建对象的方法，本书不一一详细讲解，只介绍一种最常用，最容易理解和使用的方法：动态原型方法。
假设要定义一个汽车Car类型，具有属性color和方法showColor(),则可以使用下面的方式声明和使用：
function Car()
{
//声明属性
this.color="none";
//声明方法
if(typeof Car._initialized=="undefined")
{
Car.prototype.showColor=function()
{
alert(this.color);
}
}
Car._initialized=true;
};
var car=new Car();
car.showColor();//输出输出为"none"
car.color="blue";
car.showColor();//输出输出为"blue"
动态原型方法的精髓在于使用prototype声明实例方法，使用this声明实例属性。除了更加接近面向对象的编程方式，这种方式特点就是简单易懂。注意充当“类定义”的function并没有带有任何参数，虽然也可以传递参数进去，但是不要这么做。这是为了下一节讲解的使用原型链实现继承机制而作的准备。
可以在创立了对象以后再为其属性赋值。虽然麻烦了一点，但是代码简单，易于理解。
2.3.2使用原型链实现继承
除了面向对象的声明方式，在面向对象的世界中最常使用的就是对象继承。在JavaScript中可以通过prototype来实现对象的继承。继续上一节Car的例子。假设Car有两个派生类，一个是GoodCar，特点是跑得快。一个是BadCar，特点是跑得慢。但是它们和Car一样都具有color属性和showColor方法。
以GoodCar类为例，只要让GoodCar的prototype属性为Car类的一个实例，即可实现类型的继承：
GoodCar.prototype=new Car();
现在，GoodCar类已经有了Car的所有属性和方法：
var goodCar=new GoodCar();
goodCar.showColor();//输出"none"
实现了继承后，GoodCar还要实现自己的run()方法，同样使用prototype实现，下面是GoodCard类的完整定义：
//创建GoodCar类
function GoodCar()
{}
GoodCar.prototype=new Car();
GoodCar.prototype.run=function(){alert("run fast");}
需要注意GoodCar类自身的方法一定要在实现继承语句之后定义。
为何称这种方式为原型链继承呢？因为GoodCar的prototype是Car，Car的prototype是object，也就是说GoodCar也具有object对象所有的属性和方法。这是一个“链”的结构。
使用原型可以简单快捷的实现JavaScript的面向对象和继承。
2.4DOM
DOM太常用了，以至于很多人操作了DOM却不知道使用的是DOM。从概念上区分JavaScript核心语法，DOM和BOM是很有必要的，“学院派”作风能够让Web的知识体系结构更加清晰。
2.4.1什么是DOM
DOM（文档对象模型）是HTML和XML的应用程序接口（API）。
上面是DOM的定义。有人将操作HTML理解为操作DOM，这没有错。但是HTML并不是DOM。操作HTML也不是DOM的唯一功能。DOM是一种模型以及操作这些模型的API。DOM分为不同的部分和级别。按照部分来划分，DOM包括：
?Core DOM
定义了一套标准的针对任何结构化文档的对象
?XML DOM
定义了一套标准的针对XML文档的对象
HTML DOM
定义了一套标准的针对HTML文档的对象。
所以Web开发人员常说的DOM其实是指HTML DOM。这其实只是DOM的一部分。DOM标准分为level1、2、3，每个标准都规定了不同的功能，并不是所有的浏览器都能实现最高级别的DOM标准。Firefox是目前实现DOM标准最优秀的浏览器，但仍在为了实现全部的DOM标准而努力。本书不对DOM 做更细致的讲解，本节的目的让开发人员正确的理解DOM与HTML DOM的关系。
2.4.2操作HTML DOM对象
通过JavaScript，可以通过DOM操作HTML的各个元素。如今的页面标准已经是XHTML时代。但是页面的本质依然是XML，一种特殊的用于页面显示的XML。无论是https://www.wendangku.net/doc/5c3272396.html,,JavaScriptp还是php，任何的服务器页面最后都要输出为HTML页面—浏览器只认识HTML。
一个页面会首先被浏览器解析成DOM，比如下面就是一个页面的DOM结构：
图2-3页面的文档对象模型
页面被浏览器解析为DOM模型后，通过JavaScript操作页面元素实际上是通过浏览器提供的基于DOM的API方法实现的。理解了这些就不会提出类似“DOM元素是JavaScript变量吗？”等疑问了。
既然DOM是一个文档树，就一定会有根节点：html元素。页面的document对象代表文档，documentElement属性就表示html对象：
var oHtml=document.documentElement;
DOM核心的API方法可以获取到一个节点的第一个元素和最后一个元素，因为一个html对象通常只有head和body两个元素，所以可以通过下面的方式获取：
var oHead=oHtml.firstChild;
var oBody=https://www.wendangku.net/doc/5c3272396.html,stChild;
理解了树状结构，使用DOM核心的方法就可以获取到页面上任意的一个元素。下面是最常用的获取元素节点的方法：
(1)getElementById
根据元素id获取元素。比如获取id为divMsg的元素:
document.getElementById("divMsg")
这是最常使用的获取元素的方法，一个页面首先应该保证每个元素的id是唯一的。因为任何元素都可以添加id属性，所以通过id能够获取到页面上面的任何一个元素。这也是效率最高的一个方法。即使使用jQuery功能强大的选择器，也应该首选使用id选择器。
但是需要注意getElementById方法只能通过document对象调用，使用oBody.getElementById会引发错误。
(2)getElementsByName
通过name属性获取一组元素。方法的名字中是复数形式的“Elements”，说明了获取到的是一组元素，通过Element的单复数形式区分获取到的是单个对象还是多个对象，是一种便于记忆的方法。getElementsByName不常使用，因为通常只有表单元素才带有name属性。
(3)getElementsByTagName
通过html元素的名称获取一组元素。比如页面上所有的div：
var aDiv=document.getElementsByTagName("div");
也可以在一个元素上调用getElementsByTagName方法，获取到的是这个元素内的元素：
var oHtml=document.documentElement;
var oBody=https://www.wendangku.net/doc/5c3272396.html,stChild;
var aMyDiv=oBody.getElementsByTagName("div");
上面的语句会获得body元素下所有的div元素。因为所有div都是在body中的，所以其实和document.getElementsByTagName("div")的结果是相同的。
除了获取，还有设置属性，创建元素，附加元素等各种DOM方法。DOM的系统学习不在本书的范围内，因为随后的章节将介绍使用jQuery来控制页面元素，jQuery的内部也是使用DOM实现的，理解了DOM的原理有助于更好的学习jQuery，甚至发现jQuery内部未被发现的错误。
2.4.3DOM元素与HTML元素
通过DOM接口操作HTML元素，实际上并不是直接改变HTML代码，中间有浏览器的帮助。在JavaScript中操作的都是DOM元素，可以使用JavaScript动态的创建一个div，然后附加到body中：
【代码路径：jQueryStorm.Web/chapter2/DOM.aspx】
"https://www.wendangku.net/doc/5c3272396.html,/TR/xhtml1/DTD/xhtml1-transitional.dtd">
上面的例子使用了标准的DOM方法创建了div元素节点oDiv，以及一个内容节点oText。在DOM 中内容也是一个节点。
注意，如果要改变页面的DOM结构，应该在浏览器加载完页面的DOM结构之后进行。否则在IE6中会经常出现浏览器操作终止的错误。本实例将添加元素的工作放在了body的onload事件中。使用jQuery 则会有更好更简单的处理方式，使用$(function(){…})这种形式就可以在DOM加载完毕后执行函数内的语句。在jQuery核心一节会详细讲解。
动态的添加了一个DOM元素，实际上改变了页面的DOM模型，随后浏览器会重新解析DOM模型并转换成页面显示，于是页面上出现了“Hello DOM”，就好像一开始就包含在HTML代码中一样。
很多时候就是在操作HTML元素，为何本节要刻意的强调DOM元素与HTML元素呢？这是为了引出关于DOM属性与HTML属性的区别。顾名思义，DOM属性就是DOM元素的属性，HTML属性就是HTML元素的属性。DOM是无法直接通过源代码看到的。但是HTML元素是实实在在存在于页面的HTML 代码中的，比如：
这是一个HTML元素，图片的地址就是img元素的src属性，值为“images/image.1.jpg”，因为HTML 元素最后都要转化成DOM元素供浏览器显示，所以浏览器最后将这部分代码解析成一个DOM元素，并且也具有一个src属性，只是属性值变成了“http://localhost/images/image.1.jpg”（假设网页在localhost站点下）。HTML中的元素最后会映射成DOM元素，而且中间的转化并不是完全一致的，img元素的图片地址会转化为绝对路径，还有些属性比如“class”转化为DOM会后会改变属性名称，变成了“className”。
牢记,在JavaScript中可以直接获取或设置"DOM属性"，所以如果要设置元素的CSS样式类,要使用的是DOM属性“className”而不是HTML元素“class”：
document.getElementById("img1").className="classB";
在执行完上面的语句后，id为img1的元素已经应用了classB样式，但是查看网页源代码，发现HTML 元素的class仍然是classA。
有了jQuery，就不需要Web开发人员刻意的理解class和className的区别。有关使用jQuery操作样式和属性将在后面的章节中详细讲解。
2.5其他JavaScript秘籍
要讲解JavaScript的全部，需要厚厚的一本书。既然无法全面讲解，就只能抽取一些武功秘籍传授给大家。除了上面讲解的JavaScript知识，本节再介绍一些JavaScript的关键知识点。
2.5.1数据通信格式JSON
JSON是指JavaScript Object Notation,即JavaScript对象表示法.所以说JSON其实是一种数据格式，因为JavaScript原生的支持所以赋予了JSON强大的生命力。比如可以使用下面的语句创建一个对象：var oPerson={
name:"ziqiu.zhang",
age:999,
school:
{
college:"BITI",
"high school":"No.18"
},
like:["mm"]
};
JSON的语法格式是使用"{"和"}"表示一个对象,使用"属性名称:值"的格式来创建属性,多个属性用","隔开.
上例中school属性又是一个对象.like属性是一个数组.使用JSON格式的字符串创建完对象后,就可以用"."或者索引的形式访问属性:
objectA.school["high school"];
objectA.like[1];
JSON经常在Ajax中使用。让服务器端页面只返回JSON格式的数据，使用JavaScript的eval方法将JSON格式的数据转换成对象，以便使用JavaScript已经操作。
JavaScript原生的支持了JSON格式，而各种语言也都有支持JSON格式的类库。在.net framework3.5中微软已经提供了原生的JSON序列化器。JSON是目前客户端与服务器端交互数据的最好的数据格式。下面提供一个以.NetFramework3.5版本中自带的JSON序列化器为基础开发的JSON帮助类，代码也可以在本书光盘的代码中或者网站上找到：
【代码路径：https://www.wendangku.net/doc/5c3272396.html,mon.Utility/JsonHelper.cs】
/**************************************************************************************************** **
**File Name:JsonHelper.cs
**Creator:ziqiu.zhang
**Create Time:2008-10-8
**Functional Description:JSON帮助类。用于将对象转换为Json格式的字符串，或者将Json的字符串转化为对象。
*使用限制：
*（1）只能在.NET Framework3.5及以上版本使用。
*（2）对象类型需要支持序列化,类上添加[DataContract]，属性上添加[DataMember]
*使用举例请参见单元测试项目。
*
**Remark:
**
**Copyright(c)eLong Corporation.All rights reserved.
*
****************************************************************************************************/
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Runtime.Serialization.Json;
using System.IO;
namespace https://www.wendangku.net/doc/5c3272396.html,mon.Utility
{
///
///JSON帮助类。用于将对象转换为Json格式的字符串，或者将Json的字符串转化为对象。
///只能在.NET Framework3.5及以上版本使用。
///
public class JsonHelper
{
///
///将对象转化为Json字符串
///
///
///源类型实例
///
public static string ObjectToJson
{
string result=string.Empty;
//创建指定类型的Json序列化器
DataContractJsonSerializer jsonSerializer=new DataContractJsonSerializer(typeof(T));
//将对象的序列化为Json格式的Stream
MemoryStream stream=new MemoryStream();
jsonSerializer.WriteObject(stream,instance);
//读取Stream
stream.Position=0;
StreamReader sr=new StreamReader(stream);
result=sr.ReadToEnd();
return result;
}
///
///将Json字符串转化为对象
///
///
///Json字符串
///
public static T JsonToObject
{
T result;
//创建指定类型的Json序列化器
DataContractJsonSerializer jsonSerializer=new DataContractJsonSerializer(typeof(T));
//将Json字符串放入Stream中
byte[]jsonBytes=new UTF8Encoding().GetBytes(jsonString);