DOM
dom全程就是document object model 文档对象模型。我们可以通过dom对象去获取到div，input等标签对象，去修改样式、赋值和设置行为等。
查找元素
js要操作标签，第一件事就要找到这个标签，js中提供了两个最最基本的得到元素的方法
- document.getElementById()
1.id是区分大小写，但是IE6 7 8 不区分 2.IE7以及较低的版本，表单元素name特效也会被当做id
- document.getElementsByTagName()
结果是一个类数组(不是真正的数组，目前可以当做数组用)
document还有两个属性，title和URL
更改html的属性
html标签有很多属性 比如src href title等
js可以更改html的任何属性，方法有两种：.语法和setAttribute()和getAttribute()
关于点语法使用：
// 修改Img元素的src属性值
var pic = document.getElementById("pic");
//alert(pic);
pic.src = "images/leifeng.jpg";
点语法的注意属性：
对于元素的class属性 应该使用元素.className
..........for属性 .........元素.htmlFor
rowspan 要写成rowSpan
colspan 要写成colSpan
更改属性的方法：
setAttribute("src","xxx.png");设置src属性的值
getAttribute("src");获取src属性的值
点语法与更改属性的方法区别：
- 改变属性方法获取属性，不需要忌讳。class就是class不需要填className
- 自定义属性不能通过.语法
- 所欲的行内样式，.语法获取到的是一个style对象，而更改属性方法获取到的是一个字符串。
总的来说点语法的效率币改变属性方法更高。
操作元素样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box" style="width:200px;height:200px;background-color:red;border:6px solid green; font-size:48px;border-left-style:dashed;">666666</div>
<script type="text/javascript">
// 获取div
var oDiv = document.getElementById("box");
console.log(oDiv.style); // 样式对象
console.log(typeof oDiv.getAttribute("style")); // string
console.log(oDiv.style.backgroundColor);
console.log(oDiv.style.fontSize);
console.log(oDiv.style.borderLeftStyle); // dashed
// 设置
oDiv.style.backgroundColor = "blue";
oDiv.style.fontSize = "16px";
oDiv.style.border = "10px solid #ccc";
</script>
</body>
</html>注：在使用点语法去获取到style里面的属性的时候，需要以驼峰式命名方式如background-color->backgroundColor
事件监听
事件就是用户的某个行为，能够触发一个函数，每一个事件对应这一个函数。
事件的绑定可以分为dom0级和dom2级，下面我们来看看两者的区别
- dom0级
<input id="btn" type="button" onclick="console.log('You clicked the button!');" value="Click" />
直接在标签上定义onclick，在上面写被点击所要响应的行为。
还有一种通过在js中去编写点击事件
box.onclick = function() {
// 事件发生后需要执行的语句 下面的语句是事件发生才调用
alert("事件被调用了");
}
- dom2级
不过在使用dom2级的事件监听需要注意兼容性问题，新旧版本的流浪器的兼容问题。
在小于IE9的浏览器
element.attachEvent('onclick', function() { /* do stuff here*/ });添加监听element.detachEvent('onclick',function(){})移出监听大部分大于IE9的浏览器
element.addEventListener('click', function() { /* do stuff here*/ }, false);element.removeEventListener('click',function(){},false)第一个参数就表示事件的行为，attachEvent填写的与dom0级一样需要加on，而addEventListener则要去掉on
第二个参数就表示具体的响应操作。
addEventListener的第三个参数表示冒泡排序的响应，再后面会具体讲解。
我们来总结一下dom0级 dom2级
dom0级
- dom0级同一个对象，绑定同一个事件时，绑定多次后者会将前者替换。
- 所有的dom0级的事件都以on开头。
- 支持冒泡不知道捕获。
- 若要取消事件，设置空或null即可。
- 可以绑定多个同样的事件，切不会被替换。
- 低版本的IE使用attachEvent()/detachEvent 高版本IE使用addEventListener/removeEventListener
- 低版本需要是事件名字前添加on，高版本去掉on
常见的事件
onchange() 区域内容被改变
onclick() 用户点击某个对象时调用
ondblclick() 用户双击某个对象时调用
onfocus() 元素获取焦点
onblus() 元素失去焦点
onketdown() 某个键盘按键被按下
onkeyup() 某个键盘按键被松开
onkeypress() 某个键盘按键被按下并松开
onload() 一张页面或一幅图像完成加载
onmousedown() 鼠标按钮被按下
onmouseup() 鼠标按钮被松开
onmouseover() 鼠标移到某元素之上
onmousemove() 鼠标从某元素已开
onreset() 重置按钮内按下
onsubmit() 提交按钮被按下
onunload() 用户退出(刷新)页面
下面来一个demo，点击按钮控制球移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
img {
height: 500px;
position: absolute;
top: 180px;
left: 180px;
}
div{
background-color: skyblue;
border-radius: 50%;
width: 50px;
height: 50px;
position: absolute;
top:180px;
left: 180px;
}
</style>
</head>
<body>
<div id="pic"></div>
<table id="ctrl">
<tr>
<td><input type="button" value="↖"></td>
<td><input type="button" value="↑"></td>
<td><input type="button" value="↗"></td>
</tr>
<tr>
<td><input type="button" value="←"></td>
<td></td>
<td><input type="button" value="→"></td>
</tr>
<tr>
<td><input type="button" value="↙"></td>
<td><input type="button" value="↓"></td>
<td><input type="button" value="↘"></td>
</tr>
</table>
<script type="text/javascript">
// 实现点击任何按钮 进行图片对应位置移动
var ctrl = document.getElementById("ctrl");
var tds = ctrl.getElementsByTagName("td");
var pic = document.getElementById("pic");
//alert(tds.length);
var nowTop = 180;
var nowLeft = 180;
// 8个按钮事件监听
tds[0].onclick = function() {
nowTop -= 8;
nowLeft -= 8;
move();
}
tds[1].onclick = function() {
nowTop -= 8;
move();
}
tds[2].onclick = function() {
nowTop -= 8;
nowLeft += 8;
move();
}
tds[3].onclick = function() {
nowLeft -= 8;
move();
}
tds[5].onclick = function() {
nowLeft += 8;
move();
}
tds[6].onclick = function() {
nowLeft -= 8;
nowTop += 8;
move();
}
tds[7].onclick = function() {
nowTop += 8;
move();
}
tds[8].onclick = function() {
nowLeft += 8;
nowTop += 8;
move();
}
function move() {
// 修改图片的left和top属性值
pic.style.left = nowLeft + "px";
pic.style.top = nowTop + "px";
}
</script>
</body>
</html>批量添加事件需要的闭包问题
就像之前讲数组时候，给数组添加函数的闭包问题，这次有了实际的应用环节。
现在我们需要通过循环，给所有div设置点击事件，被点击的那个div背景色变成红色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div {
width: 60px;
height: 60px;
float: left;
background: skyblue;
margin-right: 12px;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script type="text/javascript">
var divs = document.getElementsByTagName("div");
for(var i=0; i<divs.length; i++) {
divs[i].onclick = function() {
console.log(i);
divs[i].style.backgroundColor = "red";
}
}
</script>
</body>
</html>方法一：用IIFE。
var divs = document.getElementsByTagName("div");
for(var i=0; i<divs.length; i++) {
// 解决方案一 IIFE
(function(n){divs[n].onclick = function() {
console.log(n);
divs[n].style.backgroundColor = "red";
}})(i);
}方法二：强制添加属性方法
for(var i=0; i<divs.length; i++) {
divs[i].index = i;
// 设置监听
divs[i].onclick = function() {
divs[this.index].style.backgroundColor = "yellow";
}
} window.onload
onload方法表示页面加载之后再执行。
大家可以试着把js代码放在所有元素的做前面，以上面demo为例，把js代码放到第一个div之前，你会惊奇的发现点击效果没用了。因为在页面加载渲染之前，就执行了js代码，去设置事件就可能会出现找不到元素报错等现象。你们可以选择把js代码挪到后面，若你非要这么放着也不是不可以，需要把js代码放置到window.onload()方法里面。
<body>
<script type="text/javascript">
window.onload = function(){
var divs = document.getElementsByTagName("div");
for(var i=0; i<divs.length; i++) {
// 解决方案二 IIFE
(function(n){divs[n].onclick = function() {
console.log(n);
divs[n].style.backgroundColor = "red";
}})(i);
}
}
</script>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>js的dom对象的获取，修改属性和事件的设置已讲完，接下来会来讲js的dom对象的一个实际应用轮播图，如有表达错的请谅解，并请提出指出，且修改错误，望能共同进步。