# 五.dom相关
# 1.路由原理
路由的本质是监听 URL 的变化，然后匹配路由规则，显示相应的页面，并且无需刷新页面
- hash 模式：通过 hashchange 事件来监听 URL 的变化，从而实现页面跳转，而服务端接受到的 URL 永远都没有 hash 后缀
- history 模式：通过popstate（后退）、 pushState 、replaceState 监听url变化;通过 pushState 、replaceState 改变 URL 同样不会引起页面的刷新
- hash 模式只可以更改#后面的内容，history 模式可以通过 API 设置任意的同源 URL
- history 模式可以通过 API 添加任意类型的数据到历史记录中，hash 模式只能更改哈希值，也就是字符串
# 2.TypeScript 的优点
- 编译时的强类型，变成了强类型语言，还是编译成 js，编译的时候可以检验
- 更好的模块化
- 更好的实现面向对象的编程，类、接口、模块
# 3.移动端 300ms 延迟
- 由来：300 毫秒延迟解决的是双击缩放
- 双击缩放，手指在屏幕快速点击两次，safari 浏览器就会将网页缩放原始比列
- 由于用户可以双击缩放或者是滚动操作，当用户点击屏幕一次之后，浏览器并不会判断用户确实要打开这个链接，还是想要进行双击操作
- 因此，safair 浏览器就会等待 300ms,来判断用户是否在次点击屏幕
- 解决方案
- 1.禁止缩放，设置 meta 标签 user-scalable=no
- 2.fastclick.js
- 原理：FastClick 的实现原理是在检查到 touchend 事件的时候，会通过 dom 自定义事件立即发出 click 事件，并把浏览器在 300ms 之后真正 click 事件阻止掉
- fastclick.js 还可以解决穿透问题
# 4.DOM 操作
（1）创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
1
2
3
2
3
（2）添加、移除、替换、插入
appendChild()
removeChild()
replaceChild()
insertBefore() //在已有的子节点前插入一个新的子节点
1
2
3
4
2
3
4
（3）查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)
getElementById() //通过元素Id，唯一性
1
2
3
2
3