JavaScript DOM的本质及操作方法-javascript dom

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

51CTO推荐阅读：减少浏览器重解析 JavaScript DOM操作优化方案

引言JavaScript

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’节点表示在页面中的元素，所以如果在页面中你有一个段落元素(‘<p>’)，那么你可以通过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.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">    
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">    
   <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>

正如你所见在文档下面有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之类的废话。

<script type="text/javascript" src="my-script.js"></script>

#p#

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 ) {  
     // 我们使用'alert'来通知用户:  
    alert('你可以喝水.');  
} else {  
    alert('对不起，你不能喝水.');  
}

循环

循环在遍历数组中的数据项或对象的所有成员时非常有用，JavaScript中最常用的循环是for和while语句。

var envatoTutSites = ['NETTUTS','PSDTUTS','AUDIOTUTS','AETUTS','VECTORTUTS'];  
// WHILE循环  
var counter = 0;  
var lengthOfArray = envatoTutSites.length;  
while (counter < lengthOfArray) {  
    alert(envatoTutSites[counter]);  
    counter++; // 等同于 counter += 1;  
}  
      
// FOR循环  
// (The i stands for "iterator" - you could name it anything)  
for (var i = 0, length = envatoTutSites.length; i < length; i++) {  
    alert(envatoTutSites[i]);  
}

#p#

访问DOM节点

假设我们有一个包含了一个段落和一个无序列表的基本XHTML文档:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"> 
    <head> 
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
            <title>JavaScript!</title> 
    </head> 
    <body> 
       
        <p id="intro">My first paragraph...</p> 
      
        <ul> 
            <li>List item 1</li> 
            <li>List item 1</li> 
            <li>List item 1</li> 
            <li>List item 1</li> 
            <li>List item 1</li> 
        </ul> 
      
        <script type="text/javascript"> 
        // <![CDATA[  
        
       // ]]> 
        </script> 
      
    </body> 
</html>

在第一个例子中我们将使用’getElementById’这个DOM方法访问我们的段落。

var introParagraph = document.getElementById('intro');  
/ 我们现在访问了一个DOM节点，这个DOM节点代表intro段落。

变量’introParagraph’现在指向DOM节点，我们现在可以在这个节点上做很多事情，我们可以读取它的内容和属性，也可以控制它的任何方面。我们可以删除它、克隆它或将它移到DOM树的其它位置。

我们可以使用JavaScript和DOM接口访问现在文档中的任何东西。所以，我们可能希望用类似的方式访问文档中的那个无序列表，但唯一的问题就在于它并没有ID。你可以给它一个ID属性并使用同样的方法访问它或者使用’getElementsByTagName’方法访问它。

 var allUnorderedLists = document.getElementsByTagName('ul');  
// 'getElementsByTagName' 返回当前存在的节点集合/列表  
// 它除了那一点微小的差别外其实和数组很相似。

getElementsByTagName

getElementsByTagName方法返回当前存在的节点集合/列表，它和数组的相似之处是它也有length属性。需注意的重要一点是这些集合是’即时’的，如果你在DOM中添加了一个新元素那么这个集合将自动自我更新。由于它和数组类似，所以我们可以使用索引来访问其中的每个节点，从0到这个集合的总长度(减1)。

// 访问单个无序列表: [0] index  
var unorderedList = document.getElementsByTagName('ul')[0];  
      
// 将UL中的列表项创建为节点列表:  
var allListItems = unorderedList.getElementsByTagName('li');  
     
// 现在我们可以使用for循环遍历列表项:  
for (var i = 0, length = allListItems.length; i < length; i++) {  
    // 提取其文本节点并alert它的内容:  
    alert( allListItems[i].firstChild.data );  
}

遍历DOM

术语”遍历”就是用来描述访问整个DOM寻找节点的行为。DOM接口为我们提供了大量的节点属性以便我们在文档中的所有节点自由访问。
这些节点属性可以方便我们访问关联的/挨着的节点:

Node.childNodes:你可以使用它访问某个元素的所有直属子元素。它将返回一个类似数组的对象，你可以循环遍历它。数组中的节点可以包含所有不同类型的节点，如文本节点和其它类型的元素节点。

◆Node.firstChild:这个属性等同于访问’childNodes’数组的首项(‘Element.childNodes[0]‘)。它是个捷径。

◆Node.lastChild:这个属性等同于访问’childNodes’数组的末项(‘Element.childNodes[Element.childNodes.length-1]‘)。它也是个捷径。

◆Node.parentNode:这个属性可以让你访问当前节点的父节点，仅会有唯一一个父节点，如果想访问’祖父’级节点，可以使用’Node.parentNode.parentNode’，以此类推。

◆Node.nextSibling:这个属性可以让你访问DOM树同级下的下一个节点。

◆Node.previousSibling:这个属性可以让你访问DOM树同级下的上一个节点。

所以就想你看到的一样，遍历DOM就是如此简单，只要你熟练运用了他的那些节点属性。

列表项只能在他们之间没有空格的情况下检索。因为在文档中你能得到文本节点和元素节点，而’<ul>’和’<li>’之间的空格也会被当做是一个节点(文本节点)。同样，无序列表严格意义上讲并不是段落的下一个兄弟节点，因为在他俩之间有空格，也就是另一个节点。通常在这种情况下，你可以遍历’childNodes’数组并测试它们的’nodeType’,'nodeType’值为1就是元素节点，2为属性，3为文本节点。

这就是JavaScript基本运行方式，你可以使用本地DOM方法和属性漂亮的访问并提取文档中的元素。现在你可以脱离那些繁琐的框架而独立进行基本的DOM操作了。

【编辑推荐】