2023学年完整公开课版初识DOM与事件

《物联网Web前端开发基础》课程

初识DOM与事件【任务6-4】初识DOM与事件知识储备—DOM对象什么是DOM？知识储备—DOM对象DOM(DocumentObjectModel)称为文档对象模型，是一个表示和处理文档的应用程序接口（API），可用于动态访问、更新文档的内容、结构和样式。DOM将网页中文档的对象关系规划为节点层级，构成它们之间的等级关系，这种各对象间的层次结构被称为节点树。【任务6-4】初识DOM与事件知识储备—DOM对象DOM节点树的特点1234每个节点树有一个根节点。除了根节点，每个节点都有一个父节点。每个节点都可以有许多的子节点。具有相同父节点的节点叫做“兄弟节点”。【任务6-4】初识DOM与事件知识储备—DOM对象（1）获取指定DOM元素JavaScript通过使用节点的属性和方法可以访问指定元素和相关元素，从而得到文档中的各个元素对象。类型方法说明访问指定节点getElementById()获取拥有指定ID的第一个元素对象的引用getElementsByName()获取带有指定名称的元素对象集合getElementsByTagName()获取带有指定标签名的元素对象集合getElementsByClassName()获取指定class的元素对象集合（不支持IE6~8浏览器）【任务6-4】初识DOM与事件知识储备—DOM对象类型属性/方法说明元素内容innerHTML获取或设置元素的HTML内容样式属性className获取或设置元素的class属性style获取或设置元素的style样式属性位置属性offsetWidth、offsetHeight获取或设置元素的宽和高（不含滚动条）scrollWidth、scrollHeight获取或设置元素的完整的宽和高（含滚动条）offsetTop、offsetLeft获取或设置包含滚动条，距离上或左边滚动过的距离scrollTop、scrollLeft获取或设置元素在网页中的坐标属性操作getAttribute()获得元素指定属性的值setAttribute()为元素设置新的属性removeAttribute()为元素删除指定的属性（2）DOM元素属性与内容的操作【任务6-4】初识DOM与事件知识储备—DOM对象（3）DOM元素样式的操作在操作元素属性时，style属性可以修改元素的样式，className属性可以修改元素的类名，通过这两种方法即可完成元素的样式操作。a)style属性每个元素对象都有一个style属性，使用这个属性可以动态调整元素的内嵌样式，从而获得所需要的效果。例如：test.style.width="200px";//设置样式，相当于：#test{width:200px;}【任务6-4】初识DOM与事件知识储备—DOM对象b)className属性元素对象的className属性用于切换元素的类名，或为元素追加类名。例如：test.className="aa";//添加样式，执行后：<divid="test"class="aa">【任务6-4】初识DOM与事件知识储备—事件和事件处理什么是事件？【任务6-4】初识DOM与事件知识储备—事件和事件处理所谓的事件是指用户在访问页面时执行的操作。当浏览器探测到一个事件时，比如，单击鼠标或按键，它可以触发与这个事件相关联的JavaScript对象。【任务6-4】初识DOM与事件知识储备—事件和事件处理事件处理的过程发生事件启动事件处理程序事件处理程序作出反应【任务6-4】初识DOM与事件知识储备—事件处理程序的调用1在JavaScript中调用事件处理