DOM初体验（绑定事件，监听事件）
JavaScript的组成：
ECMAScript（js的基本语法）、DOM（文档对象模型）、BOM（浏览器对象模型）
DOM的作用：
1、 找到页面上的元素
2、 增添、删除、修改页面上的元素
3、 增添、删除、修改页面上的属性
4、 删除页面上的元素
5、 创建页面元素
DOM做的是就是增删改查
DOM级别
1、 DOM0：js在浏览器中最初的获取页面元素的方式
2、 DOM1：w3c为了统一标准，规定了节点类型，使不同的浏览器有相同的使用方法
3、 DOM2，DOM3：各自在之前的标准基础上新增一些新的内容，但是很多浏览器支持的不够完善。
文档树：
把HTML和XML的结构建立成树模型，模型由一个一个节点组成
文档树的html节点做为树的根节点
节点（node）
树模型由一个一个的节点组成，也可以说成文档由节点组成
节点类型
标签(元素)节点：页面上的标签(元素)，对应的节点编号为1
属性节点：标签的属性，对应的节点编号为2
文本节点：标签中的文本、标签之间的回车、空格等，对应的节点编号为3
注释节点：注释掉的内容，对应的节点编号为8
Html元素的属性
<img id="img" class="cImg img1 img2" src="img/Bing1.jpg" width="300" height="300" alt="这是图片的alt属性">
<script>
//先获取元素
var img = document.getElementById("img");
// 输出元素的属性 -- 这些事html里面的一般属性，可以直接通过html元素对象直接点出来
console.log(img.id);
console.log(img.src);
console.log(img.width);
console.log(img.height);
console.log(img.alt);
//尝试点出class属性
//class等这些特殊的属性，并不是直接点出来，因为在js中，class是保留字，所以为了避开这个东西，使用className来代替
console.log(img.class);
//元素对象的calssName属性，可以得到这个元素身上的所有的class
console.log(img.className);
</script>
获取页面上的元素
1、 根据元素的id属性获取元素
语法：element.getElementById（‘标签名’）
页面元素：
<div id="box">根据id获取元素</div>
<input type="button" id="btn" value="点我">
Js代码
<script>
var box= document.getElementById('box');
console.log(box);
</script>
<script>
var btn= document.getElementById('btn');
console.log(btn);
btn.onclick=function () {
alert('我是通过js获取元素之后弹出的框');
}
</script>
返回：根据id属性找到的页面上第一个id与参数相匹配的元素，这是一个DOM对象，如果页面上没有id属性与参数相匹配的的元素，返回null
兼容：所有的主流浏览器都支持这个方法
<script>
var box= document.getElementById('box');
console.log(box);
</script>
<input type="button" id="btn" value="点我">
<script>
var btn= document.getElementById('btn');
console.log(btn);
btn.onclick=function () {//绑定点击事件
alert('我是通过js获取元素之后弹出的框');
}
</script>
console.dir可以查看元素的详细属性信息
console.dir(btn);//只要是这个对象的属性，就能通过对象点出来
//console.dir可以查看元素的详细属性信息
注意：
如果只有一个元素的id符合要求，得到的就是这个元素
如果多个元素的id符合要求，得到的就是从上到下的第一个元素
如果没有id符合要求，得到的就是null
绑定事件：
Element.onclick=function （）{ 你希望这个元素被点击时执行的事件 }
2、 根据元素的标签名获取元素
语法：element.getElementsByTagName（‘标签名’）
元素结构：
<img src="img/Bing1.jpg" alt="">
<img src="img/Bing2.jpg" alt="">
代码：
var imgs = document.getElementsByTagName('img');
console.log(imgs);
返回：获取标签名为与参数相匹配的页面上的所有的标签，得到的是一具NodeList对象，可以使用对象的length属性遍历到获取到的所有元素
绑定事件：
<img src="img/Bing1.jpg" alt="">
<img src="img/Bing2.jpg" alt="">
<script>
var imgs = document.getElementsByTagName('img');
console.log(imgs);
//imgs.onclick=function () {alert(imgs.src);}错误写法
for (var i = 0; i < imgs.length; i++) {
imgs[i].onclick = function () {
alert(this.src);
}
}
</script>
注意：
获取到的是满足条件的元素的对象的集合，是不能直接注册事件的
要遍历其中的所有元素，分别绑定事件
事件所绑定的函数是会在事件触发的时候才执行
案列：当点击按钮之后，把a标签的链接地址修改成163.com
思路：
1、 获取元素
2、 绑定事件
3、 修改链接地址
<input id="btn" type="button" value="点击按钮修改超链接地址">
<a id="link" href="baidu.com" target="_blank">百度</a>
<script>
var btn = document.getElementById('btn');
var link = document.getElementById('link');
btn.onclick = function () {
link.href = 'http://www.163.com';
}
兼容：所有的主流浏览器都支持这个方法
3、根据元素的类名获取元素
语法：element.getElementByClassName（‘标签名’）
元素结构
<div class="color-red">啦啦啦</div>
<span class="color-red">啦啦啦</span>
<p class="color-red">啦啦啦</p>
代码
<script>
var classList=document.getElementsByClassName('color-red');
console.log(classList);
console.dir(classList);
</script>
4、获取元素的注意点：
获取元素的代码一定要在元素存在之后，就是把代码写在元素结构的后面。
5、获取元素属性：
一般属性：
HTML的属性和元素对象是一模一样
在获取对象之后直接使用对象点出来
格式：元素 .属性
特殊属性：
Class属性：因为class属性是保留字，所以为了避免将来出问题，使用className来代替
自定义属性：W3C标准之外的，由用户自己定义的
获取自定义属性：
Element. GetAttribute（属性名）属性名是字符串
设置自定义属性：
Element. setAttribute（属性名，属性值）
<div id="box" class="box1" title="我是title" data_title="2343214"></div>
<script>
var box=document.getElementById('box');
console.log(box.title);
// box.setAttribute("data_title",2343214);
console.log(box.getAttribute("data_title"));
</script>
6、事件
1、 什么是事件：
事件就是文档或浏览器中发生的特定的交互瞬间
例如：文档加载完毕，点击某个按钮，鼠标移入移出......
HTML和js的通信是通过事件来实现的
事件分为触发和响应
2、 事件三要素：
事件源 - 谁 - DOM对象
事件类型(名称) - 发生了什么 - 触发了什么事件
事件处理程序 - 如何应对 - 要执行什么代码(函数)
3、注册（绑定）事件：
行内式：在标签内使用属性的方式注册事件
让按钮在被点击的时候弹出一个提示框
<input type="button" id="btn" value="点我" onclick="alert('hi')">
内嵌式：在页面中的script标签中注册事件
页面上的标签
var btn= document.getElementById('btn');
console.log(btn);
btn.onclick=function () {
alert('我是通过js获取元素之后弹出的框');
}
外联式：就是把内嵌式的代码写到外部的js文件里面，在大型项目中用的多
1、on的方式：
写在script标签中的代码
使用方式：
事件源.on+事件名称 = 函数
<input type="button" value="点击" id="btn">
<script>
var btn = document.getElementById('btn');
btn.onclick = function () {
alert('我是a的工作区域');
}
var btn2 = document.getElementById('btn');
btn2.onclick = function () {
alert('我是b的工作区域');
}
//使用on的方式注册事件的时候，只能注册一次，
// 当重复注册的时候，后注册会把前面注册的给覆盖掉
</script>
优缺点：
所有的主流浏览器都支持，但是只能绑定一个处理函数，因为后面的会把前面的覆盖掉。这时候有个解决办法，就是使用监听事件
AddEventListener的方式
写在script标签中的代码
使用方式：DOM对象.addEventListener（事件名称，处理函数，函数执行时机）
<input type="button" value="点击" id="btn">
<script>
//使用on的方式不能重复绑定事件
//addEventListener
//element.addEventListener(事件类型，事件处理程序，false)
//1、获取元素
var btn = document.getElementById('btn');
//不需要on
btn.addEventListener('click',function () {
alert('我是第一次的弹框');
},false);
function fn2() {
alert('外面声明函数的弹框');
}
btn.addEventListener('click',fn2,false);
btn.addEventListener('click',function () {
alert('我是第三次的弹框');
},false);
//在ie8下不受支持
</script>
优缺点：可以添加多个事件处理程序，但是不能被所有的浏览器都支持
兼容：chrome1.0，IE9.0，Firefox1.0，Safari1.0，opera7.0 这些版本及以上都支持
attachEvent的方式
当addEventListener因为兼容性不被其他浏览器版本支持的时候，可以使用这个方式
使用方式：elment.attachEvent("事件类型",事件处理函数);
<input type="button" value="点击" id="btn"/>
<script>
// 浏览器的兼容范围：从ie6-ie10
// 语法：
// elment.attachEvent("事件类型",事件处理函数);
//和addEventListener不同，这个用法的事件类型必须有on
document.getElementById("btn").attachEvent("onclick",function(){
alert("第一次注册事件");
});
document.getElementById("btn").attachEvent("onclick",function(){
alert("第二次注册事件");
});
document.getElementById("btn").attachEvent("onclick",function(){
alert("第三次注册事件");
});
</script>
注册事件的兼容写法
需求：写一个程序，可以让任何的的浏览器都可以注册事件
思路：判断这个这个浏览器是否支持这个方法，如果浏览器支持这个方式，这个条件就是true
<input type="button" value="点播" id="btn"/>
<script>
// var btn = document.getElementById("btn");
//要求写一个程序，可以让任何的浏览器都可以注册事件
//判断浏览器的版本，根据不同的版本使用不同的方法 -- 蠢
//正确的思路：判断这个浏览器是否支持这个方法
// console.log(document.addEventListener);
// console.log(document.attachEvent);
//如果浏览器支持这个方式，这个条件就是true
// if(document.addEventListener){
// btn.addEventListener("click",function (){},false)
// }else if (document.attachEvent){
// btn.attachEvent("on"+"click" ,function(){
//
// });
// }else {
// btn.onclick
// btn["on"+"click"] = function(){
//
// }
// }
// 封装函数
/**
* 功能:兼容的为dom对象注册时事件
* @param element 想要注册事件的对象
* @param eventType 事件类型
* @param callBack 事件处理程序
*/
function addEvent(element,eventType,callBack){
if(document.addEventListener){
element.addEventListener(eventType,callBack,false)
}else if (document.attachEvent){
element.attachEvent("on"+eventType , callBack);
}else {
element["on"+ eventType] = callBack;
}
}
var btn = document.getElementById("btn");
addEvent(btn,"click",function(){
console.log(123456);
});
</script>
