DOM编程艺术

DOM(Document Object Model)文档对象模型
DOM就是HTML对象的表示
DOM是一系列API的规范
通过js来调用这些API操作DOM
DOM包含

• DOM Core
• DOM HTML
• DOM Style
• DOM Event

DOM 树

一、DOM节点操作：通过JS来修改html

• 获取节点

  getElementById
  getElementsByTagName
  getElementsByClassName
  querySelector/All

getElementsByClassName浏览器兼容实现如下：

屏幕快照 2016-08-20 下午5.09.30.png

区别：

屏幕快照 2016-08-20 下午5.20.22.png

• 创建节点

  步骤：创建节点、设置节点属性、插入节点

• 修改节点

  textContent:节点及其后代节点的文本内容(IE9不支持)
  innerText:（firefox不支持）
  兼容代码:
  if(!('innerText' in document.body)){
      HTMLElement.prototype._defineGetter_("innerText",function(){
        return this.textContent;
      });
      HTMLElement.prototype._defineSetter_("innerText",function(s){
        return this.textContent = s;
      });
  }

• 插入节点

   appendChild:在指定元素的最末尾追加元素
   element.appendChilid(achild);
   insertBefore:在指定元素的子节点前面插入一个节点

• 删除节点

  removeChild():删除指定的子元素
  var user = users.getElementsByClassName('user')[1];
  user.parentNode.removeChild(user);

• innerHTML

  节点的HTML内容（建议仅用于新节点）
  可能导致：内存泄露、 安全问题

二、属性操作

每个html属性对应相应的DOM对象属性

• property accessor
  属性访问器 用来读取属性
  input.className
  input['id']
  input.value='www.baidu.com';
  input.disabled=true;

• getAttribute/setAttribute
  getAttribute(属性名);
  setAttribute(属性名，属性值);
  属性名和属性值都是字符串类型

• dataset
  HTML元素上面的一个属性
  HTMLElement.dataset
  data-*属性集
  元素上保存数据

三、样式操作

  样式表 element.sheet.cssRules[1].style
             element.sheet.cssRules[1].style.lineHeight
             element.sheet.cssRules[1].selectorText
  内嵌样式  element.style.color
                 element.style.cssText 可设置多个
  更新class
  更换样式表：一次更新很多元素的样式
  获取元素实际样式：window.getComputeStyle(element[,pseudoElt]);（ie9以下不支持）

ie9使用element.currentStyle

屏幕快照 2016-08-23 下午5.01.43.png

四、事件

DOM事件

• 事件流
  就是DOM事件的处理执行过程
  
  

  屏幕快照 2016-08-23 下午5.06.36.png
  
  过程：
  1.capture phase
  从DOM树的最顶端开始向下捕获，知道捕获到触发这个事件的父元素
  
  

  屏幕快照 2016-08-23 下午5.10.15.png
  
  2.target phase
  事件触发过程
  
  

  屏幕快照 2016-08-23 下午5.10.39.png
  
  3.bubble phase
  冒泡过程是从当前节点的父节点的开始冒泡到顶层的window对象
  
  

  屏幕快照 2016-08-23 下午5.11.06.png

ie低版本没有事件捕获过程
有些事件没有冒泡过程（如页面load）

• 事件注册
  1.事件注册
  eventTarget.addEventListener(type,listener,[,useCapture])

屏幕快照 2016-08-23 下午5.28.29.png

2.取消事件注册
eventTarget.removeEventListener(type,listener,[,useCapture])

屏幕快照 2016-08-23 下午5.30.13.png

或者

屏幕快照 2016-08-23 下午5.30.53.png

3.事件触发
eventTarget.dispatchEvent(type)

屏幕快照 2016-08-23 下午5.32.40.png

       浏览器兼容性（IE6、7、8）
       事件注册与取消
        attchEvent/detachEvent
       事件触发
         fireEvent(e)
       no capture

• 事件对象
  事件的属性和方法
  IE的低版本需要做兼容：event = event||window.event;
  1.属性

  • type
  • target(srcElement)
  • currentTarget
    2.方法
  • event.stopPropagation() 阻止事件传播（w3c）
  • event.cancelBubble = true 阻止事件传播 (IE低版本)
  • event.stopImmediatePropagation() 阻止事件传播且阻止了当前节点的后续事件
  • event.preventDefault() 阻止默认行为（w3c）
  • event.returnValue=false 阻止默认行为(IE低版本)
    （w3c）

• 事件分类

屏幕快照 2016-08-23 下午5.52.42.png

屏幕快照 2016-08-23 下午10.02.38.png

• 事件代理

http协议

屏幕快照 2016-08-24 下午3.35.50.png

Ajax调用实例

屏幕快照 2016-08-24 下午3.43.26.png

API介绍：
xhr.open(method,url[,async = true]);
xhr.setRequestHeader(header,value);
xhr.send([data = null]);
同源策略：两个页面拥有相同的协议(protocol),端口(port)，和主机(host),那么这两个页面就属于同一个源(origin)
跨域资源访问：不满足同源策略的资源访问，叫跨域资源访问 CORS标准

屏幕快照 2016-08-24 下午4.05.50.png

其他跨域技术：Frame代理，JSONP，Comet，Web Sockets ...
JSONP:json with padding

数据存储
cookie:4KB
storage:5MB

动画
实现方式：gif flash css3 js
音频与视频
多媒体格式兼容性

屏幕快照 2016-08-24 下午5.26.44.png

audio video 共有的HTML属性
src属性是必须的，其他属性可选

屏幕快照 2016-08-24 下午5.27.21.png