DOM基础
DOM ：document object model 文档对象模型 提供一些属性和方法让我们去操作DOM元素
获取DOM元素的方法
document.getElementById 一个元素
[context].getElementsByTagName 元素集合
[context].getElementsByClassName 元素集合
document.getElementsByName 节点集合
document.documentElement 获取整个HTML对象
document.body 获取整个BODY对象
document.head 获取整个HEAD对象
[context].querySelector 一个元素对象
[context].querySelectorAll 获取元素集合
document.getElementById()
此方法的上下文只能是document
一个HTML页面ID只能出现一次
ID重复不会报错
1、如果页面中的ID重复了 我们获取的结果是第一个ID对应的的元素对象
2、在IE7 及更低版本的浏览器戏中，会把表单元素的name值当ID来识别使用（项目中尽量不要让表单的name和其他元素的ID相同）
3、如果我们把js 放在结构的下面，我们可以直接使用ID 值来获取这个元素（不需要通过getElementById）而且这种方式会把页面中所以ID是他的元素都获取到（元素对象/元素集合） -》不规范不推荐
console.log(box1)
getElementsByTagName()
上下文是可以自己来指定
获取到的结果是一个元素集合（类数组集合）
1、获取的结果是集合 （当操作集合中的某一项需要先取出来再操作 ）
2、在指定的上下文中 获取所有子孙元素中的该标签名
getElementsByClassName() IE6-8不兼容
上下文自己指定
获取的结果也是一个元素集合（类数组集合）
1、通过样式类名获取元素
兼容处理
document.getElementsByClassName( )
//className 要获取的样式类名 （可能为一个也可能为多个）
context:获取元素的上下文->如果没有传递 默认为document
function getElementsByClass(className,context){
context =context || document;
把传递进来的样式类名的首尾空格先去掉，然后再按空格拆分字符串为数组。
var arr =className.replace(/(^ +| +$)/g,"").split(/ +/g);)
获取指定上下文中的所有元素标签，循环这些标签 获取没一个标签的className 样式类名的字符串
var ary=[ ];
var nodeList =context.getElementsByTagName("*");
for(var i =0,len=nodeList;i<len;i++)
{
var curNode = nodeList[i];
var isOK =true;
for(var j = 0;j<arr.length;j++)
{
var reg = new RegExp("(^| "+arr[j]+ " +|$)"));
if(!reg.test(curNode.className){
isOK=false;
break;
}
}
if(isOk){
ary[ary.length] =curNode;
}
}
return ary
}
getElementsByName ()
通过元素的name属性值获取一组元素（类数组：节点集合 NodeList）
它的上下文也只能是document
1、IE浏览器只能识别表单元素内的name属性值，所以我们这个方法一般都是用来操作表单元素的。
document.documentElement / document.body
获取HTML或者BODY（一个元素对象）
document.documentElement.clientWidth|| document.body.clientWidth
获取单钱浏览器窗口可视区域的宽度
querySelector() querySlectorAll()
在IE6-8 下不兼容 多用于移动端开发
querySelector() 获取一个元素对象方法仅仅返回匹配指定选择器的第一个元素
querySelectorAll() 获取的是一个元素集合
只要是CSS支持的选择器 基本都支持
=============================================================
DOM的节点
node:节点 在一个HTML页面中的所有内容都是节点（包括标签、注释、文字文本等）
元素节点 ：HTML标签
文本节点：文字内容（一些浏览器把空格和换行也当做文本节点）
注释节点：注释内容
document文档节点
元素节点：
nodeType:1
nodeName:大写标签名（在部分浏览器的怪异模式下，我们写的标签名是小写，它获取的就是小写）
nodeValue:null
[curEle].tagName: 获取当年元素的标签名（获取的标签名一般都是大写）
文本节点：文字内容（一些浏览器把空格和换行也当做文本节点）
nodeType:3
nodeName:#text
nodeValue:文本内容
注释节点：
nodeType:8
nodeName:#comment
nodeValue:注释内容
文档节点：
nodeType:9
nodeName:#document
nodeValue:null
节点是用来描述页面中每一部分之间关系
childNodes：（属性）
获取当前元素的所有子节点（类数组） 不仅是元素子节点 文本、注释都会包含在内
children:（属性）
获取所有元素的子节点
在IE6-8下获取的结果与标准浏览器有区别（会把注释节点当做元素节点获取到）
parentNode:（属性）
获取当期元素的父节点（元素对象）
previousSibling（属性）
获取当前节点的上一个兄弟节点（不一定是元素节点也可能是文本或者注释）
nextSibling（属性）
获取当前节点的下一个兄弟节点（不一定是元素节点也可能是文本或者注释）
previousElementSibling： （属性）
获取当前元素节点的上一个兄弟元素节点
nextElementSibling（属性）
获取当前元素节点的下一个熊弟元素节点
以上两个属性IE6 -8不兼容
firstChild （属性）
当前元素所有子节点中的第一个（也可能是文本或注释）
lastChild（属性）
当前元素的所有子节点中的最后一个
firstElementChild lastElementChild （IE6-8不兼容）
=============================================================
DOM的增删改
document.createElement(元素)
动态创建一个HTML标签
appendChild()
容器.appendChild(新元素)
把当前创建的新元素添加到容器的末尾位置
insertBefore()
容器.insertBefore(新元素 ，旧元素 )
URL处理的另一种方式
DOM删除修改
removeChild：
容器.removeChild(元素)
把当前容器中的某一个元素移除
replaceChild:
容器.replaceChild(新元素，老元素);
在当前容器中，拿新元素替换老元素
cloneNode 不能克隆元素上的事件操作
元素.cloneNode(false/true)
把原有的元素克隆一份 false 只克隆元素本身 true 克隆元素本身及其中内容都克隆
[set/get/remove]Attribute
给当前元素设置/获取/移除属性的（一般操作它的自定义属性）
box.setAttribute('myindex',0);
box.getAttribute('myindex')
box.removeAttribute('myindex')
使用xxx.index = 0 和 xxx.setAttribute('index',0)这两种设置自定义属性的区别
xxx.index: 是把当前操作的元素当做一个普通对象，为其设置一个属性名 跟DOM结构没关系
ele[attr]在设置自定义属性时，不会出现在元素标签中，只存在于元素对象下
xxx.setAttribute:把元素当特殊元素对象来处理 设置的自定义属性和页面结构中DOM元素映射在一起
setAttribute()设置属性会出现在元素标签中，在IE6,7中通通放在元素属性下；而在IE9和chrome中，，与直接写在标签中的属性一同存放于attributes属性下。
