目录
console.dir 打印我们返回的元素对象，更好查看里面的属性和方法
一、获取元素
document.getElementById(id) id是字符串 返回的是元素对象
document.getElementsByTagName(tagname) tagname是字符串 返回带有指定标签名的对象的集合 以伪数组的形式存储 古老用法不太推荐
element.getElementsByTagName(tagname) 可以得到这个元素里面的某些标签
H5新增：
document.getElementsByClassName(类名) 返回元素对象的集合
document.querySelector(选择器) 指定选择器返回第一个元素对象
document.querySelectorAll(选择器) 返回指定选择器的所有元素对象集合
获取特殊元素：
获取body元素
document.body 返回body元素对象
获取html元素
document.documentElement 返回html元素对象
二、操作元素
改变元素的内容
可读写：
element.innerText 去除html标签同时空格和换行也会去掉
element.innerHTML 包括html标签，同时保留空格和换行
获取、修改元素属性
- element.属性 属性： src href id alt title 获取内置属性 注意：这里使用className
- element.getAttribute(属性) 既可以获取自定义属性，也可以获取内置属性
element.setAttribute(属性，值) 注意：class特殊 这里属性写class不是className
element.removeAttribute(属性)
H5获取自定义属性：
element.dataset.index或者element.dataset[‘index’]
修改表单元素
type value checked selected disabled
表单元素.属性 表单里面的值通过value来修改
修改样式属性
element.style.样式属性 是行内样式操作，权重比较高 样式采用驼峰命名法
element.className 类名样式操作 会直接更改元素的类名，会覆盖原先的类名
排他思想
三、节点
元素节点nodeType为1 主要使用
属性节点nodeType为2
文本节点nodeType为3（文本节点包括文字、空格、换行等）
获取节点
父节点 parentNode 得到最近的父亲 找不到返回null
子节点 注意：子节点只算第一层，孙子节点不在子节点的范畴内
childNodes（标准） 返回所有子节点 包含元素节点 文本节点
children（非标准） 返回子元素节点
第一个子元素 firstChild 返回第一个子节点 不管元素节点还是文本节点
firstElementChild 返回第一个子元素节点 有兼容
children[0] 没有兼容性
最后一个子元素 lastChild 返回最后一个子节点 不管元素节点还是文本节点
lastElementChild 返回最后一个子元素节点 有兼容
元素.children[元素.children.length-1] 没有兼容性
兄弟节点 nextSibling 下一个兄弟节点 不管元素节点还是文本节点
nextElementSibling 返回下一个兄弟元素节点 有兼容
previousSibling 上一个兄弟节点 不管元素节点还是文本节点
previousElementSibling 返回上一个兄弟元素节点 有兼容
创建节点
document.createElement(‘tagName’) 也称为动态创建元素节点
添加节点
appendChild(child) 将一个节点添加到父节点的子节点的列表末尾
insertBefore(child,指定元素) 将一个节点添加到父节点的指定子节点的前面
删除节点
removeChild(child)
复制节点
元素.cloneNode()
如果参数为空或false则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点，不复制内容
如果参数为true则是深拷贝，复制节点，复制里面子节点，复制内容
阻止链接跳转 添加javascript:void(0);或者javascript:;
三种动态创建元素的区别
document.write() 冷门 文档流执行完毕，则它会导致页面全部重绘
element.innerHTML 可采用数组方法提高效率，此时比createElement效率更高，但结构复杂
document.createElement() 创建多个元素比innerHTML采用拼接字符串效率高，结构清晰
四、事件
事件三要素
事件源 事件类型 事件处理程序
- 获取事件源
- 注册事件
- 添加事件处理程序（函数赋值方式）
注册事件
①传统方法
利用on开头的事件例如：onclick
特点：注册事件的唯一性
同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面 注册 的处理函数
② 方法监听注册方法
addEventListener() ie9之后支持
特点：同一个元素同一个事件可以注册多个监听器
addEventListener(type,listener,[,useCapture])
type:事件类型字符串，不需要带on
listener:事件处理函数，会调用该监听函数如果在外面声明，在这里使用不要添加小括号，因为这里只使用不调用，只有调用才添加小括号
useCapture:可选参数，是一个布尔值，默认是false
③ attachEvent ie9之前支持，通常不使用
attachEvent(eventNameWithOn,callback)
eventNameWithOn:事件类型字符串，这里要带on
callback:事件处理函数
删除事件（解绑事件）
①传统方式 以on开头的事件=null
②方法监听注册方法 removeEventListener(type,listener,[,useCapture])
③detachEvent(eventNameWithOn,callback)
DOM事件流
从页面中接受事件的顺序，事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流
事件流三个阶段：
捕获阶段 目标阶段 冒泡阶段
事件对象
event写到侦听函数小括号里面，当作形参来看
只有有了事件才会存在，是系统自动创建的，不需要我们传递参数
事件对象是我们事件的一系列相关数据的集合，跟事件相关的
这个事件处理对象可以自己命名 通常写e或者evt
有兼容性 ie678使用的是window.event
解决：e=e||window.event
事件对象常见的属性和方法
e.target 返回触发事件的对象 标准
和this的区别：
this返回绑定事件的对象
e.srcElement 返回触发事件的对象 不标准
e.type 返回事件的类型 比如click 不带on
e.cancelBubble 该事件阻止冒泡 不标准 ie6~8使用
e.returnValue 该属性阻止默认事件 非标准 ie6~8使用 适合传统注册方式
e.preventDefault() 该属性阻止默认事件 标准
e.stopPropagation() 该事件阻止冒泡 标准
return false 阻止默认事件 没有兼容 return后面代码不执行了
只适合于传统注册方式
鼠标事件对象MouseEvent
e.clientX 返回鼠标相对于浏览器窗口可视区的X坐标
e.clientY 返回鼠标相对于浏览器窗口可视区的Y坐标
e.pageX 返回鼠标相对于文档页面的X坐标 ie9+支持
e.pageY 返回鼠标相对于文档页面的Y坐标 ie9+支持
e.screenX 返回鼠标相对于电脑屏幕的X坐标
e.screenY 返回鼠标相对于电脑屏幕的Y坐标
键盘事件
onkeyup 按键弹起时候触发 不区分字母大小写
onkeydown 按键按下时候触发 不区分字母大小写
onkeypress 按键按下时候触发 不识别功能键 比如ctrl shift 箭头 区分字母大 小写
执行顺序 onkeydown-----onkeypress------onkeyup
键盘事件对象
e.key 得到相应键的值 有兼容
e.keyCode 得到相应键的ascii码值
扩展知识：
禁止选中文字和禁止右键菜单
contextmenu主要控制应该何时显示上下文菜单，用于程序员取消默认的上下文菜单
selectstart 开始选中
事件委托
不给每个字节点设置事件监听器，而是事件监听器设置在父节点上，然后利用冒泡原理影响设置每个字节点
只操作了一次dom,提高了程序性能
2546
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
