WY-DOM编程

DOM

---

Document Object Model

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

节点相关

---

获取节点

获取节点 方法比较

修改节点

• textContent
• innerText ( 有兼容问题 )

element.textContent 节点及其后代节点的文本内容

代码

 users.textContent;

结果

user_last.textContent; //Kash
user_last.textContent = " Tom "; //设置 

ie9以下不支持

element.innerText 节点及其后代节点的文本内容

与 textContent 用法一样。但，innerText 不规范，ff不支持

兼容方案

 if( !('innerText' in document.body) ){
    HTMLElement.prototype.__defineGetter__("innerText",function(){
        return this.textContent;
    })

    HTMLElement.prototype.__defineSetter__("innerText",function(s){
        return this.textContent = s;
    })
}

插入节点

• appendChild
• insertBefore

删除节点 element.removeChild(child)

element.innerHTML

建议仅用于新的节点

• 内存泄露
• 安全问题

HTML attribute -> DOM property

---

HTML属性与DOM对象属性

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

• property accessor
• getAttribute/setAttribute
• dataset
  • HTMLElement.dataset HTML元素列表上的一个属性
  • data-*属性集
  • 元素上保存数据

CSS -> DOM

---

window.getComputedStyle() 获取元素的实际样式

var style = window.getComputedStyle(element [, pseudoElt] );

  

   window.getComputedStyle(element).color;  // " rgb(255,0,0) "

getComputedStyle()

ie9 - 使用element.currentStyle

DOM事件

---

• 事件流
• 事件注册
• 事件对象
• 事件分类
• 事件代理

什么是DOM事件

• 点击一个DOM元素
• 键盘按下一个键
• 输入框输入内容
• 页面加载完成

DOM 事件流

事件流

• capture phase 事件捕获
• target phase 事件触发
• bubble phase 事件冒泡（某些事件是没有冒泡的，比较页面的load）

事件注册与触发

• 事件注册
• 取消事件注册
• 事件触发

事件注册

eventTarget.addEventListener(type, listener [, useCapture])
最后一个参数 默认是false, 表示获取冒泡过程； true,为获取捕获过程

addEventListener

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

事件触发
eventTarget.dispatchEvent(type)

 elem.dispatchEvent('click')

浏览器兼容（IE6、7、8）

• 事件注册与取消
  • attchEvent/detachEvent
• 事件触发
  • fireEvent(e)
• no capture (没有捕获阶段)

兼容代码：

事件兼容代码.png

事件对象

• 属性
  • type
  • target(srcElement)
  • currentTarget
• 方法
  • stopPropagation 阻止冒泡
  • preventDefault 阻止默认
  • stopImmediatePropagation 也是阻止冒泡，与第一个有区别

阻止事件传播

• event.stopPropagation() (w3c)
• event.cancelBubble = true (IE)
• event.stopImmediatePropagation() ( w3c )
  • 做了第一件事： event.stopPropagation() 阻止事件传播到父节点
  • 第二件事：阻止当前节点的后续事件（一个元素注册多个事件的时候）

默认行为

• event.preventDefault() ( w3c )
• event.returnValue = false ( IE )

事件分类

---

事件分类

** Event **

Event事件

window

• load 页面加载完成
• unload 例如点击链接跳转新页面。当前页面会先卸载触发unload事件
• error 浏览器出现异常时
• abort 出现取消时

Image

• load
• error
• abort

常用做法:图片加载错误时，加载默认图片

UIEvent

• resize
• scroll

UIEvent

MouseEvent

MouseEvent

MouseEvent对象

• 属性
  • clientX, clientY 鼠标的位置到页面的最左端，最上端
  • screenX , screenY 鼠标到屏幕的最左端，最上端
  • ctrlKey, shiftKey, altKey, metaKey true/false
  • buttom(0,1,2) 鼠标 左键、中间键、右键

MouseEvent顺序

• 从元素A上方移过

  • mousemove -> mouseover(A) -> mouseenter (A) -> mousemove (A) -> mouseout (A) -> mouseleave (A)

• 点击元素

  • mousedown -> [mousemove] -> mouseup -> click

例子 - 拖拽div

• HTML
  
• CSS
• JS

wheelEvent 滚轮事件

Paste_Image.png

FocusEvent 获得、失去焦点

FocusEvent

FocusEvent

• 属性
  • relatedTarget 一个元素失去焦点，另外一个元素获得焦点（relatedTarget）

InputEvent

InputEvent

• beforeinput
• input

例如:
在输入框输入内容，当输入页面还没显示内容时（触发beforeinput）
在输入框显示自己输入的内容时，触发input，不断地输入内容，不断地触发input事件。

onpropertychange(IE)

keyboardEvent 键盘事件

键盘事件

• 属性
  • key
  • code
  • ctrlKey、shiftKey、altKey 、metaKey
  • repeat
    用的少：
  • keyCode
  • charCode
  • which

事件代理

---

• 优点

  • 需要管理的handler更少
  • 内存分配更少
  • 增加/删除节点可以不处理事件

• 缺点

  • 事件管理的逻辑更复杂

HTTP

---

HTTP事务

请求发送过程

请求报文格式

报文

常用HTTP方法

方法

URL 构成

URL

常见HTTP状态码

状态码

Ajax

---

ajax调用示例

var xhr = new XMLHttpRequest(); //创建XHR对象

//返回处理数据
xhr.onreadystatechange = function(callback){
    if(xhr.readyState == 4){

        if( (xhr.status >= 200 && xhr.status < 300) || shr.status == 304){
            callback( xhr.responseText )
        } else {
            alert('Request was unsuccessful' + xhr.status)
        }
    }
}
xhr.open('get','example.json',true);
xhr.setRequestHeader('myHeader','myValue');//发送请求
xhr.send(null);

open

open

最后一个参数 默认为true 表示异步请求；

请求参加序列化

function serialize(data){
    if(!data) return ''
    var pairs = []
    for (var name in data) {
        if ( !data.hasOwnProperty(name) ) { continue; };
        if( typeof data[name] == 'function'){ continue; };
        
        var value = data[name].toString()
        name = encodeURIComponent(name);
        value = encodeURIComponent(value);
        pairs.push( name + '=' + value )
    };
    return pairs.join('&');
}

同源策略
两个页面拥有相同的协议（protocol），端口（port）, 和主机（host）, 那么这两个页面就属于同一个源（origin）

同源策略

其他跨域技术

• frame代理
• JSONP
• Comet
• Web Sockets
• ......

Frame代理

frame代理流程图

JSONP

• JSON with padding (填充式json)