1.操作DOM
1.1创建元素节点：document.createElement(' ')
var myLi = document.createElement('li')
1.2创建文本节点：documen.createTextNode(' ')
var myStr = document.createTextNode('222222222222222')
2.1增加dom(添加到指定父节点的最后)：父节点.appendChild( )
oUl.appendChild(myLi)
2.2增加dom(添加到指定父节点的最后)：父节点.insertBefore(要插入的新节点，插入到到那个节点前)
oUl.insertBefore(myLi, null)
2.3增加dom(添加到父节点的最前面)：父节点..insertBefore(要插入的新节点，父节点.firstElementChild)
oUl.insertBefore(myLi, oUl.firstElementChild)
3删除dom：父节点.removeChild(要删除的节点)
4修改某一个节点 ：父节点.replaceChild(新的节点，要被修改的节点)
2.克隆DOM
2.1想要负责的节点.cloneNode(参数布尔值)
参数布尔值：false不克隆子节点
true克隆子节点
3.获取元素偏移量
3.1获取元素相对父级:元素.offsetParent
console.log(box2.offsetParent)
3.2获取元素的偏移量：元素.offsetLeft
元素.offsetTop
4.获取元素尺寸与浏览器窗口尺寸
4.1获取元素尺寸（占地面积）
offsetWidth/Height： (实际宽度+padding+border)
clientWidth/height：(实际宽度+padding)
4.2获取浏览器窗口尺寸(计算时 会包含浏览器的滚动条)
window.innerWidth/Height
获取浏览器窗口尺寸(计算时 不会包含浏览器的滚动条)
document.documentElement.clientWidth/Height
5.JS的事件
5.1事件源.on+事件类型=事件处理函数
5.2事件源.addEventListener('事件类型'，事件处理函数)
6.浏览器事件
滚动事件：load
7.鼠标事件
7.1左键单击：click
7.2双击事件：dblclick
7.3右键事件：contextmenu
7.4鼠标按下事件：mousedown
7.5鼠标抬起事件：mouseup
7.6鼠标移入事件：mouseover
7.7鼠标移出事件：mouseout
7.8鼠标移动事件：mousemove
7.9鼠标移入事件：mouseenter
7.10鼠标移出事件：mouseleave
mouseover mouseout 两个方法 移入元素和移入元素子盒子时都会触发
mouseenter mouseleave 两个方法 只会在移入元素时触发
8.键盘事件（针对document或者input)
8.1键盘抬起事件：keyup
8.2键盘按下事件:keydowm
8.3键盘按下抬起事件：keypress
9.表单事件
9.1获取焦点事件：focus
9.2失去焦点事件：blur
9.3文本框内容改变时触发：change
9.4文本框输入内容时触发：input
10.获取鼠标位置
10.1获取相对于事件源的鼠标坐标点：e.offsetX / Y
oDiv.onclick = function (e) {
// 1. 获取 相对于 事件源 的鼠标坐标点
console.log('相对于事件源 X 轴', e.offsetX)
console.log('相对于事件源 Y 轴', e.offsetY)
10.2获取相对于页面的坐标点e.pageX / y
console.log('相对于页面的 X 轴', e.pageX)
console.log('相对于页面的 Y 轴', e.pageY)
10.3获取相对于浏览器窗口的坐标点：e.clientX / Y
console.log('相对于浏览器窗口的 X 轴', e.clientX)
console.log('相对于浏览器窗口的 Y 轴', e.clientY)
11.获取键盘按键
e.key 返回按下的按键
e.keyCode 返回按下的按键的进制码
var inp = document.querySelector('#inp')
inp.onkeyup = function (e) {
console.log(e)
if (e.ctrlKey && e.key == 'a') {
console.log('此时按下了 ctrl健 和 a键')
}
}
