DOM
DOM 的全称是document object model 文档对象模型；
js中通过dom来对HTML文档进行操作，只要理解了dom就可以随心所欲的操作web了；
1.获取子元素对象及修改Html中内容：
<body>
<button id="btn">button</button>
<button>button02</button>
<input class="inputclass" type="radio" name="radio01" value="input-radio" />
<script type="text/javascript">
// "[object HTMLDocument]" document其实也是html的一个元素节点，只不过浏览器啊已经将其转化成了对象document
// console.log(document);
// 通过id找子元素对象
var btn = document.getElementById("btn");
// 修改button的内部内容
btn.innerHTML="I am a button";
// 点击事件的回调函数
btn.onclick=function(){
alert("点击了");
}
//通过标签找对象，找出了同标签的所有对象；
var btn02 =document.getElementsByTagName("button");
console.log(btn02.length);//其实btn02是以数组，因为有两个button标签，长度为2；
var btn03 = btn02[1];
btn03.innerHTML="hhh";
// 通过name属性查找对象
var radio = document.getElementsByName("radio01")[0];
console.log(radio.name);//name属性
console.log(radio.value);//value属性
console.log(radio.className);//class属性；
</script>
</body>2.给view设置点击事件的回调函数：
// 点击事件的回调函数
btn.onclick=function(){
alert("点击了");
}3.通过标签查找子标签对象;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload=function(){
var div = document.getElementById("div");
//获取div下的所有子节点；
var nodes = div.childNodes;
// 结果是3；但是明明只有ul一个啊；其实childNodes把空白页算成一个节点了；
console.log(nodes.length);
//获取div下的所有的子标签；这个就不算空白了；
var ch = div.children;
console.log(ch.length);
//firstChild是算空白的，所有有空格的话，第一child就是text；
//同理lastChild也是一样的；
var firstch = div.firstChild;
alert(firstch);
};
</script>
</head>
<body>
<div id="div">
<ul>
<li>北京</li>
<li>上海</li>
<li>广州</li>
<li>深圳</li>
<li>西安</li>
</ul>
</div>
</body>
</html>
4.input的checkbox类型
设置选择checkbox的状态：
checkboxobjecl.checked=false|true;
5.Dom通过css选择器查找标签对象：
这个方法是很好用的，在ie8以上；
但是class属性有多个，满足条件的有多个，只会返回第一个；
var div = document.querySelector(.box div);
也可以全部返回符合条件的：返回一个数组；
var divs = document.querySelectorAll(.box);
查找class为box下的div标签；
6.添加，删除一个标签对象：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload=function(){
//获取div对象；
var div = document.getElementById("div");
//回去div下面的ul对象；
//第一种方式；
var ul = div.firstElementChild;
//第二种方式；这种方式只能获取div下面的第一个ul；
// var ul2 = document.querySelector(".div ul");
//创建一个li标签对象；
var li = document.createElement("li");
//创建一个文本节点；
// var tn= document.createTextNode("中国");
//在li中添加文本节点；
// li.appendChild(tn);
//当然也可以这么做，就不用创建文本节点了；
li.innerHTML="美国";
//在ul中末尾的添加一个li；
// ul.appendChild(li);
//在北极的前面添加了一个li；
var firstli = ul.firstElementChild;
ul.insertBefore(li,firstli);
//删除某个节点；
ul.removeChild(li);
};
</script>
</head>
<body>
<div id="div">
<ul>
<li>北极</li>
<li>南极</li>
<li>冬季</li>
<li>西吉</li>
</ul>
</div>
</body>
</html>
7.获取标签的style
做了一点兼容性处理：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div{
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
<script type="text/javascript">
window.onload = function(){
var div = document.getElementById("div");
//div.style.width 获取的是内联样式中设置的属性宽；css中设置的是获取不到的；
// console.log(div.style.width);
//修改内联样式中的属性宽：因为内联样式权重比较高，所以可以覆盖css中样式；
div.style.width="200px";
//div.currentStyle 只要ie浏览器，并且在ie8以上才有这个api，其他浏览器没有这个方法；并且是只能读取不能修改；
// console.log(div.currentStyle.width);
//getComputedStyle(div,null);这个api是window的，只读不能修改；
//这个api除了ie8以外，其他都支持的；
// var sty = getComputedStyle(div,null);
// console.log(sty.width);
// 所以这里要所兼容模式处理:
var width = getSty(div,"width");
console.log(width);
//自定义了一个获取style的函数，兼容了ie和其他浏览器；
function getSty(obj,name){
if(window.getComputedStyle){
return window.getComputedStyle(obj,null)[name];
}else{
return obj.currentStyle[name];
}
}
};
</script>
</head>
<body>
<div id="div" style="width: 120px;">
</div>
</body>
</html>
8.获取元素的属性的其他方法：
1.div.clientWidth;
获取元素的可见宽度，就是盒子的真是大小，包括padding在内；不包含border；
2.div.offsetWidth；
获取元素的宽度，保活padding，border；
3.div.offsetParent；
获取距离元素最近的开启定位模式的祖先元素；如果都没有开启定位，那么会返回body；
9.event的获取和xy的获取
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
width: 200px;
height: 100px;
border: 1px solid black;
}
#div2{
width: 200px;
height: 20px;
border: 1px solid black;
}
</style>
<script type="text/javascript">
window.onload=function(){
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
div1.onmousemove = function(event){
//这里需要做兼容性：ie是将event放在了window中的；
//其他浏览器是回调函数调用传进来的；
if(!event){
//当event没有传进来的时候，赋值window的event；
event=window.event;
}
var x = event.clientX;
var y = event.clientY;
div2.innerHTML=x+","+y;
};
};
</script>
</head>
<body>
<div id="div1">
</div>
<div id="div2">
</div>
</body>
</html>
clientx，y是相对于窗口的坐标；
pagex，y是相对于整个页面的坐标；但是在ie8中不支持；真恶心啊；
所以还是用clientx,y ，在使用的时候要获取滚动条的滚动距离
让div跟随鼠标移动而移动案例：
<script type="text/javascript">
window.onload=function(){
var div = document.getElementById("div1");
div1.onmousemove = function(event){
//这里需要做兼容性：ie是将event放在了window中的；
//其他浏览器是回调函数调用传进来的；
if(!event){
//当event没有传进来的时候，赋值window的event；
event=window.event;
}
var x = event.clientX;
var y = event.clientY;
var left = document.body.scrollLeft || document.documentElement.scrollLeft;
var top = document.body.scrollTop || document.documentElement.scrollTop;
div.style.left=x+left+"px";
div.style.top=y+top+"px";
};
};
</script>
10.事件冒泡：
javascript中的事件冒泡就和android中的事件处理方法一样，默认是向上传递的，只有在返回true的时候消费事件；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div{
width: 200px;
height: 200px;
background-color: yellow;
}
#span{
background-color: red;
}
</style>
<script type="text/javascript">
window.onload = function(){
var div =document.getElementById("div");
var span =document.getElementById("span");
var body = div.parentElement;
//给这三个对象都设置点击事件，span的父亲是div，div的父亲是body
//当你点击span的时候，事件冒泡到div，在到body，会触发三个点击事件；
//类似于android的onEvnet事件处理方法一样的，不做任何处理会向上级父类返回；
span.onclick=function(event){
event = event||window.event;
alert("我是span");
//设置取消事件的冒泡；父亲就接受不到事件了
event.cancelBubble=true;
};
div.onclick=function(){
alert("我是div");
//设置取消事件的冒泡；父亲就接受不到事件了
event.cancelBubble=true;
};
body.onclick=function(){
alert("我是body");
//设置取消事件的冒泡；父亲就接受不到事件了
event.cancelBubble=true;
};
};
</script>
</head>
<body>
<div id="div">
我是div
<span id="span">我是span</span>
</div>
我是body;
</body>
</html>
11.事件的委派：
比如一个ul下面有很多个li，如果给每一li设置点击事件的话会很多，而且动态添加 li 标签的时候是不能设置点击事件的；
所以要使用到事件的委派，利用事件的冒泡机制将事件传递给上级父类；
所有将事件的点击绑定给ul，此时你点击li 事件会冒泡到ul中；通过event.target就可以获取到你点击的那个li对象；
ul.onclick = function(event){
if( event.target.className == " li01" ){
此时执行li01的事件响应处理；
}
}
12.标签对象多事件的添加：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="div">
woshi div
</div>
<script type="text/javascript">
var div = document.getElementById("div");
//普通的设置点击回到函数的时候，多次设置会覆盖；
//addEventListener设置是不会覆盖的，但是没办法在ie8以下使用；
// div.addEventListener("click",function(){
// console.log("dianjil ");
// },false);
//
addEvent(div,"click",function(){
console.log("dianjil ");
});
function addEvent(obj,fname,callback){
if(obj.addEventListener){
obj.addEventListener(fname,callback,false);
}else{
//这种方式可以兼容到ie8以下；
obj.attachEvent("on"+fname,function(){
//修改回调函数中的this，不修改的是window；
callback.call(obj);
});
}
}
</script>
</body>
</html>12.键盘事件：
onkeydown 按住不松开，一直触发这个事件；
onkeyup
键盘事件一般是绑定给可以获取到焦点的组件；例如input，document；
document.onkeydown = function( event ){
event= event || document.event;
console.log(按下触发了);
//获取按键的编码
//altkey ctrlkey shiftkey 判断这三个是否被按下了；
if(event.keyCode==89 && event.altKey){
console.log(y和alt同时按下触发了);
}
};
document.onkeyup = function(){
console.log(按键松开了);
};
在input中设置onkeydown属性：
input.onkeydown=function(){
event = event || window.event;
if(event.keyCode>=48 && event.keycode <=57){
//在input中输入数字返回false，取消键盘的输入行为，不能输入数字；
return false;
}
}