DOM 初步

一、DOM操作

1. 创建

（1）documoent.write
（2）innerHTML
（3）createElement

2. 增

（1）appendChild()
（2）insertBefore()

3. 删

（1）removeChild()

4. 改

（1）普通元素属性：src、href、title…
（2）普通元素内容：innerHTML、innerText
（3）表单样式：value、type、disabled
（4）元素样式：style、className

5. 查

（1）getElementById、getElementsByTagName…
（2）querySelector、querySelectorAll
（3）parentNode(父节点)、children(子节点)、perviousElementSibling(上一个兄弟节点)、nextElementSibling(下一个兄弟节点)

6. 属性操作

（1）设置属性：setAttribute
（2）获取属性：getAttribute
（3）删除属性：removeAttribute

7. 事件操作

（1）onclick(鼠标单击)、onmouseover(鼠标经过)、onmouseout(鼠标离开)、onfocus(获得焦点)、onblur(失去焦点)、onmouseup(鼠标弹起)、onmousedown(鼠标按下)、onmousemove(鼠标移动)
（2）禁止选中文字：contextmenu(禁用右键菜单，此时仍可以使用Ctrl+c进行复制)、selectstart(禁止鼠标选中)
具体代码：

//禁止选中文字
document.addEventListener('contextmenu', function(e){
	e.preventDefault();
})

（3）键盘事件：onkeyup(某个键盘按键被松开时)、onkeydown(某个键盘按键被按下时)、onkeypress(某个键盘按键被按下时)

onkeyup 和 onkeydown事件不区分大小写。
onkeypress 事件区分大小写。且不识别功能键如Ctrl、Shift等。

二、事件对象 event

概念： 事件对象是有关事件的一系列相关数据的集合，与事件相关。比如：鼠标点击事件里就宝行了鼠标的相关信息。
常用属性或方法：
（1）e.target：返回触发事件的对象

e.target 和 this 不一样:
    this是绑定谁就返回谁的事件。e.target是点击谁就返回谁的事件。

（2）e.type：返回事件类型
（3）e.preventDefault()：阻止默认事件
（4）e.stopPropagation()：阻止冒泡

三、事件委托

概念： 事件委托是指不是给每个子节点单独设置事件监听器，而是将事件监听器设置在其父节点上，然后利用冒泡原理设置每个子节点。（可以利用e.target定位到相关的子节点）

四、鼠标事件对象MouseEvent

鼠标事件对象常用属性或方法：

e.clientX：返回鼠标相对于页面可视区范围的X坐标。
e.clientY：返回鼠标相对于页面可视区范围的Y坐标。

e.screenX：返回鼠标相对于电脑屏幕的X坐标 。
e.screenY：返回鼠标相对于电脑屏幕的Y坐标。

e.pageX：返回鼠标相对于文档页面的X坐标。
e.pageY：返回鼠标相对于文档页面的Y坐标。

五、键盘事件对象

键盘事件对象常用方法或属性：

e.keyCode：返回所按按键的ASCII值。