javascript中DOM本质及操作

转：时间:2010-09-12 09:35 来源:PHP100中文网 作者:PHP100er

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元素中:

 
 
      
      
         
      
   
         
            
        
        
       
    <script type="text/javascript">      
    //              
    // ]]>      
    </script>      
             
        
   

正如你所见在文档下面有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>