解析過程：
HTML加載完畢绞愚，渲染引擎會(huì)在內(nèi)存中把HTML文檔叙甸，生成一個(gè)DOM樹，getElementById是獲取內(nèi)中DOM上的元素節(jié)點(diǎn)爽醋。然后操作的時(shí)候修改的是該元素的屬性蚁署。結(jié)構(gòu)如下圖：
?常用的DOM方法：
操作節(jié)點(diǎn)，必須首先找到該元素蚂四。有三種方法來做這件事：
通過id?找到HTML?元素
document.getElementById("demo");
通過標(biāo)簽名找到HTML?元素
document.getElementsByTagName("div");
通過類名找到HTML?元素
document.getElementsByClassName("a");
DOM的節(jié)點(diǎn)并不是孤立的光戈，因此可以通過DOM節(jié)點(diǎn)之間的相對(duì)關(guān)系對(duì)它們進(jìn)行訪問。如父節(jié)點(diǎn)遂赠，子節(jié)點(diǎn)久妆，兄弟節(jié)點(diǎn)
設(shè)置屬性：
//兩種方式不能交換使用，賦值和獲取值必須使用用一種方法跷睦。
? ? var div = document.getElementById("box");
? ? //元素節(jié)點(diǎn).屬性（元素節(jié)點(diǎn)[屬性]）:綁定的屬性值不會(huì)出現(xiàn)在標(biāo)簽上筷弦。
? ? div.aaaa = "1111";
? ? console.log(div.aaaa);
? ? //get/set/removeAttribut: 綁定的屬性值會(huì)出現(xiàn)在標(biāo)簽上。
? ? div.setAttribute("bbbb","2222");
? ? console.log(div.getAttribute("aaaa"));
? ? console.log(div.getAttribute("bbbb"));
打印結(jié)果：
1111
?null
?2222
其他的用法:
innerHTML: ? ?testDiv.innerHTML ?= <p>這是一段文字</p> ?比較粗放抑诸，可以把一段html內(nèi)容插入標(biāo)簽烂琴，一旦使用了它它的全部內(nèi)容就會(huì)被替換。
createElement:創(chuàng)建一個(gè)新的元素蜕乡， 語法：document.createElement(nodename),使用了這個(gè)方法但它不是dom節(jié)點(diǎn)樹的組成部分奸绷，只是文檔碎片。
appendChild: 語法parent.appendChild(child) 插入文檔樹中
createTextNode: 創(chuàng)建文本節(jié)點(diǎn)层玲，把文本節(jié)點(diǎn)追加到元素節(jié)點(diǎn)上,語法 var text ?= document.createTextNode("hello world");child appendChild(text); 這樣就能看到文本了
insertBefore（new,target）?在現(xiàn)有的元素之前插入新的元素号醉，但是很遺憾沒有插入之后的
node（nodeChild/nodetype/nodename/nodevalue）
nodeName 屬性含有某個(gè)節(jié)點(diǎn)的名稱。
*?元素節(jié)點(diǎn)的 nodeName 是標(biāo)簽名稱?
*?屬性節(jié)點(diǎn)的 nodeName 是屬性名稱?
*?文本節(jié)點(diǎn)的 nodeName 永遠(yuǎn)是 #text
*?文檔節(jié)點(diǎn)的 nodeName 永遠(yuǎn)是 #document
nodeValue
對(duì)于文本節(jié)點(diǎn)辛块，nodeValue?屬性包含文本畔派。
對(duì)于屬性節(jié)點(diǎn)，nodeValue?屬性包含屬性值润绵。
nodeValue?屬性對(duì)于文檔節(jié)點(diǎn)和元素節(jié)點(diǎn)是不可用的线椰。
nodeType?屬性可返回節(jié)點(diǎn)的類型。
最重要的節(jié)點(diǎn)類型是：
元素類型 節(jié)點(diǎn)類型
元素element 1
屬性attr 2
文本text 3
注釋comments 8
文檔document 9
判斷字符串已『xx』開頭:
var str = "abcdefg";
? ? //判斷str是否以a為開頭尘盼？（給定字符串然后他的索引值為0）
? ? var num = str.indexOf("ab");
? ? //只有返回值為0憨愉，那么字符串才是以參數(shù)為開頭 ?,如果查詢不到呜魄，返回值為-1；
? ? alert(num);
zIndex
?屬性設(shè)置元素的堆疊順序莱衩。該屬性設(shè)置一個(gè)定位元素沿 z 軸的位置，z 軸定義為垂直延伸到顯示區(qū)的軸娇澎。如果為正數(shù)笨蚁，則離用戶更近，為負(fù)數(shù)則表示離用戶更遠(yuǎn)趟庄。
Default z-index is 0. Z-index -1 has lower priority.
Object.style.zIndex=auto|number
attachEvent與addEventListener區(qū)別
obj.attachEvent("on"+e,fun);//測(cè)試瀏覽器括细，發(fā)現(xiàn)：firefox、chrome戚啥、IE9奋单、IE10、IE11猫十、safari览濒、opera都不兼容,IE7、IE8兼容拖云，
obj.addEventListener(e,fun,false);//測(cè)試瀏覽器贷笛，發(fā)現(xiàn)：firefox、chrome宙项、IE乏苦、safari、opera都兼容尤筐，IE7汇荐、IE8不兼容，
