操作DOM
常规意义上的 操作DOM, 就是增删改查
创建元素节点
语法：document.createElement("元素名")
创建文本节点
语法：document.createTextNode("元素名")
增加DOM（添加到父节点最后）
语法：.appendChild()
增加DOM（添加到父节点最后）
语法：.insertBefore()
如果想要添加到指定位置，括号里需要传前一位指定的子元素
删除DOM
语法：.removeChild(要删除的节点)
修改DOM
语法：.replaceChild(新的节点, 要被修改的节点)
克隆DOM
语法： 想要复制的节点.cloneNode(参数布尔值)
参数false不克隆子节点，参数true克隆子节点
如果不行布尔值默认false
获取元素偏移量
获取元素相对父级
语法：元素.offsetParent
获取元素向左偏移量
语法：元素.offsetLeft
获取元素顶部偏移量
语法：元素.offsetTop
获取元素尺寸
两种方法：
（1）语法：offsetXXX
获取的是实际宽度+padding+border
（2）语法：clientXXX
获取的是实际宽度+padding(不包含border)
获取浏览器尺寸
两种方法
（1）语法：window.innerXXX
计算时会包含浏览器滚动条
（2）语法：document.documentElement.clientXXX
计算时不会计算浏览器滚动条（只计算浏览器可视区域）
js事件
什么是js事件：在某一个时刻, 用户(在页面)做了某一件事, 需要给出的反馈
事件的三要素：1. 事件源 2. 事件类型 3. 事件处理函数
DOM 0级事件绑定：事件源.on + 事件类型 = 事件处理函数
0级事件绑定缺点：无法绑定多个同类型的事件, 后边新写的事件, 会覆盖掉原有的事件
DOM 2级事件绑定(事件监听)，事件源.addEventListener('事件类型', 事件处理函数）
2级事件可以绑定多个类型的事件
鼠标事件
（1）左键单击
语法：.onclick = function () {}
左键单击元素时触发
（2）左键双击
语法：.ondblclick = function () {}
左键双击元素时触发（300ms内连续点击两次）
（3）右键单击
语法：.oncontextmenu = function () {}
右键单击元素是触发
（4）鼠标左键按下时触发
语法：.onmousedown = function () {}
鼠标左键按下元素时触发
（5）鼠标左键抬起时触发
语法：.onmouseup = function () {}
鼠标左键按下元素抬起时触发
（6）鼠标移入事件
语法：.onmouseover = function () {}
鼠标的移动到元素内部时触发
（7）鼠标移出事件
语法：.onmouseout = function () {}
鼠标移动出元素内部时触发
（8）鼠标移动事件
语法：.onmousemove = function () {}
鼠标在元素内部移动时触发
（9）鼠标移入事件2
语法：.onmouseenter = function () {}
鼠标的移动到元素内部时触发的第二种方法
（10）鼠标移出事件2
语法：.onmouseleave = function () {}
鼠标移动出元素内部时触发的第二种方法
onmouseover onmouseout：两个方法移入元素和移入元素子盒子时都会触发
onmouseenter onmouseleave：两个方法只会在移入元素时触发
键盘事件
（1）键盘抬起事件
语法：.onkeyup = function () {}
键盘抬起时触发
（2）键盘按下事件
语法：.onkeydown = function () {}
键盘按下时触发
（3）键盘按下抬起事件
语法：.onkeypress = function () {}
键盘按下抬起时触发
表单事件
（1）获得焦点事件
语法：.onfocus = function () {}
（2）失去焦点事件
语法：.onblur = function () {}
（3）文本框内容改变时触发
语法：.onchange = function () {}
获取鼠标位置
获取鼠标按下时的坐标
（1）获取相对于事件源的鼠标坐标点
语法：.offsetX/Y
（2）获取相对于页面的鼠标坐标点
语法：.pageX/Y
（3）获取相对于浏览器窗口的鼠标坐标点
语法：.clientX/Y
获取键盘按键
（1） 返回按下的按键
语法：.key
（2） 返回按下的按键进制码
语法：.keyCode
