回顾《Javascript DOM 编程艺术》之总结

前端应该遵循的两大原则

  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