一、元素操作
1.排他思想
编辑
练习：
编辑
2.自定义属性操作
规定自定义属性以data-开头作为属性名并赋值
（1）获取属性值
编辑
主要使用第二种编辑
（2）设置属性值
主要是第二种
编辑
编辑
（3）移除属性值
编辑
H5自定义属性
获取：
编辑如果自定义属性里面有多个-链接的单词，获取时要采用驼峰命名法，注意第二个方法获取时，不用加data-
二、节点操作
页面中所有内容都是节点。一般节点至少拥有nodeType（节点类型）,nodeName（节点名字）和nodeValue（节点值）
编辑
编辑
1.节点层级
利用DOM树可以把节点划分为不同层级关系，常见的是父子兄层级关系
（1）父级节点 节点.parentNode
得到的是离元素最近的父级节点
（2）子节点
①
编辑
所有的子节点，包括元素节点，文本节点等，比如会包括空行，空格等
编辑
②重点掌握
编辑
获取某个子节点
编辑
注意！会获取文本节点，比如会获取到换行，但是我们想要的是元素节点
所以我们使用：
编辑
实际开发使用：利用children【第几个】
编辑
（3）兄弟节点
①nextSibling 下一个兄弟节点，注意也是包括所有节点，比如文本节点-换行
编辑
②nextElementSibling 得到下一个兄弟元素节点，所以不包括文本节点了
编辑
如何解决兼容性问题？
自己封装一个兼容性函数
编辑
意思就是找到元素节点，return
2.创建节点
编辑
3.添加节点
编辑
加入原来有，就加在后面，不会覆盖
实现：
编辑
结果：
编辑
假如想要添加到指定位置：insertBefore(添加的元素，指定元素)
实现：
编辑
4.删除节点
编辑
阻止链接跳转：JavaScript：void(0);或者javascript:;
编辑
5.复制节点（克隆节点）
编辑
6.三种动态创建元素的区别
编辑
三、事件
1.注册事件（绑定事件）
就是给元素添加事件
（1）传统方式
不存在兼容性问题
编辑
（2）方法监听注册方式
编辑
监听器就是function
①addEventListener事件监听方式——一般都是用此方法
编辑
实现：注意书写格式是怎么样的
<body>
<button>方法监听注册事件</button>
<script>
var btn=document.querySelector('button')
btn.addEventListener('click',function(){
alert(22);
})
btn.addEventListener('click',function(){
alert(11);
})
</script>
</body>
结果：在弹出了22之后，还能弹出11
②attachEvent事件监听方式（非标准，尽量不使用）
编辑
实现：
btn[1].addEvent('onclick',function(){
alert(11);
})
结果：没有反应，因为是ie9以前支持
注册事件兼容性解决方案
编辑
思路：依次判断是否支持
2.删除事件（解绑事件）
****①传统注册方式 .onclick=null
使其只能够点击一次，后续点击没有反应
<body>
<div>1</div>
<script>
var div=document.querySelector('div');
div.onclick=function()
{
alert('11');
this.onclick=null;
}
</script>
</body>
②方法监听注册方式 .removerEventListener（type，listener[useCapture]）
<body>
<div>1</div>
<script>
var div=document.querySelector('div');
div.addEventListener('click',fn)
function fn()
{
alert('11');
div.removeEventListener('click',fn)
}
</script>
</body>
③attachEvent的删除事件：.detachEvent()
删除事件兼容性解决方案
编辑
3.DOM事件流
简单理解事件传播的过程就叫做DOM事件流
编辑
编辑
冒泡阶段:addEventListener的第三个参数为false或者不填
先son后father，就是从下到上
捕获阶段：addEventListener的第三个参数为true
先father后son，就是从上到下
编辑
4.事件对象
（1）
①event就是一个事件对象，写到我们的监听函数（function）小括号里面，当形参来看
②事件对象只有有了事件才会存在，它是系统给我们创建的，不需要我们传递参数
③事件对象是我们事件一系列相关数据的集合，跟事件相关的比如鼠标点击里面就包括了鼠标的相关信息，如鼠标坐标等
④我们可以自己命名
⑤事件对象也有兼容性问题，ie678通过window.event
编辑
编辑
兼容性问题解决
编辑
（2）事件对象的常见属性和方法
event.target返回的是触发事件的元素
编辑
①e.preventDefault()方法
普通浏览器
②e.returnValue属性
低版本浏览器 ie678
③利用return false
没有兼容性问题。后面代码不再执行
5.阻止事件冒泡
（1）标准写法（重点掌握）
编辑
实现：
编辑
（2）非标准写法
编辑
实现：
编辑
兼容性方案：
编辑
6.事件委托（代理，委派）
（1）原理（掌握）
不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每一个子节点
（2）作用
我们只操作一次DOM提高了程序性能
例：
<body>
<ul>
<li>hahh</li>
<li>hahh</li>
<li>hahh</li>
<li>hahh</li>
</ul>
<script>
var ul=document.querySelector('ul')
ul.onclick=function(e)
{
alert('hahah')
//先清除之前背景色，然后在重新赋予点击的背景色，这样就能保证每次就只有我们点击的有颜色
for(var i=0;i<ul.children.length;i++)
{
ul.children[i].style.backgroundColor='';
}
e.target.style.backgroundColor='pink';
//e.target可以直接得到我们点击的对象，所以用它可以把我们点击的变颜色
}
</script>
7.常用鼠标事件
编辑
（1）禁止鼠标右键菜单 .preventDefault();
实现：
<body>
ahahhhah
<script>
document.addEventListener('contextmenu',function(e){
e.preventDefault();
})
</script>
</body>
（2）禁用鼠标选中 selectstart
实现：
<body>
ahahhhah
<script>
//禁止选中
document.addEventListener('selectstart',function(e){
e.preventDefault();
})
</script>
</body>
(3)鼠标事件对象
编辑
显示的是离左和上的距离。
注意！！前两个不管页面多长，都是相对于当前页面框的距离，而文档页面的，是会变化的
8.常用键盘事件
（1）
编辑
（2）键盘事件对象
编辑keyup和keydown不区分字母大小写，但是keypress区分
编辑
四、BOM认知
BOM即浏览器对象模型，他提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window
编辑
1.构成
BOM比DOM更大，包含DOM
编辑
编辑
例：
//之前写的时候省略
alert('11')
//完整写法
window.alert('11')
五、window对象的常见事件
1.窗口加载事件
（1（））
编辑
就是页面中所有内容执行完毕，才会触发事件，执行里面的代码
23的说明：就是如果使用2写了好几个，最后只会执行最后一个事件内容，而使用3，则会依次执行事件内容。
（2）
编辑
2.调整窗口大小事件
编辑
六、定时器
1.setTimeout()定时器
他只会调用一次就结束
编辑
4说明：就是取个名字，例如:var time1=setTimeout(函数名，时间)
实现：
setTimeout(function(){
alert('时间到了'）
}，2000）
//注意！！！！！！function（）后面没有等号
//也可以采用函数调用的方法,
function callback(){
alert('时间到了')
}
setTimeout('callback()',3000)
注意！！！！函数调用时，如果加了括号就要加引号，如果只是写了函数名字，就不用加引号
2.回调函数
编辑
3.停止setTimeout定时器
实现：clearTimeout（需要停止的定时器）；
编辑
4.setInterval（）定时器
编辑
5.停止setInterval（）定时器
编辑
例：
编辑
注意！： 如果不在外定义全局变量，在下面清除的时候会出问题，要注意定义域关系
6.this
this最终指向是那个调用它的对象
编辑
编辑
编辑
7.26-7.27学习总结
1.问题解决
（1）问题：点击之后按钮没有改变颜色
编辑
解决：
编辑
改成this
