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