解析过程：
HTML加载完毕，渲染引擎会在内存中把HTML文档，生成一个DOM树，getElementById是获取内中DOM上的元素节点。然后操作的时候修改的是该元素的属性。结构如下图：
常用的DOM方法：
操作节点，必须首先找到该元素。有三种方法来做这件事：
通过id 找到HTML 元素
document.getElementById("demo");
通过标签名找到HTML 元素
document.getElementsByTagName("div");
通过类名找到HTML 元素
document.getElementsByClassName("a");
DOM的节点并不是孤立的，因此可以通过DOM节点之间的相对关系对它们进行访问。如父节点，子节点，兄弟节点
设置属性：
//两种方式不能交换使用，赋值和获取值必须使用用一种方法。
var div = document.getElementById("box");
//元素节点.属性（元素节点[属性]）:绑定的属性值不会出现在标签上。
div.aaaa = "1111";
console.log(div.aaaa);
//get/set/removeAttribut: 绑定的属性值会出现在标签上。
div.setAttribute("bbbb","2222");
console.log(div.getAttribute("aaaa"));
console.log(div.getAttribute("bbbb"));
打印结果：
1111
null
2222
其他的用法:
innerHTML: testDiv.innerHTML = <p>这是一段文字</p> 比较粗放，可以把一段html内容插入标签，一旦使用了它它的全部内容就会被替换。
createElement:创建一个新的元素， 语法：document.createElement(nodename),使用了这个方法但它不是dom节点树的组成部分，只是文档碎片。
appendChild: 语法parent.appendChild(child) 插入文档树中
createTextNode: 创建文本节点，把文本节点追加到元素节点上,语法 var text = document.createTextNode("hello world");child appendChild(text); 这样就能看到文本了
insertBefore（new,target） 在现有的元素之前插入新的元素，但是很遗憾没有插入之后的
node（nodeChild/nodetype/nodename/nodevalue）
nodeName 属性含有某个节点的名称。
* 元素节点的 nodeName 是标签名称
* 属性节点的 nodeName 是属性名称
* 文本节点的 nodeName 永远是 #text
* 文档节点的 nodeName 永远是 #document
nodeValue
对于文本节点，nodeValue 属性包含文本。
对于属性节点，nodeValue 属性包含属性值。
nodeValue 属性对于文档节点和元素节点是不可用的。
nodeType 属性可返回节点的类型。
最重要的节点类型是：
元素类型 节点类型
元素element 1
属性attr 2
文本text 3
注释comments 8
文档document 9
判断字符串已『xx』开头:
var str = "abcdefg";
//判断str是否以a为开头？（给定字符串然后他的索引值为0）
var num = str.indexOf("ab");
//只有返回值为0，那么字符串才是以参数为开头 ,如果查询不到，返回值为-1；
alert(num);
zIndex
属性设置元素的堆叠顺序。该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。
Default z-index is 0. Z-index -1 has lower priority.
Object.style.zIndex=auto|number
attachEvent与addEventListener区别
obj.attachEvent("on"+e,fun);//测试浏览器，发现：firefox、chrome、IE9、IE10、IE11、safari、opera都不兼容,IE7、IE8兼容，
obj.addEventListener(e,fun,false);//测试浏览器，发现：firefox、chrome、IE、safari、opera都兼容，IE7、IE8不兼容，
