Web 前端开发技术（HTML5+CSS3+JavaScript+jQuery） 课件 项目九　 JavaScript 对象

JavaScript对象Web前端开发技术篇3：JavaScript技术

本项目介绍JavaScript对象的创建和访问、内置对象、DOM和BOM的常用属性和方法。通过使用和掌握JavaScript对象的相关属性,使学生明白基础的重要性,只有基础扎实,才能挑战未来的难题,才能实现竞进有为、行稳致远的目标。学生在踏实中学真知,在细节处求真理,一步一个脚印,方能在今后的学习、工作中熟练运用所学的知识和技术。序言目录CONTENTS对象概念内置对象DOM和BOM01020301对象概念Learningisaveryhappyopportunity,anopportunitythatmustbethoroughlyutilizedinordertoacquireknowledgeandbroadenone'shorizon.对象概念对象是一种复合的数据类型,包括属性和方法两个基本要素。属性实现对象相关信息的存储,一般与变量相关联;方法实现对象的特定操作,一般与函数代码相关联。JavaScript支持基于对象的编程。JavaScript中包括内置对象和宿主对象。内置对象是ECMAScript标准中定义的类型;宿主对象是机器环境提供的类型,包括DOM(Document

ObjectModel,文档对象模型)和BOM(BrowserObjectModel,浏览器对象模型)。用户也可以创建自定义对象。对象是一种抽象的数据类型。一般需要先创建对象实例,再访问对象实例的属性和方法。但JavaScript中有少数内置对象,不需要创建实例即可直接访问对象的属性。对象概念创建对象实例在JavaScript中,创建对象实例的方法有以下3种。1.创建Object对象的实例Object是系统内置对象,可以使用new运算符创建Object对象的实例,其基本语法格式如下。Var对象实例名=newObject();2.创建已有对象的实例JavaScript中有许多内置对象,用户可以先创建自定义类型的对象,然后使用new运算符创建对象的实例,其基本语法格式如下。var对象实例名=new已有对象名();对象概念创建对象实例3.采用列表赋值创建对象的实例直接采用列表赋值的方式创建自定义对象的实例,并设置对象实例的属性、属性值、方法和方法函数,其基本语法格式如下。var对象实例名={属性:属性值,……方法:方法函数,……}对象概念对象实例的属性创建对象实例后,可以访问对象实例的属性,包括设置和引用属性值。对象实例的属性具有属性下标和属性名。访问对象实例的属性有3种形式,其基本语法格式如下。对象实例名.属性名对象实例名[属性下标]对象实例名["属性名"]对象概念对象实例的方法创建对象实例后,可以访问对象实例的方法,包括设置方法的函数和运行方法。1.设置对象实例的方法设置对象实例的方法有两种,一种是在创建对象实例时设置,另一种是在对象实例创建完成后通过赋值设置,其基本语法格式如下。var对象实例名={……方法:函数,对象概念对象实例的方法……}或者对象实例名.方法名=函数;2.运行对象实例的方法运行对象实例的方法实质上是关联了一个函数代码,它同调用函数一样,其基本语法格式如下。对象实例名.方法名(参数);对象概念围当多次访问对象实例的属性和方法时,需要重复引用对象实例名,语句会比较烦琐。因此,可以用with语句,修改语句的作用域,减少大量重复的输入,其基本语法格式如下。with(对象实例名){语法块;}

with语句在JavaScript中,由于对象实例的引用是多层次的,容易造成混乱,因此可以采用this关键字表示当前的对象实例。例如,下面的语句表示在定义对象实例student时,用this.age表示引用当前对象实例student的age属性。varstudent={age:"12",show:function(){returnthis.age;}}this关键字对象概念02内置对象Learningisaveryhappyopportunity,anopportunitythatmustbethoroughlyutilizedinordertoacquireknowledgeandbroadenone'shorizon.Global对象Global对象又称为全局对象,其包含的属性和方法可以应用于所有JavaScript内置对象。1.Global对象的常用属性在Global对象的属性中,Infinity表示正无穷大;-Infinity表示负无穷大;NaN表示非数值;undefined表示未声明或未赋值的变量。2.Global对象的常用方法Global对象的常用方法及说明如表9-1所示。内置对象Web相关概念RegExp对象是正则表达式对象,用于生成描述字符串匹配规则的正则表达式。正则表达式的语法包括匹配模式和搜索模式两部分,其基本语法格式如下。NewRegExp(匹配模式,搜索模式)或简写为:/匹配模式/搜索模式1.匹配模式正则表达式的常用匹配模式如表9-2所示。内置对象Web相关概念内置对象Web相关概念内置对象Web相关概念内置对象Web相关概念2.搜索模式搜索模式有g和i两个可选值。g表示全局搜索,搜索时将匹配所有符合条件的部分;i表示匹配时忽略大小写,若未设置则默认大小写敏感。3.RegExp对象的方法RegExp对象实例创建完成后,有两种方法用于检索文本。RegExp对象的常用方法及说明如表9-3所示。内置对象件采购汇总表内置对象Array(数组)对象数组对象用来存储一系列的值。数组中的每个值称为数组的元素,在数组中的序号称为元素下标。在JavaScript数组中,每个元素的类型可以不一样。1.创建数组对象实例在JavaScript中,创建数组对象实例的方法有多种,其基本语法格式如下。var数组名=newArray();//创建空数组var数组名=newArray(逗号分隔的数据列表);//根据数据列表值创建数组var数组名=newArray(元素个数);//创建空数组,数组长度等于元素个数var数组名=[数据列表];//直接根据数据列表创建数组件采购汇总表内置对象Array(数组)对象2.访问数组对象元素数组元素下标从0开始编号。访问数组对象实例中的某个元素,可以采用数组对象实例名[下标]的形式。访问数组对象实例名表示访问数组对象实例中的所有元素。3.数组对象的常用属性length是数组对象的常用属性,表示数组元素的个数。4.数组对象的常用方法数组对象的方法实现对数组的操作。数组对象的常用方法及说明如表9-4所示。件采购汇总表内置对象Array(数组)对象件采购汇总表内置对象Array(数组)对象String对象String对象包括字符串处理的属性和方法。这些属性和方法是字符串对象实例的属性和方法,所以要用字符串对象实例名访问。1.String对象的常用属性length属性用于获取String对象实例中字符的个数。例如,下面的语句表示定义字符串对象实例变量x,通过length属性获得变量x的长度,赋值给变量y。varx="abc";y=x.length;2.String对象的常用方法String对象中有大量操作字符串的方法。String对象的常用方法及说明如表9-5所示。内置对象String对象内置对象String对象内置对象String对象内置对象Math对象Math对象包括数学运算的属性和方法。1.Math对象的常用属性访问Math对象的属性不需要创建对象实例,可以直接用对象名Math访问。Math对象的属性是数学运算中的一些常量。Math对象的常用属性及说明如表9-6所示。内置对象Math对象2.Math对象的常用方法访问Math对象的方法不需要创建对象实例,可以直接用对象名Math访问。Math对象的方法是一些数学运算。Math对象的常用方法及说明如表9-7所示。内置对象件采购汇总表内置对象Date对象Date对象处理与日期、时间有关的内容。1.创建Date对象实例有4种方法可以创建Date对象实例,其基本语法格式如下。对象实例名=newDate();对象实例名=newDate(毫秒数);对象实例名=newDate(日期时间字符串);对象实例名=newDate(年,月,日,时,分,秒,毫秒);件采购汇总表内置对象Date对象2.Date对象的常用方法Date对象的常用方法及说明如表9-8所示。件采购汇总表内置对象Date对象03DOM和BOMLearningisaveryhappyopportunity,anopportunitythatmustbethoroughlyutilizedinordertoacquireknowledgeandbroadenone'shorizon.文档对象模型DOMdocument对象是JavaScript中最为常用的对象之一,在浏览器对象模型中,它位于Window对象的下一层级。document对象包含一些简单的属性,这些属性提供了有关浏览器中显示文档的相关信息,如该文档的URL、文本颜色、修改日期等。另外,document对象还包含一些引用数组的属性,这些属性可以代表文档中的表单、图像、链接、锚和小程序。同其他对象一样,document对象还定义了一系列的方法,使用这些方法,可以使JavaScript在解析文档时动态地将HTML文本添加到文档中。HTMLDOM是HTML文档对象模型的缩写。根据W3CDOM规范,DOM是一种与浏览器、平台、语言无关的接口,使用户可以访问页面中其他的标准组件。DOM与JavaScript的结合实现了Web网页的行为与结构分离。简单来说,DOM解决了Netscape的JavaScript和Microsoft的JavaScript之间的冲突,为Web设计师和开发者提供了一个处理HTML文档的标准方法,方便他们访问站点中的数据、脚本和表现层对象。DOM和BOM文档对象模型DOM1.DOM节点树HTMLDOM定义了访问和操作HTML文档的标准方法。HTML文档结构像一棵倒置的树,其中,<html>标记就是树的根节点,<head>和<body>标记是树的两个子节点。这种描述页面标记关系的树形结构称为DOM节点树(文档树)。2.DOM节点根据W3CDOM规范,HTML文档中的所有内容都是节点。具体的规定如下:(1)整个文档是一个文档节点。(2)每个HTML元素是一个元素节点。(3)HTML元素中的文本是文本节点。DOM和BOM文档对象模型DOM(4)每个HTML属性是一个属性节点。(5)注释是注释节点。通过document对象的documentElement属性可以获取整个DOM节点树上的任何一个元素。通过节点的firstChild、lastChild属性可以获取它的第一个和最后一个子节点。DOM规定,一个页面内只有一个根节点,根节点是没有父节点的,除根节点之外,其他节点都可以通过parentNode属性来获取自己的父节点。同一父节点下位于同一层次的节点称为兄弟节点,一个子节点的前一个节点可以通过previousSibling属性来获取,后一个节点可以通过nextSibling属性来获取。由于不同节点对应的HTML元素不同,因此节点有不同类型。节点树中的每个节点对象都有nodeType属性,该属性返回节点的类型。常用的节点类型及说明如表9-9所示。DOM和BOM文档对象模型DOM从表9-9中可以看出,如果某个节点的nodeType值为9,则说明该节点的类型为document;如果某个节点的nodeType值为1,则说明该节点的类型为element。不同类型的节点还可以包含其他类型的节点,相互连接在一起就构成了一个完整的树形结构。对于大多数HTML文档来说,元素节点、文本节点及属性节点是必不可少的。DOM和BOM文档对象模型DOM(1)元素节点。元素节点(ElementNode)构成了DOM基础。在文档结构中,<html><head><body><h1><p>和<ul>等标记都是元素节点。各种标记提供了元素的名称,如文本段落元素的名称是p,无序列表元素的名称是ul等。元素可以包含其他元素,也可以被其他元素包含。(2)文本节点。元素节点只是节点树中的一种类型,如果文档完全由元素组成,那么这份文档本身将不包含任何信息,因此文档结构也就失去了存在的价值。在HTML文档中,文本节点(TextNode)包含在元素节点内,如h1、p、li等元素就可以包含一些文本节点。(3)属性节点。元素一般都会包含一些属性,属性的作用是对元素做出更具体的描述。在编写HTML代码时,在HTML标DOM和BOM文档对象模型DOM签中添加的属性就是属性节点(AttributeNode)。一般元素都有title属性,该属性能够详细地描述或说明元素,以便用户了解该元素的用途、作用或功能。3.DOM节点访问访问节点的方式有很多种,既可以通过document对象的方法来访问节点,也可以通过元素节点的属性来访问节点。如果要对例9-9中的用户名文本框、密码框及邮箱地址文本框进行访问,则可以通过以下4种方式进行。(1)通过getElementById()方法访问节点。document对象的getElementById()方法可以访问页面中的节点,该方法在使用时,必须指定一个目标元素的id作为参数。DOM和BOM文档对象模型DOM①基本语法。vars=document.getElementById(id);//调用时参数需要加双引号在使用该方法时需要注意以下两点。●id为必选项,对应页面元素属性id的属性值,为字符串型的数据。在页面设计时最好给每一个需要交互的元素设定一个唯一的id,以便快速查找。●该方法返回的是一个页面元素的引用,如果页面上出现了不同元素使用同一个id的情况,则返回第一个找到的页面元素;如果给定的id没有找到对应的元素,则返回null。(2)通过getElementsByName()方法访问节点。除了可以通过元素的id获取对象,还可以通过元素的名字来访问。DOM和BOM文档对象模型DOM①基本语法。vars=document.getElementsByName(name);//调用时参数需要加双引号在使用该方法时需要注意以下两点。●name为必选项,对应页面元素属性name的属性值,为字符串型的数据。该方法调用时返回的是一个数组,即使对应该名字的元素只有一个。●如果指定名字在页面中没有相应的元素存在,则返回一个长度为0的数组,程序中可以通过判断数组的length属性值是否为0来判断是否找到了相应的元素。(3)通过getElementsByTagName()方法访问节点。除了可以通过元素的id和name获取对应的元素,还可以通过标记名称来获取页面上所有同类的元素,如表单中的所有input元素。DOM和BOM文档对象模型DOM①基本语法。vars=document.getElementsByTagName(tagname);//调用时参数需要加双引号在使用该方法时需要注意以下两点。●tagname为必选项,对应页面元素的类型,为字符串型的数据。该方法调用时返回的是一个数组,即使页面中对应该类型的元素只有一个。●通过数组的length属性值来获取页面上该类型元素的总数。(4)通过form元素访问节点。如果要获取页面中的form对象,那么除了通过getElementById()、getElementsByName()方法,还可以通过document对象的forms属性来获取这个form对象。表单是用户与网页进行交互的重要手段，通DOM和BOM文档对象模型DOM过表单可以一次性获取表单中大量元素的信息。获取例9-9文档中form对象的方法如下。varmyform=document.forms;//通过document对象的forms属性来获得数组对象varmyloginform=myform[0];//获取数组中的第一个form对象当然,也可以通过form对象的name属性来访问页面中的form对象,格式如下。varmyform=document.loginform;//loginform为form对象的名称获取form对象之后,如果要得到form对象包含的其他元素,则可以通过form对象的elements属性或name属性来获取。4.DOM节点操作前面介绍如何访问文档中的不同节点,只是使用DOM所能实现的功能中的一小部分。DOM的应用非常DOM和BOM文档对象模型DOM广泛,如可以通过document对象实现表格的动态添加和删除,也可以通过document对象替换文本节点的内容等。(1)创建和修改节点。document对象有很多创建和修改不同类型节点的方法,其常用方法及说明如表9-10所示。DOM和BOM文档对象模型DOM假设要在一个HTML页面中添加一个p节点,p节点内的文本内容是“HelloWorld!”那么可以利用createElement()、createTextNode()及appendChild()方法来实现。除了添加一个节点,也可以利用removeChild()、insertBefore()及replaceChild()方法删除、插入和替换节点。(2)节点的innerText和innerHTML属性。在DOM中,有两个很重要的属性,分别是innerText和innerHTML,利用这两个属性可以更方便地进行文档操作。innerText属性用来修改起始标记和结束标记之间的文本。例如,有一个空的div节点,如果希望在该div节点中设置文本内容为“中国你好!”则可以编写如下代码。oDiv.appendChild(document.createTextNode("中国你好!"));DOM和BOM文档对象模型DOM如果使用innerText属性,则可以编写如下代码。oDiv.innerText="中国你好!";使用innerText属性的代码更加简洁,且更容易理解。另外,由于innerText会自动将小于号、大于号、引号和连接符号进行编码,因此不需要担心这些特殊字符。innerHTML属性可以直接给元素分配字符串,而不需要考虑使用DOM的方法来创建元素。例如,若要为空的div节点创建strong子节点,则使用DOM方法创建的代码如下。varstrong1=document.createElement("strong");varotext=document.createTextNode("helloworld!");strongl.appendChild(otext);DOM和BOM文档对象模型DOMoDiv.appendchild(strongl);如果使用innerHTML属性,则代码变成:oDiv.innerHTML="<strong>helloworld!</strong>";还可以使用innerText属性和innerHTML属性获取元素的内容。如果元素只包含文本,则innerText和innerHTML将返回相同的值;如果元素同时包含文本和其他元素,则innerText将只返回文本的内容,而innerHTML将返回所有元素和文本的HTML代码。DOM和BOM浏览器对象模型BOM浏览器对象模型是用于描述对象与对象之间层次关系的模型,浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成,其中代表浏览器窗口的Window对象是BOM的顶层对象,其他对象都是该对象的子对象。IE3.0和NetscapeNavigator3.0浏览器提供了浏览器对象模型特性,可以对浏览器窗口进行访问和操作。开发者可以使用BOM移动窗口、改变状态栏中的文本,以及执行其他与页面内容不直接相关的操作。由于没有相关的BOM标准,因此每种浏览器都有各自的BOM实现方法。常见的BOM对象有Window对象、Screen对象、Location对象、History对象和Navigator对象。1.Window对象Window对象用来描述浏览器窗口的相关信息。Window对象是客户端的全局对象,是客户端对象的“根”,其他子对象可以作为Window对象的属性引用,访问时不用注明Window