写好JS的一些原则
- 各司其职：让三件套分离
- 组件封装：让ui组建正确性、扩展性、复用性的以保证
- 过程抽象：应用函数式编程思想
深夜食堂三个版本的优劣
- 版本一：比较复杂，没有动画，让js做了css要做的事情，没有各司其职，改动成本大。
- 版本二：简洁，利用了transtition做了过渡的动画，click切换
- 版本三：只有css和html，没有利用js，代码更高效
轮播图
- HTML：轮播图是一个典型的列表结构，我们可以使用无序列表
<ul>元素来实现 - CSS：绝对定位 重叠，然后使用切换状态修饰符，用transition切换
- JS：切换行为，使用API
api
文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。
文档对象模型 (DOM) 是对HTML文件的另一种展示，通俗地说，一个HTML 文件，我们可以用编辑器以代码的形式展示它，也可以用浏览器以页面的形式展示它，同一份文件通过不同的展示方式，就有了不一样的表现形式。而DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将web页面和脚本或程序语言连接起来，我们可以使用脚本或者程序语言通过DOM 来改变或者控制web页面。
通过对象模型，JavaScript 获得了创建动态 HTML 所需的所有功能：
- JavaScript 可以改变页面中的所有 HTML 元素
- JavaScript 可以改变页面中的所有 HTML 属性
- JavaScript 可以改变页面中所有的 CSS 样式
- JavaScript 可以删除现有的 HTML 元素和属性
- JavaScript 可以添加新的 HTML 元素和属性
- JavaScript 可以对页面中所有现有的 HTML 事件作出反应
- JavaScript 可以在页面中创建新的 HTML 事件
DOM事件
HTML 事件示例：
- 当用户点击鼠标时
- 加载网页时
- 加载图像时
- 当鼠标移到一个元素上时
- 当输入字段改变时
- 提交 HTML 表单时
- 当用户敲击一个键时
