《移动应用设计与开发-前端开发》课件-7 DOM对象_第1页
《移动应用设计与开发-前端开发》课件-7 DOM对象_第2页
《移动应用设计与开发-前端开发》课件-7 DOM对象_第3页
《移动应用设计与开发-前端开发》课件-7 DOM对象_第4页
《移动应用设计与开发-前端开发》课件-7 DOM对象_第5页
已阅读5页，还剩64页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

JavaScript脚本语言--DOM对象目录7.2获取元素7.1DOM对象简介7.4操作元素属性、样式7.3操作元素内容7.6简易评论框7.5DOM节点操作JavaScript脚本语言--7.1DOM对象简介DOM对象简介导入讲解演练总结实践JavaScriptECMAScriptBOMDOMJavaScript的组成1.什么是DOM？DOM对象简介导入讲解演练总结实践1.什么是DOMDOM:DocumentObjectModel文档对象模型缩写。

是一套规范文档内容的通用型标准。DOM是HTML页面的模型，将每一个标签都作为一个对象，JavaScript通过调用DOM中的属性，方法就可以对网页中的文本框，层等元素进行编程控制。通过DOM可以动态改变网页的内容、结构和样式。DOM对象简介导入讲解演练总结实践DOMHTML指的是DOM中为操作HTML文档提供的属性和方法。

文档（Document）表示HTML文件。

文档中的标签称为元素（Element）。

文档中的所有内容称为节点（Node）。因此，一个HTML文件可以看作是所有元素组成的一个节点树，各元素节点之间有级别的划分。2.DOMHTML节点树DOM对象简介导入讲解演练总结实践HTML文档根据节点作用，分为标签节点、文本节点、属性节点和注释节点。根据各节点之间的层级关系，又可分为以下几个方面：根节点：<html>标签是整个文档的根节点，有且仅由一个。子节点：指的是某一个节点的下级节点。父节点：指的是某一个节点的上级节点。兄弟节点：两个节点同属于一个父节点。2.DOMHTML节点类型DOM对象简介导入讲解演练总结实践任务描述：根据这一段html代码，画出该html页面的DOM结构图。<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>测试</title></head><body><ahref="#">链接</a><p>段落...</p></body></html>DOM对象简介导入讲解演练总结实践

根据DOM模型，HTML文档中的所有节点组成了一个文档树（或节点树）。HTML文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点，并由此继续伸出枝条，直到处于这棵树最低级别的所有文本节点为止。任务分析：DOM对象简介导入讲解演练总结实践任务实现：DOM结构图。DOM对象简介导入讲解演练总结实践

varparent=test.parentNode;//父节点varchils=test.children;//全部子节点varfirst=test.firstChild;//第一个子节点varlast=test.lastChild;//最后一个子节点varprevious=test.previousSibling;//上一个兄弟节点varnext=test.nextSibling;//下一个兄弟节点2.DOMHTML节点树DOM对象简介导入讲解演练总结实践

varparent=test.parentElement;//父节点元素varfirst=test.firstElementChild;//第一个子节点元素varlast=test.lastElementChild;//最后一个子节点元素varprevious=test.previousElementSibling;//上一个兄弟节点元素varnext=test.nextElementSibling;//下一个兄弟节点元素2.DOMHTML节点树打开HbuliderDOM对象简介导入讲解演练总结实践

内容小结重点：了解DOM对象对策一DOM对象简介导入讲解演练总结实践课后练习使用元素节点，获取页面元素，修改元素属性。JavaScript脚本语言--获取元素获取元素导入讲解演练总结实践如何通过JavaScript找到相应的按钮，设置相应的样式呢？获取元素导入讲解演练总结实践获取操作的元素可以利用document对象提供的方法和属性获取操作的元素可以利用Elment对象提供的方法获取。document对象的方法和属性Element对象的方法和属性获取元素导入讲解演练总结实践document对象提供了一些用于查找元素的方法，利用这些方法可以根据元素的id、name和class属性以及标签名称的方式获取操作的元素。方法说明document.getElementById()返回对拥有指定id的第一个对象的引用document.getElementsByName()返回带有指定名称的对象集合document.getElementsByTagName()返回带有指定标签名的对象集合document.getElementsByClassName()返回带有指定类名的对象集合（不支持IE6~8）1.获取操作的元素——document对象的方法打开Hbulider获取元素导入讲解演练总结实践注意除了document.getElementById()方法返回的是拥有指定id的元素外，其他方法返回的都是符合要求的一个集合。若要获取其中一个对象，可以通过下标的方式获取，默认从0开始。获取元素导入讲解演练总结实践document对象提供一些属性，可用于获取文档中的元素。例如，获取所有表单标签、图片标签等。属性说明document.body返回文档的body元素document.documentElement返回文档的html元素document.forms返回对文档中所有Form对象引用document.images返回对文档中所有Image对象引用获取操作的元素——document对象的属性获取元素导入讲解演练总结实践获取操作的元素——document对象的属性document对象的body属性用于返回body元素。document对象的documentElement属性用于返回HTML文档的根节点html元素。获取元素导入讲解演练总结实践获取操作的元素——document对象的属性值得一提通过document对象的方法与document对象的属性获取的操作元素表示的都是同一对象。如document.getElementsByTagName(‘body’)[0]与document.body全等。获取元素导入讲解演练总结实践多学一招HTML5中为更方便获取操作的元素，为document对象新增了两个方法，分别为querySelector()和querySelectorAll()。

querySelector()方法用于返回文档中匹配到指定的元素或CSS选择器的第一个对象的引用。

querySelectorAll()方法用于返回文档中匹配到指定的元素或CSS选择器的对象集合。3.获取操作的元素——HTML5新增的document对象方法获取元素导入讲解演练总结实践console.log(document.querySelector('div'));//获取匹配到的第1个divconsole.log(document.querySelector('#box'));//获取id为box的第1个divconsole.log(document.querySelector('.bar'));//获取class为bar的第1个divconsole.log(document.querySelector('div[name]'));//获取含有name属性的第1个divconsole.log(document.querySelector('div.bar'));//获取文档中class为bar的第1个divconsole.log(document.querySelector('div#box'));//获取文档中id为box的第1个div示例讲解获取元素导入讲解演练总结实践获取元素导入讲解演练总结实践4.获取操作的元素——Element对象的方法在DOM操作中，元素对象也提供了获取某个元素内指定元素的方法，常用的方法为getElementsByClassName()和getElementsByTagName()。它们的使用方式与document对象中同名方法相同。document对象的方法getElementById()getElementsByName()getElementsByTagName()getElementsByClassName()document对象的属性HTML5新增的document的方法获取元素导入讲解演练总结实践Element对象的方法获取操作的元素bodydocumentElementformsimagesquerySelector()querySelectorAll()getElementsByTagName()getElementsByClassName()获取元素导入讲解演练总结实践

内容小结重点：掌握获取元素的方式对策一获取元素导入讲解演练总结实践课后练习实践操作各种获取元素的方式，感受区别。JavaScript脚本语言--操作元素内容操作元素的内容导入讲解演练总结实践按钮，文字，图片的内容，样式，如何改变呢？导入讲解演练总结实践内容操作元素的内容操作元素的内容属性样式导入讲解演练总结实践元素内容操作元素的内容若要对获取的元素内容进行操作，则可以利用DOM提供的属性和方法实现分类名称说明属性innerHTML设置或返回元素开始和结束标签之间的HTMLinnerText设置或返回元素中去除所有标签的纯文本内容textContent设置或者返回指定节点的文本内容，保留空格和换行方法document.write()向文档写入指定的内容document.writeln()向文档写入指定的内容后并换行说明：属性属于Elment对象，方法属于document对象。导入讲解演练总结实践元素内容操作元素的内容注意innerText属性在使用时可能会出现浏览器兼容的问题。因此，推荐在开发时尽可能的使用innerHTML获取或设置元素的文本内容。innerHTML属性作用于指定的元素，document.write()是重构整个HTML文档页面。导入讲解演练总结实践元素内容操作元素的内容打开hbuilder操作元素的内容导入讲解演练总结实践

内容小结重点：掌握操作元素内容的方法innerText，innerHTML，textContent对策一操作元素的内容导入讲解演练总结实践课后练习获取元素的内容，设置元素的内容。JavaScript脚本语言--操作元素属性、样式操作元素的属性样式导入讲解演练总结实践按钮，文字，图片的内容，样式，如何改变呢？导入讲解演练总结实践内容操作元素的属性样式操作元素的属性样式属性样式导入讲解演练总结实践1.元素属性操作元素的属性样式分类名称说明属性attributes返回一个元素的属性集合利用attributes属性可以获取一个HTML元素的所有属性，以及所有属性的个数length。导入讲解演练总结实践1.元素属性操作元素的属性样式setAttribute（）getAttribute(）removeAttribute(）方法可以设置，获取，删除元素的属性分类名称说明方法setAttribute(name,value)设置或者改变指定属性的值getAttribute(name)返回指定元素的属性值removeAttribute(name)从元素中删除指定的属性导入讲解演练总结实践1.元素属性操作元素的属性样式元素属性语法：元素.属性名称。举例：获取/设置input控件的value属性，可以使用“元素.value”。如：获取图片的src属性：元素.src设置图片的src属性：元素.src=“图片路径”打开hbuilder导入讲解演练总结实践2.设置元素样式操作元素的属性样式元素样式语法：元素.style.属性名称。要求：需要去掉CSS样式名里的中横线“-”，并将第二个英文首字母大写。举例：设置背景颜色的background-color，在style属性操作中，需要修改为backgroundColor。导入讲解演练总结实践2.获取元素样式操作元素的属性样式获取元素属性：currentStyle

语法：元素.currentStyle.样式名注意：这个只有IE支持，其他浏览器都不支持。

如：console.log(oimg.currentStyle.width);“元素.style.样式”只能获取到内联样式的值，就是style写在元素里面的值，不能获取嵌入式和外联样式的值。导入讲解演练总结实践2.获取元素样式操作元素的属性样式获取元素样式属性getComputedStyle()

：

在其他浏览器中可以使用getComputedStyle()方法。返回一个对象，对象中封装了当前元素对应的样式可以通过“对象.样式名”来读取样式如：getComputedStyle(oimg).width可以获取oimg对象的width属性打开hbuilder导入讲解演练总结实践2.元素样式操作元素的属性样式注意CSS中的float样式与JavaScript的保留字冲突，在解决方案上不同的浏览器存在分歧。例如IE9~11、Chrome、FireFox可以使用“float”和“cssFloat”，Safari浏览器使用“float”，IE6~8则使用“styleFloat”。操作元素的属性样式导入讲解演练总结实践

内容小结重点：掌握操作元素属性样式的方法元素属性元素样式元素.属性名getAttribute(属性名)setAttribute(属性名,属性值）元素.style.属性名currentStyle属性getComputedStyle()对策一导入讲解演练总结实践课后练习操作元素的属性样式案例效果：案例说明：点击“眼睛”按钮将密码框转换为文本框，并可以查看密码明文一个按钮两个状态，点击一次，切换为文本框，继续点击，切换为密码框JavaScript脚本语言--DOM节点操作DOM节点操作导入讲解演练总结实践HTML文档可以看做是一个节点树，能否利用操作节点的方式操作HTML中的元素？导入讲解演练总结实践节点操作获取节点追加节点DOM节点操作删除节点创建节点DOM节点操作导入讲解演练总结实践1.DOM节点操作—获取节点属性说明firstChild访问当前节点的首个子节点lastChild访问当前节点的最后一个子节点parentNode访问当前元素节点的父节点childNodes访问当前元素节点的所有子节点的集合nextSibiling返回同一树层级中指定节点之后紧跟的节点previousSibling返回同一树层级中指定节点的前一个节点DOM节点操作导入讲解演练总结实践1.DOM节点操作—获取元素节点属性说明firstElementChild访问当前节点的首个子节点元素lastElementChile访问当前节点的最后一个子节点元素parentElement访问当前元素节点的父节点元素nextElementSibling下一个兄弟节点元素previousElementSibling上一个兄弟节点元素DOM节点操作导入讲解演练总结实践1.DOM节点操作—获取节点与获取元素节点区别引用“简书”中的一段说明：firstChild一派返回全部元素，包括空格以及元素等。firstElementChild这一派比较高冷，它看不起文本和注释这点“小钱”，所以如果父元素下的子元素不存在其他element元素，而是文本元素或注释，他则会报错。----来源于“简书”DOM节点操作导入讲解演练总结实践1.DOM节点操作—获取元素注意childNodes属性在IE6~8不会获取文本节点，在IE9及以上版本和主流浏览器中则可以获取文本节点。DOM节点操作导入讲解演练总结实践1.DOM节点操作—获取节点DOM节点操作导入讲解演练总结实践2.DOM节点操作—创建节点方法说明document.createElement()创建元素节点document.createTextNode()创建文本节点document.createAttribute()创建属性节

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论