前端应该遵循的两大原则
1. 平稳退化
2. 渐进增强
平稳退化
1. 考虑低版本浏览器对JS DOM的不支持 一星
2. 考虑低版本浏览器对HTML5 CSS3新功能的不支持 三星
3. 如果前后端分离,如果后端服务宕机,前端可以展示基本的设计 五星
渐进增强
优先级:视图>样式>行为
视图:依据设计图,设想出页面基本的结构化元素
样式:完善页面,使之与设计图样式一致
行为:完成用户的所需交互,页面活性化
高级:不同客户端的兼容,一般来所,PC Web Browser > Ipad > Iphone
性能优化
1. 尽可能少访问DOM和尽量减少标记
2. 脚本合并与压缩[xxx.min.js]
3. 尽可能减少资源请求数量
JS DOM 编程
DOM是什么?
全程: 文档对象模型(document object model)
解析:
D html标签组成的文档
O js中的对象可分为三种:用户定义对象(user-defined object); 内建对象:Math,Array,Date等;宿主对象:window等
M 节点树模型
引申关键词:节点
分为三种:元素节点,文本节点以及属性节点
<!-- <div id="doc">文本段</div> -->
元素节点“div”
文本节点“文本段”
属性节点“id='doc'”
DOM常用功能
1. 获取元素 getElementById getElementsByClassName getElementsByTagName childNodes
2. 添加元素 appendChild
3. 编辑元素 getAttribute setAttribute
4. 删除元素 removeChild