WebApi

属性操作

返回指定属性值	element.getAttribute(‘属性’)
获取指定属性节点值	element.getAttributeNode(‘属性’)
设置属性值	element.setAttribute(‘属性’, ‘值’)
移除属性	element.removeAttribute(‘属性’)

节点

返回最近的一个父节点	parentNode
返回所有子节点	parentNode .childNode
返回所有子元素	parentNode .child
返回第一个子节点	parentNode .firstChild
返回最后一个子节点	parentNode .lastChild
返回第一个子元素	parentNode .firstElementChild	兼容性问题 IE9才支持
返回最后一个子元素	parentNode .lastElementChild	兼容性问题 IE9才支持

兄弟节点

返回下一个兄弟节点	node.nextSilbling
返回上一个兄弟节点	node.previouSibing
返回下一个兄弟元素节点	node.nextElementSilbling	兼容性问题 IE9才支持
返回上一个兄弟元素节点	node.previouElementSilbling	兼容性问题 IE9才支持

节点操作

创建元素节点	document.createElement()
创建文本节点	document.createTextNode()
插件属性节点	document.createAttribute()
添加到节点列表末	node.appendChild(child)
添加指定节点前	node.insertBefore(child,指定元素)
删除一个子节点	node.removeChild()	返回删除的节点
克隆节点,返回节点的一个副本	node.cloneNode()	,false浅拷贝,true深拷贝

事件

事件注册

addEventListener()事件监听（IE9以后支持）

eventTarget.addEventListener(type,listener[,useCapture])

type:事件类型,不带on
listener:事件处理函数
useCapture:可选参数,布尔值 ,true为在捕捉阶段调用,false为在冒泡阶段

attacheEvent()事件监听（IE678支持）

eventTarget.attachEvent(eventNameWithOn,callback)

eventNameWithOn:事件类型,带on
callback:事件处理函数

删除事件

eventTarget.removeEventListener(type,listener[,useCapture])

eventTarget.detachEvent(eventNameWithOn,callback)

Dom事件流

js代码只能执行冒泡和捕捉其中的一种
onclick 和 attchEvent 只能得到冒泡阶段
有些事情是没有冒泡阶段的,比如onblur,onfocus,onmouseenter,onmouseleave

自定义事件

1. 使用Event对象

let item=document.getElementById('item');
// 通过Event定义一个自定义的事件名
let et=new Event('tip');
 // 通过addEventListener给该事件添加回调函数
 item.addEventListener('tip',function(event){
   console.log(event)
   console.log(et)
    });
   // 将其派发到一个指定的目标
   item.dispatchEvent(et);

2. 使用CustomEvent

<script>
    let item=document.getElementById('item');
    
    //CustomEvent是Event的继承类,可以进行更多的配置
    let et=new CustomEvent('tip',{
    
        //detail中的数据可以在回调函数的event参数中读取到
        detail:{
            msg:'this is event'
        },
        bubbles: true,    //是否冒泡
        cancelable: false //是否触发默认事件
    });
    
    item.addEventListener('tip',function(e){
        console.log(e);
        alert('item=>tip1')
    });
    
    item.onclick=function(){
        item.dispatchEvent(et);
    }

3. 使用createEvent注册事件

let item=document.getElementById('item');
let ev=document.createEvent('HTMLEvents');
ev.initEvent('tip');
item.addEventListener('tip',function(){
    alert('tip')
});
item.dispatchEvent(ev);

首先通过createEvent创建一个新的事件对象，参数有以下几个（一般使用HTMLEvents）

参数	事件接口	初始化方法
HTMLEvents	HTMLEvent	initEvent()
MouseEvents	MouseEvent	initMouseEvent()
UIEvents	UIEvent	initUIEvent()

使用了createEvent之后，需要对事件初始化initEvent() (不同的参数对应不同的初始化方法)

initEvent(eventName,canBubble, preventDefault)三个参数，
分别是事件名称，是否冒泡，是否阻止默认操作

之后就可以通过addEventListener添加事件回调和dispatchEvent触发事件了

事件对象的属性和方法

e.target	返回触发事件的对象
e.srcElement	返回触发事件的对象 IE6~8
e.type	返回事件的类型,比如click不带on
e.cancelBubble	阻止冒泡 IE6~8使用
e.stopPropagation	阻止冒泡 标准
e.returnValue	阻止默认行为,也可以使用return false
e.preventDefault()	阻止默认事件

常用鼠标事件

鼠标点击左键触发	onclick
鼠标经过触发	onmouseover
鼠标经过触发,不冒泡	mouseenter
鼠标离开触发	onmouseout
鼠标离开触发,不冒泡	mouseleave
获取鼠标焦点触发	onfocus
失去鼠标焦点	onblur
鼠标移动触发	onmousemove
鼠标弹起触发	onmouseup
鼠标按下触发	onmousedown

鼠标事件对象

e.clientX	相对浏览器窗口可视区的X坐标
e.clientY	相对浏览器窗口可视区的Y坐标
e.pageX	相对于文档页面的X坐标,IE9支持
e.pageY	相对于文档页面的Y坐标,IE9支持
e.screenX	相对于电脑屏幕的X坐标
e.screenY	相对于电脑屏幕的Y坐标

元素偏移量

element.offsetParent	返回该元素带有定位的父级元素,没有就返回body
element.offsetTop	返回元素相对于定位父级元素上方的偏移
element. offsetLeft	返回元素相对于定位父级元素左边框的偏移
element.offsetWidth	返回自身包括padding,border,内容区的宽度
element.offsetHeight	返回自身包括padding,border,内容区的高度

client

element.clientTop	返回元素上边框的大小
element.clientLeft	返回元素左边框的大小
element.clientWidth	返回自身包括padding,内容区的宽度,不包括边框
element.clientHeight	返回自身包括padding,内容区的高度,不包括边框

scroll

element.scrollTop	返回别剪切的上侧距离
element.scrollLeft	返回别剪切的左侧距离
element.scrollWidth	返回自身实际的宽度,不包括边框
element.scrollHeight	返回自身实际的高度,不包括边框

键盘事件

onkeyup	某个键盘按键被松开触发
onkeydown	某个键盘按键被按下触发
onkeypress	某个键盘按键被按下触发,不识别功能键
keyCode	返回该建的ASCII值

location 对象的属性