js-dom 操作

1. dom.classList //类名操作
      add , contains ,remove ,replace , toggle , entries
2. dom 的 id 默认会被声明为全局变量，可以在 js 中直接访问
   id 或 domcument.id 
3. dom 的宽高左右距离的 api (offsetLeft, clientWidth)的区别
4. onclick=function(){} 等价于 window.onclick=function(){}
5.window.onload 和 domcument.onContentLoaded ,Jquery(document).ready()
  (1)window.onload 
     多个只会执行最后一个,
     **会等待 <script src=js> js 资源和执行完**（暂时打个疑问，
     参考https://blog.csdn.net/automation13/article/details/79916779），
     以及 img 等图片资源加载完后，触发onload 事件
  (2)document.onContentLoaded 只等 dom 结构加载完就执行
  (3)$(document).ready 只等 dom 结构加载完就执行
6.html5存储
前端缓存分为 http 缓存（服务端设置）和浏览器缓存
浏览器缓存：
  (1)localStorage 
    getItem
    setItem
    removeItem
    localStorage['xx']=12
    clear()
    .length
    性能：尽量减少 item 的读取次数
    事件 storage
  (2)webStorage //会话级 //2-5m 大小，只能存字符串
    ！！刷新页面并不能使sessionStorage 失效，关闭标签（关闭网页）会失效
    ！！相同 url 不同标签不能共享 sessionStorage 
    其他同 localStorage
  (3)indexDB //存储大小250m (缓存大量数据时)
    创建数据库和表
    var request = indexDB.open(数据库名，版本号) //开启数据库连接
    request.onsuccess=function(e){
    
    }
    request.onupgradeneeded=function(e){ //监听数据库版本改变事件
       var db=e.target.result
    }
    tb = indexDB.createObjectStore(表名,{
      keyPath, //主键
      autoIncrement //是否自增
    }) //创建表(表名和主键)
    tb.createIndex(name,name,{unique}) //索引
    事物：transaction ，一个事物做的所有操作可以看成一个整体，如果一部分失败则回滚之前的操作，回到事物操作之前的状态； transaction 方法有两个参数（1.规定事物作用域，2规定事物的模式（只读、可写））
    var transaction=db.transaction(['customers'],'readwrite') //声明一个事物对该作用域内数据库进行操作
    var tb=transaction.objectStore('customers')
    
    var add=tb.add({name,email,ssn}) //增加数据
    add.onsucess=function(e){}
    
    var delete=tb.delete(125) //删除数据
    delete.onsuccess=function(e){}
    
    var get=tb.get(123).onsuccess=function(e){ this.result} //获取数据
    
    tb.onpenCursor().onsuccess=function(e){ //遍历库中所有数据
      cursor=e.target.result
      cursor.value 
      cursor.continue()
    }    
    
    tb.getAll().onsuccess=function(e){}
    
    var index=tb.index('name')
    index.get('xx').onsuccess=function(e){} //索引获取数据
    
  (4)serviceWorker (静态页面缓存)(仅仅在 https 和 localhost 课用)
    service worker 是一段脚本，在后台运行。作为一个独立的线程，不会对页面造成阻塞，相当于客户端和服务端终端的代理，缓存后可实现离线访问静态页面，适合缓存静态文件；service worker 运行在 worker 上下文，因此他不能访问 dom
    // 首先注册 serviceworker， 参数为一个 js 文件
    serviceWorker.register('./sw.js')
    //安装 serviceworker 并缓存列表文件
    slef.addEventListener('install',function(e){
       e.waitUntil（
         caches.open(cacheStorageKey).then(function(cache)){
           return cache.addAll(cacheList)
         }).then(function(){
           return self.skipWaiting()
         })
       ）
    })
    
    //更新事件，当版本更新时重新缓存列表文件
    self.addEventListener('active',function(e){
        e.waitUntil(
            Promise.all(
                caches.keys().then(cacheNames=>{
                    return cachNames.map(name=>{
                        if(name!==cacheStorageKey){
                            return caches.delete(name)
                        }
                    })
                })
            ).then(()=>{
                return self.clients.claim()
            })
        )
    })
    
    // 监听请求并返回
    self.addEventListener('fetch', function(e) {
      e.respondWith(
        caches.match(e.request).then(function(response) {
          if (response != null) {
            return response
          }
          return fetch(e.request.url)
        })
      )
    })
7.设置 style 样式
  dom.style.cssText=''
  dom.setAttribute('style','')