JavaScript+jQuery交互式Web前端开发（第2版）课件第6、7章 DOM（上）（下）.pptx

下载文档

0
0
约8.48千字
约 210页
2024-04-28 发布于山东
举报
版权申诉
保障服务

JavaScript+jQuery交互式Web前端开发（第2版）课件第6、7章 DOM（上）（下）.pptx

1、本文档共210页，可阅读全部内容。
2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击这里二次下载。
4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。

第6章DOM（上）;学习目标/Target;学习目标/Target;章节概述/Summary;目录/Contents;WebAPI简介;了解WebAPI的概念，能够阐述WebAPI的作用;;;在JavaScript中，WebAPI被封装成对象，用于帮助开发者实现某种功能。开发人员无须访问对象源代码，也无须理解对象内部工作机制和细节，只需要掌握如何使用对象的属性和方法。

例如，在程序中，经常使用console.log()输出一些信息，其中，console就是WebAPI对象，用于操作控制台，log()方法用于在控制台输出信息。

DOM和BOM都包含一系列对象，这些对象都属于WebAPI。;DOM简介;了解什么是DOM，能够描述DOM中文档、元素和节点的关系;;;节点有多种类型，常见的类型及解释如下。

元素节点：代表页面中的标签。例如，<div>标签属于元素节点，通常称为div元素或div节点。

文本节点：代表页面中的文本内容。例如，“<div>内容</div>”中的“内容”属于文本节点。

注释节点：代表页面中的注释。例如，“”属于注释节点。

文档节点：代表整个文档。

文档类型节点：代表文档的类型定义。例如，“<!DOCTYPEhtml>”属于文档类型节点。;不同节点之间的关系可以用传统的家族关系进行描述，例如，父子关系、兄弟关系，通过这些关系可以将节点划分为不同层级，具体如下。

父节点：是指某一节点的上级节点。

子节点：是指某一节点的下级节点。

兄弟节点：是指同一个父节点的两个子节点。

根节点：document节点是整个文档的根节点。根节点是文档树中唯一没有父节点的节点，所有其他节点都是根节点的后代。;如果一个节点的父节点、子节点或兄弟节点是元素节点，则可以将其称为父元素、子元素或兄弟元素。根元素对应的标签为<html>标签。

下面演示一个简单的文档树示例，如下图所示。;节点对象有3个常用的属性，具体解释如下。

nodeType属性：用于获取数字表示的节点类型。1表示元素节点，3表示文本节点、8表示注释节点、9表示文档节点，10表示文档类型节点。

nodeName属性：用于获取节点名称。

nodeValue属性：用于获取节点值，适用于文本节点、注释节点。;获取元素;掌握根据id属性获取元??的方法，能够根据getElementById()方法获取元素;在HTML中，为元素设置id属性可以作为元素设置唯一标识。document对象提供了getElementById()方法，用于根据id属性获取元素，该方法的语法格式如下。

;6.3.1 根据id属性获取元素;;在实际开发中，有时需要获取多个元素，而getElementById()方法一次只能获取一个元素，当要获取多个元素时，操作比较烦琐。为此，document对象还提供了一种通过标签名获取元素的方法，即getElementsByTagName()方法，该方法的语法格式如下。;下面通过代码演示getElementsByTagName()方法的使用。;需要注意的是，getElementsByTagName()方法返回的集合与数组的使用方法类似，但是它本质上并不是数组。为了证明这一点，可以通过在前面示例代码的第10行代码下方添加如下代码进行验证。;6.3.2 根据标签名获取元素;;在实际开发中，经常需要编写表单页面的交互逻辑代码，此时就需要获取表单元素。表单元素通过name属性设置元素名称，为了通过name属性获取表单元素，document对象提供了getElementsByName()方法，该方法的语法格式如下。;下面通过代码演示getElementsByName()方法的使用。;;如果需要根据类名获取元素，可以在页面中为元素设置类名，然后使用document对象提供的getElementsByClassName()方法获取元素，该方法的语法格式如下。;下面通过代码演示getElementsByClassName()方法的使用。;;在DOM中，还可以根据CSS选择器获取元素。document对象提供了querySelector()方法和querySelectorAll()方法获取目标元素，这两个方法的语法格式如下。;在使用querySelector()方法和querySelectorAll()方法时，要注意IE浏览器的兼容问题，这两个方法从IE9才开始被完整支持。;下面通过代码演示querySelector()方法和querySelectorAll()方法的使用。;掌握获取基本结构元素的属性，能够灵活应用获取基本结构元素的属性;6.3.6 获取基本结构元素;6.3.6 获取基本结构元素;6.3.6 获取基本结构元素;;多学一招;事件基础;了解事

您可能关注的文档

文档评论（0）

xiaobao + 关注: 实名认证

内容提供者

该用户很懒，什么也没介绍

咨询Ta 进入空间

1亿VIP精品文档

更多 >

JavaScript+jQuery交互式Web前端开发（第2版）课件第6、7章 DOM（上）（下）.pptx