JavaScript DOM的本质及操作方法-tutorial js-php.cn

虽然现在一些JavaScript框架，诸如jQuery、Prototype和MooTools能提高我们的前端开发效率，而且很好的解决了浏览器兼容性问题，但我们仍要打好javascript技术基础。文章将介绍JavaScript和文档对象模型(DOM)的本质。

JavsScript是可以在各种不同环境下使用的动态的、松散类型(loosely typed)、基于原型的编程语言。除了作为流行的Web客户端程序语言，它还可以使用于IDE插件、PDF文件或给予其它平台甚至更为抽象的概念。

JavaScript 是由来自Netscape得Brendan Eich创造的基于ECMAScript标准（ECMA-262）的语言。他最初被命名为LiveScript，但后来被改为JavaScript，这也是很多人会把它跟java混淆的原因之一。以下是它的一些特性的详细说明：

◆动态程序语言在运行时执行；他们并没有编译。正因为此，有时JavaScript被认为是一种脚本语言，而不是一个真正的编程语言（显然是一种误解）。

◆松散类型语言不要求强类型系统，如果你使用C或Java编程(与JavaScript不同)声明变量时你就明白必须声明类似’int’(整型)。JavaScript的不同之处在于你用不着指定它的类型。

◆在JavaScript中我们使用原型来实现类似继承的效果，JavaScript不支持类。

◆JavaScript也是函数式语言，它处理函数为优先对象。它是基于lambda下的理念。

理解以上概念对于学习JavaScript这门技术关系并不是很大。只是让大家对JavaScript有个初步正确的的认识，并了解JavaScript与其它编程语言的本质区别。

文档对象模型

文档对象模型(Document Object Model)，通常简称为DOM，是网站内容与JavaScript互通的接口。自JavaScript成为最常用的语言时JavaScript和DOM通常被视为独立的实体。DOM接口用于存取、遍历和控制HTML和XML文档。

下面是关于DOM的一些重要的知识:

◆Window对象作为全局对象，你仅需尝试使用”window”来访问它。Window对象下包含了你的所有要执行的JavaScript代码。就像所有对象都包含属性和方法。

◆属性是存储于对象下的变量。所有在网页中创建的变量都会成为window对象的属性。

◆方法是存储在对象下的函数。在所有函数存储在window对象下时，你可以使用’methods’引用它们。

◆DOM相对于Web文档结构创建层次结构，层次有节点组成。DOM节点有很多不同的类型，其中最重要的要数’Element’、’Text’和’Document’了。

◆‘Element’节点表示在页面中的元素，所以如果在页面中你有一个段落元素(‘

’)，那么你可以通过DOM的节点来访问它。

◆‘Text’节点表示在页面中的所有文本(在元素中)，所以如果在页面的段落中有一些文本内容，那么你可以通过DOM的节点来访问它。

◆‘Document’节点表示整个文档。(它是DOM树的根节点)

◆另请注意，元素属性是DOM节点本身。

◆不同的布局引擎对于DOM标准的执行是有一定的差别的。例如，使用Gecko布局引擎的FireFox浏览器可以很好的执行(但也并不是完完全全按照W3C规范那样)，但使用Trident引擎的IE因它的很多Bug和不完全执行DOM标准而为众人所知。这便是前端开发领域的一大痛苦之处。

网页中的JavaScriptScript元素

当你想在网站上使用JavaScript的时候，需要让它们包含在script元素中:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.php.cn">  
   <html xmlns="http://www.php.cn">   
   <head>   
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
      <title>JavaScript!</title>   
  </head>   
  <body>   
    
    <script type="text/javascript">   
    // <![CDATA[ 
          
    // ]]>   
    </script>   
          
  </body>   
</html>

Salin selepas log masuk

正如你所见在文档下面有script元素。其实type属性严格来讲应设置为”application/javascript”,但它不出所料的在IE浏览器下无法正常工作，所以我们使用”text/javascript”或不用type属性，如果你在意代码W3C规范验证的话建议你使用前者(“text/javascript”)。

你还会注意到在script元素中我们还有一对被注释掉的代码行，它们告诉支持XHTML的浏览器script元素中的内容是字符数据而不应被解释为XHTML标记。如果你计划在JavaScript代码中使用’<’或’>’字符的话那它就是相当必要的。当然，如果你是用普通HTML代码的话，那你完全可以无视它。

defer属性

我们script元素中的JavaScript代码会在页面读过程中执行，唯一的例外就是当script元素有defer属性的时候。默认情况下，当浏览器遇到script元素时，它会停下来并运行代码，然后再继续进行文档解析。defer属性告诉浏览器代码包含非变更文档代码而且可以稍后执行。它的唯一问题就是只在IE下可用，所以我们还是要尽量不要使用它了，了解就行。

链接外部脚本

如果你想连接一个外部脚本文件，那么你只需为你的script元素添加一个有文件地址的src属性。把脚本文件独立分离出来进行调用的确相对于内联脚本来说是个好办法，它意味着浏览器可以缓存该文件，而且你都不用担心那些CDATA之类的废话。

JavaScript要点

在我们继续讲DOM之前有必要学习一下JavaScript基础要点，如果有些东西你理解起来有些困难，别担心，你早晚会搞定它的。在JavaScript种不同类型的值，它们是数值、字符串、布尔值、对象、Undefined 和 Null。单行注释使用两个斜杠(//)，这行内的所有内容都将被作为注释内容理解。多行注释使用’/*’ 和 ‘*/’完成注释段落。

数值

在JavaScript中所有数值都被描绘成浮点值，当定义数值变量时记得不要用引号。

// 注: 要一直使用 'var' 来声明变量: var leftSide = 100;
var topSide = 50;
var areaOfRectangle = leftSide * topSide; // = 5000
字符串

你定义的字符串都是有字面上来看，JavaScript不会对它进行处理。一个字符串可由一连串的Unicode字符组成，并由一对双引号或单引号包围。

var firstPart = 'Hello'; var secondPart = 'World!';
var allOfIt = firstPart + ' ' + secondPart; // Hello World!
// +号进行字符串连接处理
// (它还可用于数学上的加法运算)
布尔值

布尔类型在你进行条件判断的时候很有用，以了解是否符合指定的标准。布尔有两个可能的值:true和false。任何使用逻辑算法的比较结果都将是布尔值。

5 === (3 + 2); // = true // 你可以给变量声明布尔值:
var veryTired = true;
// 你可以像这样测试:
if (veryTired) {
// 你的代码
}
上面看到的’===’是比较运算符，我们将在后面讨论。

函数

函数是一个专门的对象。

   // 使用函数操作创建一个新函数: function myFunctionName(arg1, arg2) {
    // 这里是函数的代码
}

// 如果你省略掉函数名，那么你创建的是"匿名函数":
function(arg1, arg2) {
    // 这里是函数的代码
}

// 执行函数仅需对他进行引用并使用圆括号 (附带参数):
myFunctionName(); // 无参数
myFunctionName('foo', 'bar'); // 带参数

// 你也可以在不声明变量的情况下执行函数

(function(){
    // 这就是所谓的自调用匿名函数
})();
数组

数组也是一个专门的对象，它可以包含任意数量的数据。要访问数组中的数据你就必须使用数字，用以引用其在数组中的”索引”。

  // 两种声名数组的不同方式, // 字面:
var fruit = ['apple', 'lemon', 'banana'];

// 使用数组构造器:
var fruit = new Array('apple', 'lemon', 'banana');

fruit[0]; // 访问数组中的第一个数据项 (apple)
fruit[1]; // 访问数组中的第二个数据项 (lemon)
fruit[2]; // 访问数组中的第三个数据项 (banana)
对象

对象是命名的的值的集合(键-值对)，它和数组很相似，唯一的不同之处在于你可以为每个数据值指定名字。

  // 两种声明对象的不同方式,
// 字面(大括号):
var profile = {
    name: 'Li',
    age: 23,
    job: 'Web Developer'
};

// 适用对象构造器:
var profile = new Object();
profile.name = 'Li';
profile.age = 23;
profile.job = 'Web Developer';
if/else语句

if/else语句是JavaScript中最常见的结构，它看上去就像下面这样:

var legalDrinkingAge = 21; var yourAge = 23;

if ( yourAge >= legalDrinkingAge )