《JavaScript程序设计》课件——项目5-1 DOM简介和获取.pptx

JavaScript程序设计2021

1课程导入2任务导入3知识讲解4任务实施项目5-1DOM简介和获取5任务总结

知识回顾任务导入知识讲解任务实施任务总结数组对象怎么实例化？字符串对象怎么实例化？提问

知识回顾任务导入知识讲解任务实施任务总结任务重难点练习获取元素重点：WebAPIDOM树获取元素

知识回顾任务导入知识讲解任务实施任务总结WebAPI简介1.WebAPI简介WebAPI是浏览器提供的一套操作浏览器功能和页面元素的接口。JavaScript语言由3部分组成，分别是ECMAScript、BOM和DOM，其中ECMAScript是JavaScript语言的核心，而WebAPI包括BOM和DOM两部分。1.1初识WebAPIJavaScript的组成部分

知识回顾任务导入知识讲解任务实施任务总结WebAPI简介API：应用程序编程接口，是一些预先定义的函数，这些函数是由某个软件开放给开发人员使用的，帮助开发者实现某种功能，开发人员无须访问源码、无须理解其内部工作机制细节，只需知道如何使用即可。例如，调起手机的摄像头拍摄画面。1.2WebAPI与API的关系

知识回顾任务导入知识讲解任务实施任务总结WebAPI简介WebAPI：主要针对浏览器的API，在JavaScript语言中被封装成了对象，通过调用对象的属性和方法就可以使用WebAPI。例如，console对象、document对象、window对象。document.title=设置新标题; //设置页面标题console.log(document.title); //获取页面标题document.write(h1网页内容/h1);//将字符串写入页面示例代码

知识回顾任务导入知识讲解任务实施任务总结DOM简介2.1什么是DOMDOM：文档对象模型，是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。W3C定义了一系列的DOM接口，利用DOM可完成对HTML文档内所有元素的获取、访问、标签属性和样式的设置等操作。在实际开发中，诸如改变盒子的大小、标签栏的切换、购物车功能等带有交互效果的页面，都离不开DOM。2.DOM简介

知识回顾任务导入知识讲解任务实施任务总结DOM简介2.2DOM树DOM中将HTML文档视为树结构，被称之为文档树模型，把文档映射成树形结构，通过节点对象对其处理，处理的结果可以加入到当前的页面。DOM树

知识回顾任务导入知识讲解任务实施任务总结DOM简介接下来针对DOM中各节点的专有名词解释如下：文档（document）：可以把一个页面当成一个文档元素（element）：页面中的所有标签都是元素节点（node）：网页中的所有内容，在文档树中都是节点（如：元素节点、属性节点、文本节点、注释节点等），在DOM中会把所有的节点都看作是对象，这些对象拥有自己的属性和方法

知识回顾任务导入知识讲解任务实施任务总结获取元素3.1根据id获取元素document.getElementById(id)方法，是由document对象提供的用于查找元素的方法，该方法返回的是拥有指定id的元素，如果没有找到指定id的元素则返回null，如果存在多个指定id的元素则返回undefined。divid=box你好/divscriptvarObox=document.getElementById(box);console.log(Obox); //结果为：divid=box你好/script示例代码3.获取元素

知识回顾任务导入知识讲解任务实施任务总结获取元素3.2根据标签获取元素根据标签名获取元素的两种方式：可以通过document对象获取元素和通过element对象获取元素。document.getElementsByTagName(标签名);element.getElementsByTagName(标签名);语法结构由于相同标签名的元素可能有多个，上述方法返回的不是单个元素对象，而是一个集合。这个集合是一个类数组对象，或称为伪数组，它可以像数组一样用索引来访问元素，但不能使用push()等方法，使用Array.isArray()也可以证明它不是一个数组。

知识回顾任务导入知识讲解任务实施任务总结获取元素注意getElementsByTagName()方法获取到的集合是动态集合，也就是说，当页面增加了标签，这个集合中也会自动增加元素。

知识回顾任务导入知识讲解任务实施任务总结获取元素3.3根据name获取元素document.getElementsByName()方法，是通过name属