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浏览器兼容实现如下：
区别：
- 创建节点
步骤：创建节点、设置节点属性、插入节点
- 修改节点
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
四、事件
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])
2.取消事件注册
eventTarget.removeEventListener(type,listener,[,useCapture])
或者
3.事件触发
eventTarget.dispatchEvent(type)
浏览器兼容性（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）
事件分类
- 事件代理
http协议
Ajax调用实例
API介绍：
xhr.open(method,url[,async = true]);
xhr.setRequestHeader(header,value);
xhr.send([data = null]);
同源策略：两个页面拥有相同的协议(protocol),端口(port)，和主机(host),那么这两个页面就属于同一个源(origin)
跨域资源访问：不满足同源策略的资源访问，叫跨域资源访问 CORS标准
其他跨域技术：Frame代理，JSONP，Comet，Web Sockets ...
JSONP:json with padding
数据存储
cookie:4KB
storage:5MB
动画
实现方式：gif flash css3 js
音频与视频
多媒体格式兼容性
audio video 共有的HTML属性
src属性是必须的，其他属性可选
