版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
Web前端开发技术
教案设计
项目课题JavaScript对象
授课时间授课对象大学生
1掌.握对象创建和访问的方法。
学习目标2掌.握各内置对象的属性和方法。
3.掌握DOM和BOM中各对象的常用属性和方法。
学习重点掌握各内置对象的属性和方法。
学习难点掌握DOM和BOM中各对象的常用属性和方法。
教学方法讲授法、课堂演示法
教学用具多媒体课件
教学流程
教学环节教学内容
任务一对象概念
对象是一种复合的数据类型，包括属性和方法两个基本要素。属性
实现对象相关信息的存储，一般与变量相关联；方法实现对象的特定
操作，一般与函数代码相关联。
JavaScript支持基于对象的编程。JavaScript中包括内置对象和
宿主对象。内置对象是ECMAScript标准中定义的类型；宿主对象
教学过程是机器环境提供的类型，包括DOM（DocumentObjectModel,文档
对象模型）和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(对象实例名)
｛语法块；｝
五、this关键字
在JavaScript中，由于对象实例的引用是多层次的，容易造成混
乱，因此可以采用this关键字表示当前的对象实例。
例如，下面的语句表示在定义对象实例student时，用this.age
表示引用当前对象实例student的age属性。
varstudent=｛age："12",
show：function()｛returnthis.age;])
任务二内置对象
一、Global对象
Global对象又称为全局对象，其包含的属性和方法可以应用于所有
JavaScript内置对象。
1.Global对象的常用属性
在GlobaI对象的属性中，Infinity表示正无穷大；Tnfinity表
示负无穷大；NaN表示非数值;undefined表示未声明或未赋值的变
量。
2.Global对象的常用方法
二、Web相关概念
RegExp对象是正则表达式对象，用于生成湍述字符串匹配规则的正
则是达式。正则表达式的语法包括匹酿模式和搜索模式两部分，其
基本语法格式如下。
NewRegExp（匹配模式，搜索模式）
或简写为：
/匹配模式/搜索模式
1.匹配模式
2.搜索模式
搜索模式有g和i两个可选值。g表示全局搜索，搜索时将匹配
所有符合条件的部分；i表示匹配时忽略大小写，若未设置则默认大
小写敏感。
3.RegExp对象的方法
RegExp对象实例创建完成后，有两种方法用于检索文本。
二、Array（数组）对象
数组对象用来存储一系列的值。数组中的每个值称为数组的元素，
在数组中的序号称
为元素下标。在JavaScript数组中，每个元素的类型可以不一样。
1.创建数组对象实例
在JavaScript中，创建数组对象实例的方法有多种，其基本语法格
式如下。
var数组名二newArray（）；//创建空数组
var数组名二newArray（逗号分隔的数据列表）；//根据数据列表
值创建数组
var数组名=newArray（元素个数）；//创建空数组，数组长度等于
元素个数
var数组名二［数据列表］;//直接根据数据列表创建数组
2.访问数组对象元素
数组元素下标从0开始编号。访问数组对象实例中的某个元素，
可以采用数组对象实例名［下标］的形式。访问数组对象实例名表示
访问数组对象实例中的所有元素。
3.数组对象的常用属性
length是数组对象的常用属性，表示数组元素的个数。
4.数组对象的常用方法
数组对象的方法实现对数组的操作。
四、String对象
String对象也括字符串处理的属性和方法。这些属性和方法是字
符串对象实例的属性和方法，所以要用字符串对象实例名访问。
1.String对象的常用属性
length属性用于获取String对象实例中字符的个数。
例如，下面的语句表示定义字符串对象实例变量x,通过length属
性获得变量＞：的长度，赋值给变量yo
varx="abc";
y=x.length；
2.String对象的常用方法
String对象中有大量操作字符串的方法。
五、Math对象
Math对象包珞数学运算的属性和方法。
1.Math对象的常用属性
访问Math对象的属性不需要创建对象实例，可以直接用对象名
Math访问。Math对象的属性是教学运算中的一些常量。
2.Math对象的常用方法
访问Math对象的方法不需要创建对象实例，可以直接用对象名
Math访问。Math对象的方法是一些数学运算。
六、Date对象
Date对象处理与日期、时间有关的内容。
1.创建Date对象实例
有4种方法可以创建Date对象实例，其走本语法格式如下。
对象实例名二newDate（）;
对象实例名二newDate（毫秒数）;
对象实例名二newDate（日期时间字符串）;
对象实例名二newDate（年，月，日,时,分,秒,毫秒）;
2.Date对象的常用方法
任务三DOM和BOM
一、文档对象模型DOM
document对象是JavaScript中最为常用的对象之一，在浏览器对
象模型中，它位于Window对象的下一层级。document对象包含
一些简单的属性，这些属性提供了有关浏览器中显示文档的相关信
息，如该文档的URL＞文本颜色、修改日期等。另外，document对
象还包含一些引用数组的属性，这些属性可以代表文档中的表单、图
像、链接、锚和小程序。同其他对象一样,document对象还定义了
一系列的方法，使用这些方法，可以使JavaScript在解析文档时动
态地将HTML文本添加到文档中。
HTMLDOM是HTML文档对象模型的缩写。根据W3CDOM规范，DOM
是一种与浏览器、平台、语言无关的接口，使用户可以访问页面中其
他的标准组件。DOM与JavaScript的结合实现了Web网页的行
为与结构分离。
简单来说，DOM解决了Netscape的JavaScript和Microsoft的
JavaScript之间的冲突，为Web设计师和开发者提供了一个处理
HTML文档的标准方法，方便他们访问站点中的数据、脚本和表现层
对象。
1.D0M节点树
HTMLDOM定义了访问和操作HTML文档的标准方法。HTML文档结
构像一棵倒置的树，其中,<htmI>标记就是树的根节点,<head>和
<body>标记是树的两个子节点。这种描述页面标记关系的树形结构
称为D0M节点树(文档树)。
2.D0M节点
根据W3CDOM规范,HTML文档中的所有内容都是节点。具体的规
定如下：
(1)整个文档是一个文档节点。
⑵每个HTML元素是一个元素节点。
(3)HTML元素中的文本是文本节点。
(4)每个HTML属性是一个属性节点。
⑸注释是注释节点。
通过document对象的documentEIement属性可以获取整个DOM
节点树上的任何一个元素。
通过节点的firstChild>lastChiId属性可以获取它的第一个和最
后一个子节点。DOM规定，一个页面内只有一个根节点，根节点是没
有父节点的，除根节点之外，其他节点都可以通过parentNode属性
来获取自己的父节点。
同一父节点下位于同一层次的节点称为兄弟节点，一个子节点的前
一个节点可以通过previousSibling属性来获取，后^一个节点可以
通过nextSibIing属性来获取。
由于不同节点对应的HTML元素不同，因此节点有不同类型。节点
树中的每个节点对象都有nodeType属性，该属性返回节点的类型。
常用的节点类型及说明如表9-9所示。
从表9-9中可以看出，如果某个节点的nodeType值为9,则说明
该节点的类型为document;如果某个节点的nodeType值为1,则
说明该节点的类型为elemento不同类型的节点还可以包含其他类
型的节点，相互连接在一起就构成了一个完整的树形结构。对于大
多数HTML文档来说，元素节点、文本节点及属性节点是必不可少
的。
(1)元素节点。
元素节点(ElementNode)构成了D0M基础。在文档结构
中，<html><head><bodyXh1><p^=<ul>等标记都是元素节点。各种
标记提供了元素的名称，如文本段落元素的名称是p,无序列表元素
的名称是ul等。元素可以包含其他元素，也可以被其他元素包含。
(2)文本节点。
元素节点只是节点树中的一种类型，如果文档完全由元素组成，那么
这份文档本身将不包含任何信息，因此文档结构也就失去了存在的
价值。在HTML文档中，文本节点(TextNode)包含在元索节点内，
如hi、p、li等元素就可以包含一些文本节点。
(3)属性节点。
元素一般都会包含一些属性，属性的作用是对元素做出更具体的描
述。在编写HTML代码时，在HTML标签中添加的属性就是属性节
点(AttributeNode)°一般元素都有title属性，该属性能够详细
地描述或说明元素，以便用户了解该元素的用途、作用或功能。
3.D0M节点访问
访问节点的方式有很多种，既可以通过document对象的方法来访
问节点，也可以通过元素节点的属性来访问节点。
如果要对例9-9中的用户名文本框、密码框及邮箱地址文本框进行
访问，则可以通过以下4种方式进行。
(1)通过getElementById()方法访问节点c
document对象的getEIementById()方法可以访问页面中的节点,
该方法在使用时，必须指定一个目标元素的id作为参数。
①基本语法。
vars=documcnt.gctEIcmcntById(id);//调用时参数需要加双引
在使用该方法时需要注意以下两点。
•id为必选项，对应页面元素属性id的属性值，为字符串型的数
据。在页面设计时最好给每一个需要交互的元素设定一个唯一的
id,以便快速查找。
■该方法返回的是一个页面元素的引用，如果页面上出现了不同元
素使用同一个id的情况，则返回第一个找到的页面元素；如果给定
的id没有找到对应的元素，则返回nullc
(2)通过getEIementsByName0方法访问节点。
除了可以通过元素的id获取对象，还可以通过元素的名字来访问。
①基本语法。
vars=document.getEIementsByName(name);//调用时参数需要
加双弓I号
在使用该方法时需要注意以下两点。
・name为必选项，对应页面元素属性name的属性值，为字符串型
的数据。该方法调用时返回的是一个数组，即使对应该名字的元素
只有一个。
•如果指定名字在页面中没有相应的元素存在，则返回一个长度为
0的数组，程序中可以通过判断数组的length属性值是否为0来
判断是否找到了相应的元素。
(3)通过getEIementsByTagName()方法访问节点。
除了可以通过元素的id和name获取对应的元素，还可以通过标
记名称来获取页面上所有同类的元素，如表单中的所有input元
素O
①基本语法。
vars=document.getEIementsByTagName(tagname);//调用时参
数需要加双引号
在使用该方法时需要注意以下两点。
•tagnamc为必选项，对应页面元素的类型，为字符串型的数.据。该
方法调用时返回的是一个数组，即使页面中对应该类型的元素只有
一个。
・通过数组的length属性值来获取页面上该类型元素的总数。
(4)通过form元素访问节点。
如果要获取页面中的form对象，那么除了通过
getEIementById()、getEIementsByName()方法，还可以通过
document对象的forms属性来获取这个form对象。表单是用户
与网页进行交互的重要手段，通过表单可以一次性获取表单中大量
元素的信息。获取例9-9文档中form对象的方法如下。
varmyform=document.forms;//通过document对象的forms
属性来获得数组对象
varmyIoginform=myform[0];//获取数组中的第一^个form对象
当然，也可以通过form对象的name属性来访问页面中的form
对象，格式如下。
varmyform=document.loginform；//loginform为form对象的
名称
获取form对象之后，如果要得到form对象包含的其他元素，则可
以通过form对象的eIements属性或name属性来获取。
4.DOM节点操作
前面介绍如何访问文档中的不同节点，只是使用DOM所能实现的功
能中的一小部分oDOM的应用非常广泛，如可以通过document对象
实现表格的动态添加和删除，也可以通过document对象替换文本
节点的内容等。
(1)创建和修改节点。
document对象有很多创建和修改不同类型节点的方法，其常用方法
及说明如表970所示。假设要在一个HTML页面中添加一个p节
点，p节点内的文本内容是“HelloWorld!”那么可以利用
createElement()>createTextNode()及appendChiId()方法来实
现。除了添加一个节点，也可以利用rcmovcChiId()、
insertBefore()及repIaceChiId()方法删除、插入和替换节点。
(2)节点的innerText和innerHTML属性。
在DOM中，有两个很重要的属性，分别是innerText和
innerHTML,利用这两个属性可以更方便地进行文档操作。
innerText属性用来修改起始标记和结束标记之间的文本。例如，
有一个空的div节点，如果希望在该div节点中设置文本内容为
“中国你好！”则可以编写如下代码。
oDiv.appendChiId(document.createTextNode("中国你好！”))；
如果使用innerText属性，则可以编写如下代码。
oDiv.innerText="中国你好！”；
使用innerText属性的代码更加简洁，且更容易理解。另夕卜，由于
innerText会自动将小于号、大于号、引号和连接符号进行编码，
因此不需要担心这些特殊字符。
innerHTML属性可以直接给元素分配字旃串，而不需要考虑使用
D0M的方法来创建元素。例如，若要为空的div节点创建strong
子节点，则使用D0M方法创建的代码如下
varstrongl=document.createEIement("strong")；
varotext=document.createTextNode("heIIoworId!")；
strongI.appendChiId(otext);
oDiv.appendchiId(strongI)；
如果使用innerHTML属性，则代码变成：
oDiv.innerHTML="<strong>heIIoworId!</strong>"；
还可以使用innerText属性和innerHTML属性获取元素的内容。
如果元素只包含文本，则innerText和innerHTML将返回相同的
值；如果元素同时包含文本和其他元素，则innerText将只返回文
本的内容，而innerHTML将返回所有元素用文本的HTML代码。
二、浏览器对象模型BOM
浏览器对象校型是用于描述对象与对象之间层次关系的模型，浏览
器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对
象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对
象是B0M的顶层对象，其他对象都是该对象的子对象。
IE3.0和NetscapeNavigator3.0浏览器提供了浏览器对象模型
特性，可以对浏览器窗口进行访问和操作。开发者可以使用B0M移
动窗口、改变状态栏中的文本，以及执行其地与页面内容不直接相关
的操作。由于没有相关的B0M标准，因此每种浏览器都有各自的
B0M实现方法。
常见的B0M对象有Window对象、Screen对象、Location对象、
History对象和Navigator对象。
1.Window对象
Window对象用来描述浏览器窗口的相关信息。Window对象是客户
端的全局对象，是客户端对象的“根”，其他子对象可以作为
Window对象的属性引用，访问时不用注明Window对象。Window
对象的常用属性及说明如表9-11所示。
Window对象提供对浏览器窗口操作的方法。Window对象的常用方
法及说明如表972所示。
2.Screen对2
Screen对象存放有关浏览器
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 江苏省徐州市市级名校2025-2026学年初三九月月考英语试题含解析
- 四川省成都市浦江县市级名校2026届初三下期末考试（数学试题理）试卷含解析
- 四川省眉山市洪雅县2025-2026学年初三年级第一次调研考试语文试题含解析
- 重庆市西南大附中2025-2026学年初三一模考试物理试题试卷（理工类）含解析
- 期浙江省金华市市级名校2025-2026学年初三年级校内模拟英语试题试卷（最后一卷）含解析
- 四川省泸州泸县联考2026年初三线上测试英语试题试卷含解析
- 湖北省襄阳襄城区四校联考2026届初三英语试题下学期第四次月考试题含解析
- 期货操盘合同
- 2026年跨学科科研团队高效协作模式探索与实践
- 2026年企业品牌传播的线下活动整合策略研究
- 自然分娩宣教
- 口腔颌面部外伤的护理个案
- 急性呼吸衰竭无创正压通气方案
- 余华《活着》精神分析
- 通信行业市场前景及投资研究报告：光模块框架培训
- 国有企业资产租赁合同协议（GF-2025-002）
- 壁挂机空调安装施工方案
- 变压器拆除施工方案
- 物业管理风险评估报告
- 劳动课认识农具课件
- 美团代运营合同协议模板
评论
0/150
提交评论