js中的DOM

js中获取元素的方法
document.getElementById() 通过ID来获取一个元素
getElementById的上下文只能是document

1、理论上一个页面中的ID是唯一的，但是可能由于误操作写重复了，浏览器不会认为这是报错，此时通过getElementById获取的只是第一个
2、在IE67中会把表单元素的name值也当做ID，所以以后开发过程中表单的name不要和ID重复
3、在IE67下不区分ID的大小写，所以以后在开发过程中不要用大小写区分ID
4、我们可以不通过getElementById获取，直接的写id也代表当前的这个元素(但是不推荐这么写)

document.getElementsByTagName() 通过标签名来获取一组元素
document是当前获取的范围(我们称之为上下文 context)，并且这个getElementsByTagName方法的上下文不固定，不一定是document

document.getElementsByName() 通过name属性的值来获取一组元素，在IE浏览器下默认只有表单元素才天生自带name属性，所以在IE浏览器下getElementsByName只对表单元素起作用
getElementsByName的上下文只能是document

document.getElementsByClassName()  通过class属性的值(类名)来获取一组元素，此方法在IE6~8浏览器下不兼容
这个方法的上下文可以不是document

document.documentElement 获取整个HTML
document.body 获取整个body
document.head 获取整个head

获取当前屏幕的高度和宽度
var cw = document.documentElement.clientWidth || document.body.clientWidth;//顺序不要变
var ch = document.documentElement.clientHeight || document.body.clientHeight;
console.log(cw,ch);

基本上我们都是在移动端使用这两个方法：因为不兼容IE6~8
document.querySelector() 获取一个元素
document.querySelectorAll() 获取多个元素

Node:节点
节点分类           nodeType    nodeName   nodeValue
元素节点               1       大写标签名     null
文本节点(text)         3         #text      文字内容
注释节点(comment)      8         #comment   注释内容
document             9         #document   null
在标准浏览器(非IE6~8)中，浏览器会把空格和换行都当做文本节点来处理

childNodes:获取所有的子节点
children：获取所有的元素子节点  节点中包含元素节点和注释节点
parentNode：获取父亲节点
previousSibling：获取上一个哥哥节点
nextSibling：获取下一个弟弟节点
firstChild：获取大儿子
lastChild：获取小儿子

DOM增、删、改

增加创建:
创建一个元素节点：createElement
var oDiv = document.createElement("div");
oDiv.id = "div1";
oDiv.style.width = "100px";
oDiv.style.height = "100px";
oDiv.style.backgroundColor = "red";
oDiv.innerHTML = "珠峰培训";
我需要把创建的元素节点添加到我们的页面中(body中):appendChild
document.body.appendChild(oDiv);
appendChild：添加到指定元素中最末尾的位置

克隆一个和oDiv一模一样的：cloneNode(true/false) true:把当前的元素和它的子子孙孙都克隆  false:只克隆当前自己(默认值)
var oDiv2 = oDiv.cloneNode(true);
oDiv2.id = "div2";
oDiv2.style.backgroundColor = "yellow";

insertBefore：添加到指定的容器中某一个元素之前 要增加的新元素newEle，添加到谁之前oldEle
oldEle.parentNode.insertBefore(newEle,oldEle)
oDiv.parentNode.insertBefore(oDiv2, oDiv);
document.body.insertBefore(oDiv2, oDiv);

document.body.removeChild(oDiv); removeChild删除指定的元素

设置自定义属性，可以在HTML结构上看到的
    oDiv2.setAttribute("zhuFeng","珠峰");
    console.log(oDiv2.getAttribute("zhuFeng"));
    oDiv2.removeAttribute("zhuFeng");
这种方式在IE6~8下不能设置class的值