目录
刚学习js dom 首先需要理解三个关键字：文档、元素、节点。
文档：一个页面就是一个文档，dom中用document表示。
元素：页面中的所有标签都是元素，dom中使用element表示。
节点：网页中的所有内容都是节点（标签、属性、文本、注释等），dom中使用node表示。
一、获取元素
语法: var element = document.getElementById(id)1.根据id获取
document.getElementById(id)2.根据标签名获取
element.getElementsByTagName('标签名')3.HTML5新增方法
document.getElementsByClassName('类名') //根据类名返回元素对象集合
document.querySelector('选择器') //根据指定选择器返回第一个元素对象
document.querySelectorAll('选择器') //根据指定选择器返回4.获取特殊元素（body、html）
doucument.body //返回body元素对象
document.documentElement //返回html元素对象二、操作元素
1.改变元素内容
element.innerText
从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也去掉
element.innerHTML
从起始位置到终止位置的内容，包括html标签，同时保留空格和换行2.常用元素的属性操作
innerText、innerHTML、src、href、id、alt、title
表单元素：value、type、checked、selected、disabled
3.样式属性操作
element.style 行内样式操作（样式少，功能简单情况下使用）
element.className 类名样式操作（样式多，功能复杂情况下使用）4.总结
三、排他思想
如果有同一组元素，想要某一个元素实现某种样式，需要用到循环的排他思想算法：
1.所有元素全部清除样式（干掉其他人）
2.给当前元素设置样式（留下自己）
3.注意顺序不能颠倒，首先干掉其他人，再设置自己
四、自定义属性
1.自定义属性操作获取
（1）获取属性值
element.属性 获取属性值
element.getAttribute('属性')区别：
element.属性 获取内置属性值
element.setAttribute('属性') 主要获得自定义属性(标准)我们程序员自定义的属性
（2）设置属性值
element.属性='值' 设置内置属性值
element.setAttribute('属性','值')区别：
element.属性 设置内置属性值
element.setAttribute('属性','值') 主要设置自定义属性(标准)
（3）移除属性
element.removeAttribute('属性')2.H5自定义属性
（1）设置H5自定义属性
H5规定自定义属性data开头作为属性名并且赋值，例如：
<div data-index="1"></div>（2）获取H5自定义属性
a.兼容性获取 element.getAttribute('data-index')
b.H5新增element.dataset.index或者element.dataset['index'] ie11才开始支持
五、节点
在开发中，节点操作主要操作的是元素节点。
1.节点层级
（1）父级节点
node.parentNode- parentNode属性可返回某节点的父节点，注意是最近的一个父节点
- 如果指定的节点没有父节点则返回null
（2）子节点
parenNode.childNodes(标准) 返回包含指定节点的子节点的集合，该集合为即使更新的集合。注意：返回值里面包含了所有的子节点，包括元素节点，文本节点等。如果只是想要获取里面的元素节点，则需要专门处理。所以一般不提倡使用childNodes
parentNode.children(非标准) 返回所有的子元素节点，只返回子元素节点，其余节点不返回。
parentNode.firstChild 返回第一个子节点，找不到则返回null，包含所有的节点。
parentNode.lastChild
parentNode.firstElementChild 返回第一个子元素节点，找不到返回null。
parentNode.laseElementChild 注意：parentNode.firstElementChild和parentNode.lastElementChild两个方法有兼容性问题，IE9以上才支持。
实际开发中主要使用parentNode.chilren[0]。
（3）兄弟节点
node.nextSibling 返回当前元素的下一个兄弟所有节点，找不到则返回null。
node.previousSibling 返回当前元素上一个兄弟所有节点，找不到则返回null。
node.nextElementSibling 返回当前元素下一个兄弟元素节点，找不到则返回null。
node.previousElementSibling 返回当前元素上一个兄弟节点，找不到则返回null。注意：后两个方法有兼容性问题，IE9以上才支持。
2.节点的增、删
（1）创建节点
document.crenteElement('tagName') 动态创建元素节点（2）添加节点
node.appendChild(child)将一个元素添加到指定父节点列表末尾，类似css的after伪元素。
node.insertBefore(child,指定元素)将一个节点添加到父节点的指定子节点前面，类似css的before伪元素。
（3）复制节点(克隆节点)
node.cloneNode()注意：如果括号参数为空或者false，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点；如果括号参数为true，则是深度拷贝，会复制节点本身以及本身以及里面所有的子节点。
（4）删除节点
node.removeChild(child)3.三种动态创建元素区别
- document.write()
- element.innerHTML
- document.createElement()
区别：
a.document.write是直接将内容写入页面的内容流，但是当文档执行完毕，则它会导致页面全部重绘。
b.innerHTML是将内容写入某个DOM节点，不会导致页面全部重绘。
c.innerHTML创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍复杂。
d.createElement()创建多个元素效率稍微低一点点，但是结构更加清晰。
总结：不同浏览器下，innerHTML效率要比creatElement高。
六、事件
1.事件步骤
1.获取事件源
2.注册事件（绑定事件）
3.添加事件处理程序（采取函数赋值形式）2.常见事件
（1）常见鼠标事件
| 鼠标事件 | 触发条件 |
| onclick | 鼠标点击左键触发 |
| onclick | 鼠标点击左键触发 |
| onmouseout | 鼠标离开触发 |
| onfocus | 获取鼠标焦点触发 |
| onblur | 失去鼠标焦点触发 |
| onmousemove | 鼠标移动触发 |
| onmouseup | 鼠标弹起触发 |
| onmousedown | 鼠标按下触发 |
（2）常见键盘事件
| 键盘事件 | 触发条件 |
| onkeyup | 某个键盘按键被松开时触发 |
| onkeydown | 某个键盘按键被按下时触发 |
| onkeypress | 某个键盘按键被按下时 触发 但是不能识别功能键 |
注意：
- keydown和keypress在文字框里面的特点：他们两个事件触发的时候，文字还没有落入文本框中。
- 如果使用addEventListener不需要加on
- onkeypress和前面两个区别是，它不识别功能键，比如左右箭头，shift等。
- 三个事件的执行顺序是：keydown--keypress--keyup
3.注册事件
给元素添加事件，称为注册事件或者绑定事件。
注册事件有两种方式：传统方式和方法监听注册方式。
（1）传统注册方式
- 利用on开头的事件onclick
- <button οnclick="alert('hi~')"></button>
- btn.οnclick=function(){}
- 特点：注册事件的唯一性
- 同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数
（2）方法监听注册方式
- w3c标准推荐方式
- addEventListener()它是一个方法
- IE9之前的IE不支持此方法，可使用attachEvent()代替
- 特点：同一个元素同一个事件可以注册多个监听器
4.addEventistener事件监听方式
eventTarget.addEventListener(type,listener[,useCapture])- type：事件类型字符串，比如click、mouseover，注意这里不要带on
- listener：事件处理函数，事件发生时，会调用该监听函数
- useCapture：可选参数，是一个布尔值，默认为false
5.attachEvent事件监听方式
eventTaget.attachEvent(eventNameWithOn,callback)- eventNameWithOn：事件类型字符串，比如onclick、onmouseover，这里要带on
- callback：事件处理函数，当目标触发事件时回调函数被调用
6.删除事件
（1）传统注册事件
eventTarget.onclick=null（2）方法监听注册方式
eventTaget.removeEventListener(type,listener[,useCapure])
eventTarget.detachEvent(eventNameWithOn,callback)七、DOM事件流
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。
DOM事件流分为3个阶段：
- 捕获阶段
- 当前目标阶段
- 冒泡阶段
- 事件冒泡：IE最早提出，事件开始时，由具体的元素接收，然后逐级向上传播到DOM最顶层节点过程。
- 事件捕获：网景最早提出，由DOM最顶层节点来时，然后逐级向下传播到到最具体元素的元素接收的过程。
注意：
- JS代码中只能执行捕获或者冒泡其中的一个阶段。
- onclick和attachEvent只能得到冒泡阶段。
- addEventListener(type,listener[,useCapture])第三个参数如果是true，表示事件在捕获阶段调用事件处理程序；如果是false（不写默认就是false），表示事件冒泡阶段调用事件处理程序。
- 实际开发中很少用到事件捕获，更加关注事件冒泡。
- 有些事件没有冒泡的，比如：onblur、onfocus、onmouseenter、onmouseleave
- 事件冒泡有时候也会带来麻烦
1.事件对象
eventTarget.onclick=function(event){}
eventTarget.addEventListener('click',function(event){})
// event就是事件对象可以简写成e官方解释：event对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态。
简单理解：事件发生后，跟事件相关的一系列信息数据的集合都会放在这个对象里面，这个对象就是事件对象event，它有很多属性和方法。
比如：
- 谁绑定了这个事件。
- 鼠标触发事件的话，会得到鼠标的相关信息，如鼠标位置。
- 键盘触发事件的话，会得到键盘的相关信息，如按了哪个键。
（1）事件对象的使用语法
eventTarget.onclick=function(event){}
eventTaget.addEventListener('click',function(event){})这个event是个形参，系统帮我们设定为事件对象，不需要传递。
当我们注册事件时，event对象就会被系统自动创建，并依次传递给事件监听器(事件处理函数)。
注意：在IE6~8中，浏览器不会给对方传递参数，如果需要的话，需要到window.event中获取查找。
解决方案：e=e || window.event
（2）事件对象的常见方法和属性
| 事件对象属性方法 | 说明 |
| e.target | 返回触发事件的对象 标准 |
| e.srcElement | 返回触发事件的对象 非标准 ie6-8使用 |
| e.type | 返回事件的类型 比如 click mouseover 不带on |
| e.cancelBubble | 该属性用于阻止冒泡 非标准 ie6-8使用 |
| e.returnValue | 该属性 用于阻止默认事件（默认行为）非标准 ie6-8使用 比如不让链接跳转 |
| e.preventDefault() | 该方法 阻止默认事件（默认行为）标准 比如不让链接跳转 |
| e.stopPropagation() | 阻止冒泡 标准 |
（3）鼠标事件对象
| 鼠标事件对象 | 说明 |
| e.clientX | 返回鼠标相对于浏览器窗口可视区的x坐标 |
| e.clientY | 返回鼠标相对于浏览器窗口可视区的y坐标 |
| e.pageX | 返回鼠标相对于文档页面可视区的x坐标 IE9+支持 |
| e.pageY | 返回鼠标相对于文档页面可视区的y坐标 IE9+支持 |
| e.screenX | 返回鼠标相对于电脑屏幕的x坐标 |
| e.screenY | 返回鼠标相对于电脑屏幕的y坐标 |
（4）键盘事件对象
| 键盘事件对象 属性 | 说明 |
| keyCode | 返回该键的ASCll值 |
注意：onkeydown和onkeyup不区分字母大小写，onkeypress区分字母大小写。
在实际开发中，我们更多的使用keydown和keyup，它能识别左右键（包括功能键）Keypress不能识别功能键，但是keyCode属性能区分大小写，返回不同ASCll值。
2.阻止事件冒泡
事件冒泡：开始时由最具体的元素接收，然后逐级向上传播到DOM最顶层节点。
事件冒泡本身的特性，会带来的坏处，也会带来的好处，需要我们灵活的掌握。
阻止事件冒泡
- 标准写法：利用事件对象里面的stopPropagation()方法
e.stopPropagation()- 非标准写法：IE6-8利用事件对象cancelBubble属性
1020
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
