获取DOM元素

document.getElementById 一个元素

通过ID名称获取元素，元素是个对象;元素都是对象数据类型的；

如果获取不到，获取结果是null

如果名字相同，只获取第一个

getElementById的上下文只能是document；

[context].getElementsByTagName 元素集合

通过标签名来获取元素；得到是一个元素集合；
getElementsByTagName 方法支持元素作为该方法的上下文；

[context].getElementsByClassName 元素集合

通过class名称获取DOM元素集合；
结果也是一个复数，如果需要获取具体的某个元素，需要加上索引；

document.getElementsByName 节点集合

通过name属性来获取元素集合；一般用于表单元素；

document.documentElement 获取整个HTML对象
document.body 获取整个BODY对像
document.head 获取整个HEAD对像
[context].querySelector 一个元素对象
[context].querySelectorAll 获取元素集合
......

动态操作DOM元素

document.createElement: 创建一个元素
document.createElement(标签名)
appendChild 向容器的末尾添加子节点
容器.appendChild(元素)
box.appendChild(newDiv)
3.insertBefore : 向容器中的某个元素前面插入新元素
容器.insertBefore(newChild,oldChild)
box.insertBefore(newDiv,first)
removeChild : 删除子节点
容器.removeChild(oldChild)
replaceChild: 用新的子节点替换老的子节点
容器.replaceChild(newChild,oldChild)
cloneNode : 克隆一份同样的元素
cloneNode的参数一个是true，代表深度克隆，将子孙节点也克隆出来
false：如果不传就是false；浅克隆；
var divs = box.cloneNode(true);
getAttribute : 获取行间属性所对应的属性值；没有获取到是null;
setAttribute : 设置行间属性所对应的属性值
setAttribute(属性名，属性值)
removeAttribute(属性名): 移除行间属性
classList; add remove replace 类名的增删改

box.className="a"
box.classList.add("a")
box.classList.remove("a")
box.classList.replace("a","b")// 第一个参数是旧的，后面是新的class

DOM的节点以及属性

node：节点，浏览器认为在一个HTML页面内的所有内容都是节点（包括标签、注释、文本文字等）

元素节点：HTML标签
文本节点：文字内容（高版本浏览器会把空格和换行也当做文本节点）
注释节点：注释内容
document文档节点
...

元素节点
nodeType：1
nodeName：大写标签名（在部分浏览器的怪异模式下，我们写的标签名是小写，它获取的就是小写...）
tagName：获取当前元素的标签名（获取的标签名一般都是大写），常用这个方法
nodeValue：null

文本节点
nodeType：3
nodeName：#text
nodeValue：文本内容

注释节点
nodeType：8
nodeName：#comment
nodeValue：注释内容

文档节点
nodeType：9
nodeName：#document
nodeValue：null

childNodes : 当前元素所有的子节点
children : 当前元素的所有的子元素节点；
parentNode : 获取当前元素的父亲节点 document 是根节点，他的父亲节点是null;
previousSibling : 上一个哥哥节点
previousElementSibling : 上一个哥哥元素节点（IE8以下是不兼容的）
nextSibling : 下一个弟弟节点
nextElementSibling : 下一个弟弟元素节点；（IE8以下是不兼容的）
firstChild : 第一个子节点
firstElementChild : 第一个子元素节点（IE8以下是不兼容的）
lastChild : 最后一个子节点
lastElementChild : 最后一个子元素节点（IE8以下是不兼容的）

    // 获取上一个哥哥元素节点，兼容所有浏览器；
    function getBrother(curEle) {
        var pre = curEle.previousSibling;
        while(pre){ //如果pre存在
            if(pre.nodeType===1){
                return pre;
            }
            pre = pre.previousSibling;// pre等于哥哥节点的哥哥节点；
        }
    }
    var last= document.getElementById("last");
    console.log(getBrother(last));

//或使用函数递归
 function getBrother(curEle) {
        var pre = curEle.previousSibling;
        if(pre){
              if(pre.nodeType===1){
                  return pre;
               }else{
                    return getBrother(pre); 
                  } 
         }
   }