Java Web程序开发与分析课件：JavaScript编程_第1页
Java Web程序开发与分析课件：JavaScript编程_第2页
Java Web程序开发与分析课件：JavaScript编程_第3页
Java Web程序开发与分析课件：JavaScript编程_第4页
Java Web程序开发与分析课件：JavaScript编程_第5页
已阅读5页，还剩123页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1Web程序设计

JavaScript编程2课程内容概述基本语句与数据类型函数面向对象编程文档对象模型DOM31、概述

Web系统属于B/S体系结构，包括：浏览器客户端和服务器端。浏览器服务器客户端代码服务器端代码41、概述

对于客户端编程，需要实现一定的用户与浏览器的动态交互功能。对于一个Web系统而言，表示层也称为前端。（1）前端技术纯粹的HTML页面作为Web用户界面，相比于直接和操作系统打交道的GUI界面，不仅页面的显示单一，功能也是非常弱的。为了增强界面的显示效果，使用层叠样式表（CSS）分离HTML元素和页面的表现形式，可以精确设计网页的视觉效果与风格。为了方便用户对页面元素的操纵，增强交互功能，可以使用客户端脚本编程语言，如：JavaScript脚本。目前，前端所涵盖的技术在不断发展更新，如：HTML5、CSS3、Ajax等。1、概述（2）JavaScript与浏览器

JavaScript是目前最通用的浏览器脚本语言，可以嵌入到HTML代码中，其解释器内置于几乎所有的主流浏览器中。

通过JavaScript脚本语言可以动态创建和修改HTML文档，增强用户和浏览器的交互能力。

1、概述在1995年互联网兴起时，JavaScript据说是仅花费10天就开发出来的一门语言，诸多设计漏洞被人诟病。2005年，随着Google地图大量使用基于JavaScript的Ajax技术，不仅标志web2.0时代的到来，也将提供浏览器与用户交互功能的JavaScript推上新的高度。

JavaScript简介在1994年，网景公司（现在的Mozilla基金会）开发出了第一个浏览器NetscapeNavigator。为了能在Web客户端对用户提交的数据做一些简单的处理，网景公司的BrendanEich设计了网页脚本语言，最初命名为LiveScript。

1995年首次在NetscapeNavigator2.0中引入，作为Navigator浏览器内置的脚本语言。JavaScript简介

网景公司希望借助Java语言的影响力，遂与Sun公司建立了市场合作关系，该脚本语言被重新命名为JavaScript。在1996年，Microsoft和Netscape同意为Java脚本语言指定统一的规范，该规范由欧洲计算机厂商联合会（ECMA）制定和管理，浏览器内置脚本语言的国际标准称为ECMAScript。JavaScript简介JavaScript简介

2001年，DouglasCrockford提出了JSON格式，它是一种轻量级的，用于在服务器和客户端之间交换数据的格式。它以JavaScript来编码并格式化数据，可直接被JavaScript操作。

2009年，Node.js平台诞生，服务端JavaScript语言编程应用开始受到关注。

JavaScript与JavaJavaScript和Java是两种不同的编程语言，二者之间并没有太多内在的关联。

JavaScript从Java语言中借鉴了一些语法，但从语言特性方面，二者的差别仍然是巨大的，主要包括：12

（1）动态类型语言

JavaScript是一种动态类型语言，在声明变量时，不需要声明变量的类型，解释器会在运行时自动判定，而且同一个变量可以赋给它不同类型的变量值，这是Java这种静态类型语言不可以做到的。因此，相比而言JavaScript更具灵活性。JavaScript与Java13

（2）一等函数（first-classfunction）

JavaScript具有一等函数（first-classfunction）特性。“一等函数”指的是，其函数也是一种数据类型，和数值、字符串等变量类型一样。可以将函数赋值给变量，作为参数传递，或者作为另一个函数的返回值，而不仅仅是操作变量的方式。JavaScript与Java14

（3）面向对象特性

JavaScript有面向对象的特性，但不是完全的面向对象编程语言，它的对象继承机制不是同Java或C++语言使用类作为模板，而是采用了一种“原型链”的机制实现的。JavaScript与Java15JavaScript与Java在诞生之初，JavaScript语言的设计并不完善，但这没有影响到该语言的流行，由于JavaScript解释器直接内嵌在浏览器中的，这使得在非常短的时间里，JavaScript几乎完全取代了JavaApplet。目前，它已成为设计Web系统客户端的主流编程语言。16JavaScript与Java因为不同浏览器对JavaScript标准实现有一定的差异，导致不同浏览器之间的JavaScript代码不兼容。这是目前使用JavaScript语言过程中需要注意的问题。2、基本语句与数据类型

JavaScript代码为客户端浏览器脚本代码，JavaScript的使用可以采用以下两种方式：（1）直接加入方式：采用<script></script>标签，将JavaScript代码直接加到HTML页面中。

2、基本语句与数据类型<html><head><title>Test</title></head><body>

<imgsrc=images/pic34.jpgalign=rightwidth=200height=150>

<scriptlanguage="javascript"><!--document.write("这是JavaScript脚本!");--></script></body></html>（2）引用方式如果已经存在一个JavaScript源文件（.js为扩展名），则可以采用引用的方式，其引用格式如下：<scriptsrc=“文件地址”type=“text/javascript”></script>2、基本语句与数据类型202、基本语句与数据类型<html><head><title>换行与段落</title></head><body><imgsrc=images/pic34.jpgalign=rightwidth=200height=150>

<scriptsrc="script.js"type="text/javascript"></script></body></html>JavaScript语言中的运算符主要有以下几类：基本运算符运算符描述.[]()数据存储、函数调用newdeletetypeof+-!一元运算*/%乘、除、取模+-加/连接、减>=<=><不等式运算===!====!=等式运算&&||逻辑与、逻辑或、非?:条件运算

typeof

typeof的优先级是最高的，因此typeof对一个变量进行运算时不需要括号，而判断一个表达式的结果类型需要用括号，如下所示：基本运算符typeofa===typeofbtypeof(a+b)算术运算符：+，-，*，/，++，%

其中，除法（/）运算符两边操作数均为整数，则结果为整数(舍去小数部分）；求余运算（%）返回第一个操作数除以第二个操作数后的余数，且运算结果的符号与被除数相同，操作数可以为浮点数。基本运算符关系运算符：<,>,<=,>=,!=

为二元运算符，用来比较两个操作数，由两个操作数和关系运算符构成一个关系表达式，其操作结果为true或false。基本运算符逻辑运算符：||，&&，!

逻辑运算符比关系运算符的优先级低。大多数情况逻辑运算符仍然是对布尔值进行运算，但它不仅仅能对布尔值做运算，也可以返回的也不是布尔值，例如：

基本运算符varb;b=""||"default";//=>"default"字符串运算符：+

字符串连接操作符(+)用于把一个字符串连接在另一个字符串的后面，也能将一个数字与一个字符串连接。

基本运算符

"Peanutbutter"+"andjelly"运算符和操作数的组合称为表达式，通常包括：算术表达式、赋值表达式、布尔表达式、字符串表达式、函数表达式等。表达式表达式//直接量表达式3.1416“string”//变量X//算术表达式1+1//赋值表达式x=3.1416//条件选择表达式x>=0?1:-1

//函数调用表达式add(1,1)//属性访问表达式array[i]//匿名函数表达式function(x){console.log(x);}表达式变量、参数和标记等的名字称为标识符，它需要遵循有一定规则，如：第一个字符不能是数字，可以是字母。JavaScript的标识符是大小写敏感的，大写的标识符和小写的是不同的。标识符标识符类别关键字与保留字关键字default,debugger,instanceof,null,this,typeof,var,void,with保留字class,const,enum,export,extends,import,super保留字（严格模式）Implements,let,private,public,yield,interface,package,protected,static全局对象argument,Infinity,NaN,undefined,JSON变量与数据类型JavaScript是一种动态类型语言，因此该语言的变量可以存储不同类型的数据。JavaScript中的变量没有确定的类型，为弱变量类型。varname=“wangxiao”变量与数据类型JavaScript中的数据类型有五类：数值（number），字符串（string），对象，array（数组）,布尔值（boolean），null和undefined。对象可以细分为对象（object），数组（array）和函数（function）。(1)undefined,null

基本类型中undefined和null表示值不存在,这两个类型区别不是太大。undefined表示基本类型的值不存在，null表示对象不存在，其区别如下：变量与数据类型Number(null);//=>0Number(undefined);//=>NaN变量与数据类型(2)数值

在JavaScript中所有数字都是以64位浮点数（即double类型）存储的，没有整型和浮点型之分，即数值类型。其中，全局函数parseInt()和parseFloat()可以将变量转化为整数和浮点数。parseInt("&110");//=>NaNparseFloat("3.14*");//=>3.1436变量与数据类型(3)字符串

在JavaScript中，不区分字符串和单个字符，一个字符也是字符串。以下均为合法的字符串："astringindoublequotes"'astringinsinglequotes'"astringin'twokindsof'quotes"'anotherstringin"twokindsof"quotes'"astring\"needescapecharaters\""'anotherstring\'needescapecharaters\'too'"apathetic\brokenstring""astringwaiting"+'forbeingcatenated'37变量与数据类型(3)字符串

JavaScript的字符串性质和Java的String对象有诸多相似：每个字符都占两个Byte，也有许多相同的属性和方法，如：

varstr="Thequickbrownfoxjumpsoverthelazydog."str.length//=>44str.charAt(0);//=>"T"str.substring(12,15);//=>"own"str.indexOf("jump")//=>2038变量与数据类型(4)布尔值

布尔值表示真假，只有true和false两个值，经常应用于条件语句和循环语句中。

在JavaScript中所有的数据类型都可以被转化为布尔值，除了以下五种表达式转换为false，所有的值都被转化为真值true，包括：

39变量与数据类型0（含正负）

NaN空字符串

Undefinednull

if("0"){ console.log('"0"!=false');}//=>"0"!=falseif(0==false&&!NaN){ console.log('0=>falseandNaN=>false');};//=>0=>falseandNaN=>false40类型转换在JavaScript语言中，求布尔值的表达式中会对数据做转换，字符串的连接，以及非数值数据的数值计算都会导致数据转换，这些转换在运算时自动产生，称自动数据类型转换。 41通过主动调用函数可以进行强制类型转换，如：使用Number()构造函数将表达式转化为数值，用String()转化为字符串和用Boolean()转化为布尔值。但JavaScript作为弱类型语言，类型转换没有强制的必要。类型转换42对象类型若转化为字符串，则函数对象转化为函数代码，数组对象先将各元素转化为字符串形式，最后以逗号连接。除了基本数据类型和函数，其他类型均为object，这使得对对象的判别很笼统。为了判断特定的对象，可以使用instanceof运算符来详细区分。类型转换433、函数在JavaScript中，函数是一种对象类型，它是一段以function关键字声明的代码块，这个语句段可以被当作一个整体来引用和执行。函数可以赋值给变量，作为参数传递，以及作为返回值。443、函数一个函数在声明时，其格式如下：

functionfname(arg…){}

函数在声明后，函数名可作为函数表达式。没有函数名的函数即是匿名函数，一个匿名的函数也是一个函数表达式。如下例所示：453、函数functionfoo(){ }varf=function(){}foo();f();(function(){})();463、函数（1）函数中的参数函数参数以参数表的形式给出，形式参数作为局部变量仅在函数作用域存在。在调用函数时，传递参数时，相比与参数表给定的参数，实参中多余的参数将被忽略；如若缺少，缺少的参数部分其参数值是undefined类型；473、函数varfab=functionf(x){ if(typeofx!=="number"||typeofx==="string"&&Number(x)) thrownewError("argumenttypeexception"); if(x<1) return1; else returnx*f(x-1);};fab(4);//=>24f(4);//=>24483、函数（2）函数中的this在调用函数的时候，函数将被隐含地传入另一个被称为上下文(context)的对象，关键字this即表示上下文，this是内置的。varo={ initial:0, increment:1, add:function(){ if(this.result==undefined) this.result=this.initial; else this.result=this.result+this.increment; }};o.add();o.result;//=>0o.add();o.result;//=>1函数定义在对象内，即是对象的属性：若函数定义在全局范围或者函数被嵌套在另一个函数内，则它被调用时，该函数内的this指向的是全局顶层对象，在浏览器中即是window对象。(functionglobal_this(){console.log(this);})();//=>window{top:Window,window:Window,location:Location,external:Object若希望将一个函数和this绑定，可以使用Function对象中的apply()或call()方法。通过apply()方法，可以使一个对象调用某个函数（该函数不作为对象的方法）。该函数为：

funciton.apply(thisArg,argArray)

varx={a:1,b:2};vary={

a:"A", b:"B", c:"C", fx:function(){ this.c=this.a+this.b; }}y.fx.apply(x);x//=>Object{a:1,b:2,c:3}

533、函数（3）函数表达式与声明语句函数表达式可以是一个函数名，也可以是在赋值号右侧的匿名函数，它们可以作为一个值。函数声明语句是一个语句，但是使用圆括号运算符将函数声明包含在内，函数声明会转化成表达式。functionf(){ returnconsole.log("IIEF");}();//=>SyntaxError:Unexpectedtoken)(functionf(){ returnconsole.log("blockscope");})();//=>blockscope//=>undefinedfunction(){ returnconsole.log("IIEF");}();//=>SyntaxError:Unexpectedtoken((function(){ returnconsole.log("blockscope");})();//=>blockscope//=>undefined一个函数声明的作用域是全局的，圆括号可以将包含在其中的声明与外界作用域隔离开，模拟一个块作用域。这种函数调用机制叫做立即执行函数表达式IIFE（ImmediatelyInvokedFunctionExpression）。3、函数563、函数（4）函数式编程JavaScript的函数是“一等函数”，它可以赋值、被传递和返回。其中，闭包是这种函数式编程的重要概念。

57函数式编程-闭包讨论一个问题：在一个函数（对象）中定义另一个函数（对象），这时内部函数是可以共享外部函数的变量的。如果外部函数对象因为没有被变量指向而被回收，那么当内部函数对象仍然存在的时候，外部函数对象中的变量数据会消失吗？58函数式编程-闭包functionfoo(n){ returnfunction(i){ returnn+=i; }}varc=foo(5);//这时n==5c(3);//=>8这时:i==3n==5+3c(1);//=>9这时:i==1n==8+159这种将函数局部变量保存在函数作用域内的特性，被称为闭包(closure)。在编程语言中的闭包概念和数学中的闭包概念并不相同，后者指的是对某一个集合封闭的运算，而在编程语言的闭包指的是作用域包含在另一个函数中的函数。函数式编程-闭包60下面的例子希望一个数组能存储3个函数，调用每个函数时都能取得0-2，这不同的三个数值。函数式编程-闭包varresult=[];for(vari=0;i<3;i++){ result.push(function(){returni;});}result[1]();//=>361函数式编程-闭包varresult=[];for(vari=0;i<3;i++){ result[i]=(function(i){ returnfunction(){ returni; } })(i); }result[1]();采用闭包方式：62闭包中变量的作用域是内部的，不会成为一个全局的变量，编程中为了避免创建全局对象，应尽量使用闭包。闭包机制可以用来实现一个对象的数据模块，通过一个函数对象的内部作用域封装数据，类似于成员被封装在一个类中。函数式编程-闭包634、面向对象编程JavaScript语言中可以声明和定义对象，通过基于对象的程序设计，用更抽象、模块化和可重复使用的方式进行程序设计。JavaScript的面向对象机制和C++或Java语言不同，最直观的区别是，JavaScript对象的实现不需要类作为模板。644、面向对象编程一组包含数据的属性和对属性中包含数据操作的方法，称为对象。通过自定义“对象类”声明对象，这体现了JavaScript语言的面向对象特性。654、面向对象编程（1）使用函数自定义对象

JavaScript中通过构造函数定义一个对象，而构造函数首先是一个函数，和普通函数一样使用function关键字声明。为了区别，通常约定将构造函数的首字母大写。构造函数在内部使用this关键字指向将被创建的对象。664、面向对象编程functionWarrior(name,race){ =name; this.race=race;}varw=newWarrior('Po','Panda');w//=>Warrior{name:"Po",race:"Panda"}

自定义对象：Warrior674、面向对象编程

在构造函数中有一个隐含的属性prototype，称为原型。原型指向一个对象，通过这个原型对象，JavaScript中的对象可以实现继承。问题：JavaScript中的对象是否可以实现继承？684、面向对象编程varbase={ b:"base"};functionDerived(){ this.d="derived"}Dtotype=base;varo=newDerived();o.b//=>"base"694、面向对象编程原型对象的改变会影响到继承对象。另一方面，若继承对象进行了修改，原型对象并不会变化。base.new_b="newbase";o.new_d="newderived";o.new_b//=>"newbase"base.new_d//=>undefined704、面向对象编程（2）对象实例对象可以通过取值运算符‘.’和‘[]’取得属性值。通过点‘.’取值，后面接的必须是合法的标识符，且不能加引号，更不能是变量或者表达式。若对象内没有该属性则返回undefined。714、面向对象编程因为对象的属性可能也是一个对象，仅当使用’.’运算符时，才可以链式调用对象的属性。通过方括号’[]’取属性值，可以是变量和表达式，它们会被转换为字符串形式。通过in运算符可以判断一个属性是否在对象中。724、面向对象编程//=>"Po"warrior['master']//=>undefined'master'inwarrior//=>falsevaro={o1:{a2:"inner"}};o.o1.a2//=>"inner“o["o1"].a2//=>"inner"//以下两种调用是不可行的o[o1].a2o[o1.a2]//=>ReferenceError:o1isnotdefined734、面向对象编程JavaScript的对象也可以动态修改，直接对一个不在对象中的属性赋值，将会导致该属性被添加到对象中。warrior.master="Shifu";'master'inwarrior//=>truedelete‘name'inwarrior//=>false744、面向对象编程（3）原型链机制从编程语言原型机制的角度看，可将JavaScript对象分为三种：用户构建的对象（包括字面量对象，即JSON数据格式声明的对象；new运算符生成的对象）构造函数对象原型对象：为被继承的对象对于一个对象，有：一个对象的constructor属性指向它的构造函数；__proto__属性指向原型对象，注意，__proto__是一个非标准的属性，不一定所有浏览器支持；4、面向对象编程4、面向对象编程functionFoo(){}varo=newFoo();o.__proto__.constructor===o.constructor//=>true4、面向对象编程

Foo构造函数与各对象关系图JavaScript中所有通过字面量直接定义的对象其构造函数是Object，即下面声明是等价的。4、面向对象编程varobj1={};varobj2=newObject();804、面向对象编程（4）内置对象在JavaScript语言中提供了一些内置对象类，用户可以直接使用这些类生成内置对象，比较常用有以下几个：

日期对象：Date

数组对象：Array（一维、二维）

字符串对象：String

数学对象：Math

数值对象：Number815、文档对象模型DOM

文档对象模型（DOM，DocumentObjectModel），用来描述Web文档的一组标准化对象集，包含用于处理当前文档中各个方面的对象，如：可以读取页面表单中的值、当前页面的标题等。825、文档对象模型DOM

DOM标准是由万维网联盟（W3C）定义：第一个DOM规范DOM1是于1998年10月发布的，它主要面对XHTML和XML文档模型。DOM2是于2000年11月发布，它制定了样式表对象模型，提供了完整的事件模型。DOM3于2004年发布，添加了XML内容模型的处理、文档验证等方面的内容。835、文档对象模型DOM文档对象模型DOM（DocumentObjectModel）独立于平台和语言。DOM不是JavaScript语言的一部分，而是内置在浏览器中的一个应用程序接口（API）。DOM接口可以访问和处理这些结构化文档，如：动态访问和修改文档的内容、结构并将结果呈现给页面。应用特点：841、DOM模型结构DOM模型对象结构采用类似树型结构，以表示整个Web文档的内容和组件，如下图所示：851、DOM模型结构（1）window对象

window对象是最顶层的对象，它表示一个浏览器窗口。对于用户而言，可以打开多个浏览器窗口，而每一个浏览器窗口都对应一个window对象。861、DOM模型结构（2）document对象

document对象代表一个Web文档或一个页面，它是window对象的子对象。在应用程序中可以写为：window.document，代表当前窗口的当前文档。在document对象中也包含一些文档对象的集合，如：forms指向文档中的所有表单元素，links指向所有超链接，images指向所有图片元素。1、DOM模型结构如：一个页面可能包含多个链接，可以用links数组来表示，如：link1=links[0].href，document.links.length表示页面中链接的数量。881、DOM模型结构（3）history对象

history对象是window对象的子对象，用于存储当前地址之前和之后访问过的页面的地址信息。（4）location对象该对象是window对象的子对象，用于存储当前页面的URL地址信息，包括的属性主要有：891、DOM模型结构href：URL地址信息；

protocol：网址的协议部分；

hostname：网址的主机名；

port：网址的端口号；

pathname：网址中的文件名；901、DOM模型结构（5）navigator对象

navigator对象对应于整个浏览器，包含了浏览器的部分参数。如：userAgent指出的是浏览器的型号和版本号；cookieEnabled指出浏览器是否允许启用cookies；language参数返回浏览器所处的操作系统语言。911、DOM模型结构（6）screen对象对象screen对应显示设备，其中包含两个属性height和width，分别表示显示设备的像素值。由DOM对象的组织结构可知，document对象代表一个Web页面，那么它是如何表示页面中的组成元素，下面以HTML页面为例。<html><head><title>WebPage</title></head><body><h1>Asimpledocument</h1><ahref=’#’>Helloworld!</a></body></html>DOM树：942、window对象window的方法是全局方法，如何使用window对象控制窗口和框架是DOM模型中的主要内容之一，window对象有以下的主要属性：

(1)window.closed

表示窗口是否已被关闭，该属性适应于多个窗口的情况；

(2)window.defaultstatus,window.status

状态栏的默认消息和状态栏临时显示的消息；952、window对象(3)window.frames[]

框架的对象数组（如果当前窗口含有框架对象）；

(4)

为框架（或者脚本打开的窗口）指定的名称；

(5)window.parent

是指包含框架的父窗口；(6)window.top

使用框架时对顶层窗口的引用；962、window对象window对象的常用方法有：（1）创建窗口创建新窗口是window对象主要的应用，它可以在不清除当前窗口的情况下创建一个新窗口，如：弹出一个广告窗口等。创建新窗口的语法为：

window.open(“URL”,”windowName”,”featureList”);972、window对象(2)关闭窗口关闭窗口的方法为：window.close()。浏览器一般不允许在未得到用户许可的情况下关闭主浏览器窗口。

例：在页面中允许用户通过单击一个按钮打开一个新窗口，然后可以关闭它，并尝试关闭当前窗口。98<html><head></head><body><h1>Creatanewwindow</h1><formname=“winform”><inputtype=“button”value=“opennewwindow”onClick=“NewWin=window.open(‘’,’NewWin’,’toolbar=0,width=200,height=100’);”><inputtype=“button”value=“Closewindow”onClick=“NewWin.close();”><inputtype=“button”value=“Closemainwindow”onClick=“window.close();”></form></body></html>992、window对象(3)移动和调整窗口大小

DOM允许移动和调整窗口大小，其方法为：window.moveTo(x,y);window.moveBy(x,y);window.resizeTo(width,height);window.resizeBy(width,height)1002、window对象(4)使用框架在一个窗口中含有多个框架时，每个框架都由一个frame对象表示。该对象等效于window对象，并且对象的名称与<frame>标签中定义的名称相同。101<framesetrows=“*,*”cols=“*,*”><framename=“topleft”src=“topleft.htm”><framename=“topright”src=“topright.htm”><framename=“bottomleft”src=“bottomleft.htm”><framename=“bottomright”src=“bottomright.htm”></frameset>在topleft.htm页面的JavaScript代码中，对其他3部分的引用则是：

parent.topright,parent.bottomleft,parent.bottomright

1023、获取Web文档在DOM模型中，载入浏览器的Web文档由document对象表示，它代表整个文档，也是文档的根节点，document对象是访问Web页面文档的入口。

document对象的一些属性和文档信息相关，其主要属性包括：1033、获取Web文档在DOM模型中，载入浏览器的Web文档由document对象表示，它代表整个文档，也是文档的根节点，document对象是访问Web页面文档的入口。

document对象的一些属性和文档信息相关，其主要属性包括：1043、获取Web文档document.URL：文档的URL地址；document.title：页面的标题；document.referrer：指出文档的来源，当页面是从其他页面的超链接转到这里的时候，该属性指向上一个页面的URL地址。

1053、获取Web文档document.lastModified：文档最后修改的日期；document.linkColor：文档中链接的颜色；document.cookie：允许读取和设置文档的cookie；document.bgColor：页面的背景颜色；document.fgColor：页面的前景颜色；1064、DOM节点

HTML文档中的每个元素都被称作DOM中的一个节点，可通过document对象访问该结构中的每个节点（对象）。（1）DOM节点获取方法getElementById(id)：返回具有指定id属性的元素；getElementByTagName(tag)：返回具有指定标签名称的所有元素的一个数组；1074、DOM节点

getElementsByClassName(class)：返回具有指定类名的元素；getElementsByName(name)：返回具有指定name属性的元素；<ahref=’#’id=‘zzz’name=’xxx’class=’yyy’>Helloworld!</a>varm=document.getElementById(“zzz”);varn=document.getElementsByTagName(“a”)[0];varo=document.getElementsByClassName(“yyy”);varp=document.getElementsByName(“xxx”);当document获取的节点是一个DOM集合时，这个被获取的集合是一个NodeList对象。

NodeList并不是一个数组，只是一个类似数组的对象，可以通过数字下标访问其内部的元素。如想要遍历这个集合是不能使用for/in循环语句的，因为遍历时会访问到其他属性，比如length属性。4、DOM节点1094、DOM节点（2）基本的节点属性nodeName:为节点的名称，对于HTML标签而言，即是标签的名称；对于文档节点，名称为#document，文本节点为：#text；nodeType:是描述节点类型的整数，1表示正常的HTML标签，3表示文本节点，9表示文档节点；1104、DOM节点

nodeValue:为文本节点包含的文本内容；innerHTML:为任意节点的HTML内容，可以指定一个HTML标签的值；1114、DOM节点（3）节点的关系属性firstChild:节点的第一个子对象；

lastChild:节点的最后一个子对象；

childNodes:节点的所有子对象的数组；

previousSibling:当前节点之前的兄弟节点；

nextSibling:当前节点之后的兄弟节点；1124、DOM节点（4）创建DOM节点creatTextNode(text):创建一个文本节点；creatElement(tag):为指定标签创建一个新的HTML元素；createAttribute(attribute)：创建元素属性节点，该函数的参数为属性名；1134、DOM节点appendChild(new):把指定的新节点附加在该对象所有子节点之后；

insertBefore(new,old):把指定的新节点添加在指定节点之前；

replaceChild(new,old):置换节点；

removeChild(node):删除节点；

hasChildNodes():判断该对象是否有子对象；1144、DOM节点创建了一个超链接a对象，在新的元素节点和属性节点创建完毕后，用appendChild将其添加到DOM树中间去。varp=document.createElement(“a”);varx=document.createTextNode(“HomePages”);href=“/”;p.appendChild(x);1154、DOM节点（6）修改DOM节点元素节点的内容可以通过innerHTML属性做修改，文本可以通过data属性修改。例如：以超链接元素<a>为例<aid="hl"href="#">AHyperLink</a>varx=document.getElementById("hl1");x.childNodes.length//=>1x.firstChild.nodeValue="ChangeText";//=>"ChangeText"x.innerHTML="ChangeAgain";//=>"ChangeAgain"1164、DOM节点应用实例：该例子对表单数据做出处理，将表单中的前两个输入相加，计入第三个文本框。<form> <inputtype="text"id="a"name='in'value=''/> <inputtype="text"id="b"name='in'value=''/> <br/> <textareaid="out"value="0"></textarea></form>117<script> document.getElementById("a").addEventListener("change",function(event){

var_b=document.getElementById("b");

varresult=isNaN(parseFloat(_b.

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论