var j=document. getElementById()按钮
var j=document.getElementById ()复选框
按钮绑定事件 循环复选框设置选中状态
判断复选框没有被选中，选中的按钮不被选中
获取元素的属性
document. getAttribute(属性值)
element.属性获取自身的属性
设置元素的属性值
element.属性=值
element. setAttribute(‘index',值)
移除属性
element. removeAtrribute(")
自定义属性的存在保存在页面中，不用每次都从数据库中获取
H5自定义属性规则用data-名称
或者使用JS直接设置
H5新增dataset(集合里面放入所有以data开头的属性) element.dataset.data后面的名称
element.dataset[index]
如果属性名够长，采取驼峰命名法listName
节点操作
元素节点 nodeType 为1
属性节点 nodeType为2
文本节点nodeType为3 (文字，空格，换行)
parentNode (离元素最近的父节点,亲爸爸)
chilldNodes包含所有的子节点，元素节点，文本节点
children获取元素的子节点，ul.children获取非文本节点的数据
firstChild获取第一个子节点(也带文本节点)
firstElementChild返回第一个元素的节点 存在兼容性问题
lastChild
lastElementChild返回最后一个元素的节点 存在兼容性问题
使用children[0]获取一个元素无兼容性问题
children[ul.children.length]
div.nextSibling 获取div下一个兄弟节点，包含元素节点或文本节点
div.previousSibling 获取div上一个兄弟节点，包含元素节点或文本节点
div.nextElementSibling 获取div下一个兄弟元素节点
div.previousElementSibling 获取div上一个兄弟节点，包含元素节点或文本节点
解决兼容性函数
创建元素节点
var li=document.createElement(‘li')
添加节点
ul.appendChild(li) 往后追加元素
ul.insertBefore(li,ul.children[0])
ul.removeChild(ul.children[0])
btn.onclick=function(){
删除是当前链接的li 它父亲
循环所有的a标签
ul.removeChild(this.parentNode)
}
复制节点
ul.children[0].cloneNode()
cloneNode括号里面为空或者false则为浅拷贝，true 为深拷贝也拷贝数据
thead tr rh
tbody
数据准备
var datas=[{
name
subject
score
}]
var k in 元素 k 属性名 元素属性名
三种动态创建
document.write 页面文档流加载完毕，再调用这句话会导致页面重绘innerHTML 循环添加 采取数组形式，不要采取拼接字符串格式
createElement 创建多个元素，效率会低一点，但是结构清晰
事件高级
注册事件(传统方式和方法监听注册方式)
btns[1].onclick=funcction(){}
传统方式利用on开头，注册事件的唯一性，后注册的事件会覆盖上一个事件方法监听注册方式(IE9之前不兼容，使用addEventListener(事件类型，事件处理函数，可选参数是一个布尔值默认false))
事件监听注册事件
btns[1].addEventListener()
同一个事件可以添加多个侦听器(事件处理函数)
attachEvent(事件类型on开头，回调函数IE9之前的版本支持，非标准小心使用
删除事件
传统方式event.onclick=null
监听方式
event.addEventListener(事件类型，单独函数fn)
event.attachEvent(事件类型，单独函数fn)
fn(){
alert(‘1')
event.removeEventListener(事件名，fn)
event.deatchEvent(事件名，fn)
}
dom事件流
事件流描述的是从页面中间接收事件的顺序
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程叫Dom事件流
捕获阶段 如果addEventLister第三个参数是true，那么则出于捕获阶段
document html body father son
son.addEventListener(click,function(){
},true)
father.addEventListener(click,function(){
},true)
冒泡阶段 如果addEventLister第三个参数是false，那么则出于冒泡阶段 son father body html document
son.addEventListener(click,function(){
},false)
father.addEventListener(click,function(){
},false)
onclick 和attachEvent只能得到冒泡阶段
有些事件是没有冒泡的 比如onblur onfocus, onmouseenter,omouseleave
事件对象
div.onclick=function(event){}
event就是一个事件对象，写到我们侦听函数中，当形参看，
事件对象是有了事件才会存在，他是系统给我们自动创建的，不需要我们传递参数
事件对象 是我们事件一系列的相关数据集合，跟事件相关的，比如鼠标点击里面就包含了鼠标的相关信息，鼠标坐标，如果是键盘时间就包含键盘事件信息，比如判断用户按了哪个键
事件对象也有兼容性的问题 ie678 通过window.event 兼容性的手法 e=e||window.event
div.addEventListener(click,function(event){
console.log(e)
})
e.target返回的是触发事件对象(元素) 也指点击的对象，this返回的是绑定事件对象(元素)
div.onclick=function(e){
e=e||window.event
var target=e.target||e.srcElement
}
了解，跟this有个非常相似的属性，currentTarget IE678不认识
阻止默认行为，让链接不跳转或者让按钮不提交
e.preventDefault()
低版本e.returnValue
也可以利用return false 也能阻止默认行为没有兼容性问题 return 后面代码不执行了 而且只限于传统的注册方式
阻止冒泡事件
stopPropagatiom() stop停止 停止冒泡事件
e.cancelBubble=true //cancel 取消bubble泡泡
常用的鼠标事件
contextmenu 可以禁用鼠标右键
addEventListener(comtextmenu,function(e){
e.preventDefault()
})
selectstart一样禁用
clientX 可视化区域x轴
clientY 可视化区域y轴
pageX 页面文档的x轴
pageY 页面文档的Y轴 页面无论怎样都是距离页面的距离
mousemove 鼠标移动事件
页面中移动使用document
图片要移动，而不占位置使用绝对定位即可
img.style.left=pageX
img.style.top=pageY
keyUp按起触发
keyDown按下触发
onkeypress 某个键盘按键被按下时触发 但它不识别功能键比如ctrl shite 键
三个事件的执行顺序，先执行keyDown keypress keyup
键盘事件对象
ASCLL表
e.keyCode 获取相应的码值
keyup 和keydown 不区分大小写
keypress事件区分字母大小写a 97 A65
