Javascript编程语言和DOM接口系列教程(1)

　Hello,今天开始彬Go将以系列教程的方式为大家讲解Javascript编程语言和DOM接口，本篇教程为该系列的第一部分。

　　虽然现在一些js框架诸如jQuery、Prototype和MooTools能提高我们的前端开发效率而且很好的解决了浏览器兼容性问题，但我们仍要打好javascript技术基础。Javascript DOM 控制系列教程将告诉你你需要了解的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标准而为众人所知。这便是前端开发领域的一大痛苦之处。

    下载FireBug

    　　如果你使用Firefox浏览器但没有用过FireBug扩展插件，那我强烈推荐你现在就下载安装。它是活的整个文档结构大题图片的非常有用的前端工具。

    网页中的JavaScript

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16     		<!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”)。


    记得用CDATA指定你的脚本。(点击上图查看大图)

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

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

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

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

    JavaScript 要点

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

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

    1
    2
    3
    4     		// 注: 要一直使用 "var" 来声明变量:
    var leftSide = 100;
    var topSide = 50;
    var areaOfRectangle = leftSide * topSide; // = 5000

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

    1
    2
    3
    4
    5     		var firstPart = "Hello";
    var secondPart = "World!";
    var allOfIt = firstPart + " " + secondPart; // Hello World!
    // +号进行字符串连接处理
    // (它还可用于数学上的加法运算)

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

    1
    2
    3
    4
    5
    6
    7     		5 === (3 + 2); // = true
    // 你可以给变量声明布尔值:
    var veryTired = true;
    // 你可以像这样测试:
    if (veryTired) {
        // 你的代码
    }

    上面看到的’===’是比较运算符，我们将在后面讨论。

    函数
    函数是一个专门的对象。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19     		// 使用函数操作创建一个新函数:
    function myFunctionName(arg1, arg2) {
        // 这里是函数的代码
    }
       
    // 如果你省略掉函数名，那么你创建的是"匿名函数":
    function(arg1, arg2) {
        // 这里是函数的代码
    }
           
    // 执行函数仅需对他进行引用并使用圆括号 (附带参数):
    myFunctionName(); // 无参数
    myFunctionName("foo", "bar"); // 带参数
       
    // 你也可以在不声明变量的情况下执行函数
       
    (function(){
        // 这就是所谓的自调用匿名函数
    })();

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11     		// 两种声名数组的不同方式,
       
    // 字面:
    var fruit = ["apple", "lemon", "banana"];
       
    // 使用数组构造器:
    var fruit = new Array("apple", "lemon", "banana");
       
    fruit[0]; // 访问数组中的第一个数据项 (apple)
    fruit[1]; // 访问数组中的第二个数据项  (lemon)
    fruit[2]; // 访问数组中的第三个数据项  (banana)

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14     		// 两种声明对象的不同方式,
       
    // 字面(大括号):
    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中最常见的结构，它看上去就像下面这样:

    1
    2
    3
    4
    5
    6
    7
    8
    9     		var legalDrinkingAge = 21;
    var yourAge = 23;
       
    if ( yourAge >= legalDrinkingAge ) {
         // 我们使用"alert"来通知用户:
        alert("你可以喝水.");
    } else {
        alert("对不起，你不能喝水.");
    }

    JavaScript运算符
    相比把运算符一一列举给你我建议你看看MDC关于运算符的文档。它会为你讲解很多关于运算符的细节。我在下面的几个例子中也为你讲解了一些运算符的使用方法:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18     		// 加/减/乘/除
    var someMaths = 2 + 3 + 4 - 10 * 100 / 2;
       
    // 等于
    if ( 2 == (5 - 3 ) { /* Do stuff */ } // == checks for eqaulity
       
    // 不等于
    if ( 2 != (5 - 3 ) { /* Do stuff */ }
       
    // 全等运算符:
    // (我建议这样使用)
    2 === 2 // Instead of 2 == 2
    2 !== 3 // Instead of 2 != 3
       
    // 赋值:
    var numberOfFruit = 9;
    numberOfFruit -= 2; // 等同于 "numberOfFruit = numberOfFruit - 2"
    numberOfFruit += 2; // 等同于 "numberOfFruit = numberOfFruit + 2"

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15     		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]);
    }


    for循环在用于遍历数组的时候相当受欢迎，点击上图查看清晰大图

    回到DOM

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26     		<!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方法访问我们的段落。
    (以下代码应在script元素中)

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

    　　变量’introParagraph’现在指向DOM节点，我们现在可以在这个节点上做很多事情，我们可以读取它的内容和属性，也可以控制它的任何方面。我们可以删除它、克隆它或将它移到DOM树的其它位置。
    　　我们可以使用JavaScript和DOM接口访问现在文档中的任何东西。所以，我们可能希望用类似的方式访问文档中的那个无序列表，但唯一的问题就在于它并没有ID。你可以给它一个ID属性并使用同样的方法访问它或者使用’getElementsByTagName’方法访问它。

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

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11     		// 访问单个无序列表: [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寻找节点的行为。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操作了。

    敬请期待下节课

    　　好了，今天的课程先讲到这里。希望大家能在这篇’杂乱的’文章中学到些什么。下一部分我们将专注于实例的练习，我们还可能会涉及到浏览器事件模型。
    　　感谢你的耐心阅读。

时间： 2024-10-05 22:34:43

Javascript编程语言和DOM接口系列教程(1)的相关文章

12种实现301网页重定向方法的代码实例（含Web编程语言和Web服务器）_相关技巧

为什么需要使用301重定向: 1. 保留搜索引擎的排名: 301 重定向是最有效的方法,不会影响到搜索引擎对页面的排名. 2. 保留访客和流量: 如果你将页面链接到大量方法可以访问过的地址,如果不是用重定向的话你就会失去这些用户(不解)原文:If you move your popular page to which a lot of visitors have already linked, you may lose them if you don't used redirect method

比较不错的函数式JavaScript编程指南教程_javascript技巧

你是否知道JavaScript其实也是一个函数式编程语言呢?本指南将教你如何利用JavaScript的函数式特性. 要求:你应当已经对JavaScript和DOM有了一个基本的了解. 写这篇指南的目的是因为关于JavaScript编程的资料太多了但是极少的资料提到了JavaScript的函数式特性.在本指南中,我只会讲解这些基本知识而不会深入其它的函数式语言或这是Lambda算子. 你可以点击所有的例子然后你所看到的代码就会被执行,这样就可以令指南变得具有交互性.你也可以使用这个沙箱来尝试. 第

Embedthis Ejscript 1.1.3发布 JavaScript语言和Web框架

Ejscript 是一款服务器端的紧凑.快速和强大的http://www.aliyun.com/zixun/aggregation/33906.html">JavaScript语言和Web框架.它基于JavaScript标准化版本,作为ECMAScript Edition 3.X与服务器端的Web和嵌入式应用的扩展. Embedthis Ejscript 1.1.3该版本是一个轻微的释放,可靠性和安全性具有重要的修复,包括对VxWorks的建设,线程池枯竭修复和使用的HTTP跟踪方法. 软

Backbone.js系列教程二：Backbone.js深入解析之基础要求

在网上关于Backbone的描述很少,现有的关于Backbone的内容五花八门,基本上都不同程度的提到了如何运用Backbone来实现应用程序的创建,当然也有很多的是讨论它是否匹配Model/View/Whatever.有挺多华而不实的视频教程是讲程序设计的,但其实没有什么太大的价值.我认为关键是缺少了关于Backbone本身的详细介绍,以及对于每行代码的真正用意的细节描述.有篇文档专门讲述Backbone各部分的功能,在一定程度上解答了上述问题,并且提供带有注释的源代码,还有更多相关Backb

Java NIO 系列教程

Java NIO(New IO)是从Java 1.4版本开始引入的一个新的IO API,可以替代标准的Java IO API.本系列教程将有助于你学习和理解Java NIO.感谢并发编程网的翻译和投递.  (关注ITeye官微,随时随地查看最新开发资讯.技术文章.)  [本文转载于 Java NIO 系列教程] Java NIO提供了与标准IO不同的IO工作方式:  Channels and Buffers(通道和缓冲区):标准的IO基于字节流和字符流进行操作的,而NIO是基于通道(Channe

Java NIO 系列教程（转）

原文中说了最重要的3个概念,Channel 通道Buffer 缓冲区Selector 选择器其中Channel对应以前的流,Buffer不是什么新东西,Selector是因为nio可以使用异步的非堵塞模式才加入的东西.以前的流总是堵塞的,一个线程只要对它进行操作,其它操作就会被堵塞,也就相当于水管没有阀门,你伸手接水的时候,不管水到了没有,你就都只能耗在接水(流)上.nio的Channel的加入,相当于增加了水龙头(有阀门),虽然一个时刻也只能接一个水管的水,但依赖轮换策略,在水量不大的时候,各

C语言和Fortran语言的差异

本文详细介绍C语言和Fortran语言的差异 1. C++语言和Fortran语言的发展背景 在程序设计语言的发展过程中,FORTRAN 语言被认为是科学计算的专用语言.后来推出的FORTRAN90 和FORTRAN 95 版本也不例外,它们虽然可以完全实现C++语言同样的功能,然而其软件开发环境和软件的集成性等方面都远不如C++ 语言.近年来,随着计算机软硬件技术的发展,数据结构.数据库管理技术.可视化与计算机图形学.用户接口系统集成以及人工智能等领域的成果被逐渐应用到结构分析软件中,结构分析

Linux Shell脚本系列教程（五）：数学运算

  这篇文章主要介绍了Linux Shell脚本系列教程(五):数学运算,本文讲解了使用let.(())和[]进行算术运算.使用expr进行算术运算.使用bc进行算术运算三种方法,需要的朋友可以参考下 在任何一种编程语言中,算术运算都是必不可少的,shell也不例外. 一. 使用let.(())和[]进行算术运算 可以使用普通变量赋值方法定义数值,这是,它会被保存为字符串.我们可以通过使用let.(()).[]等操作符,使得这些变量进行算术运算.例如: 代码如下: #!/bin/bash no1

Web Services 系列教程

原文链接,译文链接,译者:朱张锁,校对:郭蕾 Web service是一种可以跨网络访问的服务,例如通过全球互联网访问.通常,这些Web服务及其客户端通过HTTP等网络协议进行通信. 这篇教程谈到的Web Service主要是从一个比较宏观的角度来看,涉及到服务重用.服务组合.企业服务总线等问题. 它并不包括SOAP,WSDL,REST等具体的细节,这些将在后面的文章中提到. 请随时与我联络 如果您对我的观点有异议,或有意见,问题等,请随时给我发电子邮件. 我的电子邮件在这里. 目录 下面是关于