-
1 本章教学内容
-
2 教学目标、重难点
教学引入:
通过前面的学习,相信大家已经掌握了JavaScript的基础知识。但是,要想实现网页交互效果,仅仅掌握基础知识是不够的。例如,通过JavaScript改变元素的内容、样式和属性,为元素注册事件,要实现这些功能,都需要用到DOM的相关知识。本章将针对DOM的一些基本知识进行详细讲解。
课程的主要内容及基本要求:
学习单元 | DOM(上) | 课时 | 6 | ||
学习目标 | 1. 熟悉Web API的概念,能够说出Web API的作用 2. 熟悉什么是DOM,能够说出DOM中文档、元素和节点的关系 3. 掌握多种获取元素的方法,能够根据不同场景选择合适的方法获取元素 4. 了解事件的概念,能够说出事件的3个要素 5. 掌握事件的注册,能够为页面中的元素注册事件 6. 掌握操作元素内容的方法,能够根据不同场景选择合适的方法操作元素内容 7. 掌握操作元素样式的方法,能够根据不同场景选择合适的方法操作元素样式 8. 掌握操作元素属性的方法,能够根据不同场景选择合适的方法操作元素属性 | ||||
学习内容 | 知识点 | 学习目标 | 重点 | 难点 | |
Web API简介 | 熟悉 | ||||
DOM简介 | 熟悉 | ||||
根据id属性获取元素 | 掌握 | √ | |||
根据标签名获取元素 | 掌握 | √ | |||
根据name属性获取元素 | 掌握 | ||||
根据类名获取元素 | 掌握 | √ | |||
根据CSS选择器获取元素 | 掌握 | ||||
获取基本结构元素 | 掌握 | ||||
事件概述 | 了解 | ||||
注册事件 | 掌握 | √ | |||
innerHTML | 掌握 | ||||
innerText | 掌握 | ||||
textContent | 掌握 | √ | |||
通过style属性操作样式 | 掌握 | √ | |||
【案例】单击按钮改变按钮颜色 | 掌握 | ||||
通过className属性操作样式 | 掌握 | √ | |||
通过classList属性操作样式 | 掌握 | √ | |||
操作property属性 | 掌握 | √ | |||
操作attribute属性 | 掌握 | √ | |||
【案例】Tab栏切换 | 掌握 | √ | |||
操作data-*属性 | 掌握 | √ | |||
动手实践:显示和隐藏密码 | 掌握 | ||||
本章学习思维导图:


