JavaScript_day19

day19内容

js中的DOM操作
Node类型
nodeType 节点类型
9Document类型 1Element类型 3Text类型 8Comment类型
nodeName 节点名称 如果Element类型返回标签的名字
…
parent.appendChild(dom) 追加到父元素的末尾
parent.insertbefore(dom,dom2) 将dom追加到dom2之前
parent.replaceChild(dom,dom2) 使用dom替换dom2
parent.removeChild(dom) 移除dom节点
dom.cloneNode(boolean) 克隆dom节点，参数true代表深复制，复制内部的子节点。默认false，浅复制，只复制节点本身，不复制内部内容
Document类型
document.body body元素
document.body body元素
document.forms form元素
…
document.getElementById(‘id值’) 通过id获取节点
document.getElementsByTagName(‘标签名’) 通过标签名获取节点，返回类数组
document.getElementsByClassName(‘class值’) 通过类名获取节点，返回类数组
document.getElementsByName(‘name值’) 通过name获取节点，返回类数组
document.createElement(‘标签名’) 创建元素节点
Element类型
el.id 可获取可设置id属性
el.src 可获取可设置src属性
…元素标签的属性名
获取属性值
el.src el[‘src’]
el.getAttribute(‘my-src’) 获取自定义属性
设置属性值
el.src=’’ el[‘src’]=’’
el.setAttribute(‘my-src’,‘srcValue’) 设置属性值
移除属性
el.removeAttribute(‘属性名’)
< input type=“radio” checked> 默认选中
移除checked属性，不是默认选中的了
或者将dom.checked = false

DOM事件
绑定或者解绑方式
HTML事件处理程序

DOM0级事件处理程序
var div = document.getElementById(‘one’);
事件绑定
div.onclick = function(event){
event–>事件对象
//做一些事情
}
事件解绑
div.onclick = null;
DOM2级事件处理程序
非IE8及以下
事件绑定
div.addEventListener(‘click’,handle,false);
事件解绑
div.removeEventListener(‘click’,handle,false);
IE8及以下
事件绑定
div.attachEvent(‘onclick’,handle);
事件解绑
div.detachEvent(‘onclick’,handle);
事件对象
event–>事件对象，兼容性问题
一般在事件处理程序的参数。
event||window.event
DOM2级绑定事件的时候，事件对象在事件处理函数的形参那里。DOM0级事件绑定程序，事件对象在event||window.event。
事件对象属性和方法，有兼容性
非IE8及以下
target 事件目标，触发事件的源头
currentTarget 当前处理事件处理程序的目标
preventDefault() 阻止默认行为
stopPropagation() 停止事件冒泡
IE8及以下
srcElement 获取事件目标
returnValue=false 阻止默认行为
cancelBubble=true 停止事件冒泡
处理浏览器的兼容性
事件绑定
el.addEventListener(type,handle)
el.attachEvent(‘on’+type,handle)
el[‘on’+type]= handle;
事件解绑
el.removeEventListener(type,handle)
el.detachEvent(‘on’+type,handle)
el[‘on’+type]= null;
获取事件对象
event||window.event
获取事件目标
event.target||event.srcElement
阻止默认行为
event.preventDefault()
event.returnValue = false
停止冒泡
event.stopPropagation()
event.cancelBubble = true