摘要：基礎(chǔ)知識(shí)基礎(chǔ)精講文檔對(duì)象模型，提供一些屬性和方法可以讓我們?nèi)ゲ僮髟亍?/p>

DOM：document.object model 文檔對(duì)象模型，提供一些屬性和方法可以讓我們?nèi)ゲ僮鱀OM元素。

document.getElementById 一個(gè)元素

[context].getElementsByTagName 元素集合

[context].getElementsByClassName 元素集合

document.getElementsByName 節(jié)點(diǎn)集合

document.documentElement 獲取整個(gè)HTML對(duì)象

document.body 獲取整個(gè)BODY對(duì)象

document.head 獲取整個(gè)HEAD對(duì)象

[context].querySelector 一個(gè)元素對(duì)象

[context].querySelectorAll 獲取元素集合

...

getElementById

此方法的上下文只能是document
一個(gè)HTML頁(yè)面中的id理論上是不能重復(fù)的
1、如果頁(yè)面中的id重復(fù)了，我們獲取的結(jié)果是第一個(gè)id對(duì)應(yīng)的元素對(duì)象
2、在IE7及更低版本瀏覽器中，會(huì)把表單元素的name值當(dāng)做id來識(shí)別（項(xiàng)目中盡量不要讓表單的name和其他元素的id相同）
3、如果我們把JS放在結(jié)構(gòu)的下面，我們可以直接使用ID值來獲取這個(gè)元素（不需要通過getElementById獲?。?而且這種方式會(huì)把頁(yè)面中所有ID是他的元素都獲取到（元素對(duì)象/元素集合）=>不規(guī)范 不推薦

//=>獲取頁(yè)面中ID值為#box1的所有元素標(biāo)簽
var allList=document.getElementsByTagName("*"),
    result=[];
for(var i=0;i
getElementByTagName
上下文是可以自己指定的
獲取到的結(jié)果是一個(gè)元素的集合（類數(shù)組集合）
1、獲取的結(jié)果是集合，哪怕集合中只有一項(xiàng)，我們想要操作這一項(xiàng)（元素對(duì)象），需要先從集合中獲取出來，然后再操作
2、在指定的上下文中，獲取所有子子孫孫元素中標(biāo)簽名叫做這個(gè)的（后代篩選）


    

    

    



getElementsByClassName
上下文可以隨意指定
獲取的結(jié)果也是一個(gè)元素集合（類數(shù)組集合）
1、真實(shí)項(xiàng)目中我們經(jīng)常會(huì)通過樣式類名來獲取元素，getElementsByClassName這個(gè)方法在IE6~8瀏覽器中是不兼容的

getElementsByName
通過元素的NAME屬性值獲取一組元素（類數(shù)組：節(jié)點(diǎn)集合 NOdeList）
它的上下文也只能是document
1、IE瀏覽器只能識(shí)別表單元素的那么屬性值，所以我們這個(gè)方法一般都是用來操作表單元素的

document.documentElement/document.body
獲取HTML或者BODY（一個(gè)元素對(duì)象）
//=>獲取當(dāng)前瀏覽器窗口可視區(qū)域的寬度（當(dāng)前頁(yè)面一屏的寬度）
document.documentElement.clientWidth||document.body.clientWidth
//=>clientHeight 獲取高度
querySelector/querySelectorAll
在IE6~8下不兼容，而且也沒什么特別好辦法處理它的兼容，所以這兩個(gè)方法一般多用于移動(dòng)端開發(fā)使用
querySlector：獲取一個(gè)元素對(duì)象
querySlectorAll：獲取的是一個(gè)元素的集合
只要是css支持的選擇器，這里大部分都支持

DOM的節(jié)點(diǎn)


node：節(jié)點(diǎn)，瀏覽器認(rèn)為在一個(gè)HTML頁(yè)面中所有內(nèi)容都是節(jié)點(diǎn)（包括標(biāo)簽，注釋，文字文本等）

元素節(jié)點(diǎn) ：HTML標(biāo)簽
文本節(jié)點(diǎn) ：文字內(nèi)容（高版本瀏覽器會(huì)把空格和換行也當(dāng)作文本節(jié)點(diǎn)）
注釋節(jié)點(diǎn)：注釋內(nèi)容
document文檔節(jié)點(diǎn)
...


元素節(jié)點(diǎn)
nodeType：1；
nodeName：大寫標(biāo)簽名（在部分瀏覽器的怪異模式下，我們寫的標(biāo)簽名是小寫，它獲取的就是小寫...）
nodeValue：null
[curEle].tagName:獲取當(dāng)前元素的標(biāo)簽名（獲取的標(biāo)簽名一般都是大寫）
文本節(jié)點(diǎn)
nodeType：3
nodeName：#text
nodeValue：文本內(nèi)容
注釋節(jié)點(diǎn)
nodeType：8
nodeName：#comment
nodeValue：注釋內(nèi)容
文檔節(jié)點(diǎn)
nodeType：9
nodeName :#document
nodeValue：null
節(jié)點(diǎn)是用來描述頁(yè)面中每一部分之間關(guān)系的，只要可以獲取頁(yè)面中的一個(gè)節(jié)點(diǎn)，那么就可以通過相關(guān)的屬性和方法獲取頁(yè)面中的所有節(jié)點(diǎn)

childNodes
獲取當(dāng)前元素所有的子節(jié)點(diǎn)（節(jié)點(diǎn)集合：類數(shù)組）
注：不僅僅是元素節(jié)點(diǎn)，文本、注釋等都會(huì)包含在內(nèi)；子節(jié)點(diǎn)說明只是在兒子輩分中查找；

children
獲取所有的元素子節(jié)點(diǎn)（元素集合）
在IE6~8下獲取的結(jié)果和標(biāo)準(zhǔn)瀏覽器中有區(qū)別（IE6~8中會(huì)把注釋節(jié)點(diǎn)當(dāng)做元素節(jié)點(diǎn)獲取到）

parentNode
獲取當(dāng)前元素的父節(jié)點(diǎn)（元素對(duì)象）
previousSibling && nextSibling 
previousSibling：獲取當(dāng)前節(jié)點(diǎn)的上一個(gè)哥哥節(jié)點(diǎn)（不一定是元素節(jié)點(diǎn)也可以能是文本和注釋）
nextSibling：獲取當(dāng)前節(jié)點(diǎn)的下一個(gè)弟弟節(jié)點(diǎn)

previousElementSibling && nextElementSibling
previousElementSibling：獲取當(dāng)前節(jié)點(diǎn)的上一個(gè)哥哥元素節(jié)點(diǎn)
nextElementSibling：獲取當(dāng)前節(jié)點(diǎn)下一個(gè)弟弟元素節(jié)點(diǎn)
IE6~8下不兼容

firstChild  && lastChild
fristChild：當(dāng)前元素所有子節(jié)點(diǎn)中的第一個(gè)（也不一定時(shí)元素節(jié)點(diǎn)，可能是文本和注釋）
lastChild：當(dāng)前元素所有子節(jié)點(diǎn)中的最后一個(gè)

fristElementChild && lastElementChild （IE6~8 兼容）
DOM的增刪改
真實(shí)項(xiàng)目中，我們偶爾會(huì)在JS中動(dòng)態(tài)創(chuàng)建一些HTML標(biāo)簽，然后把其增加到頁(yè)面中
document.createElement
在JS中動(dòng)態(tài)創(chuàng)建一個(gè)HTML標(biāo)簽
appendChild
容器.appendChild(新元素)
把當(dāng)前創(chuàng)建的新元素添加到容器的末尾位置

insertBefore
容器.insertBefore(新元素，老元素)
在當(dāng)前容器中，把新創(chuàng)建的元素增加到老元素之前

//=>真實(shí)項(xiàng)目中很多需求都是通過動(dòng)態(tài)創(chuàng)建元素來完成的，其中有一個(gè)需求:解析一個(gè)URL地址每一部分的信息（包含問號(hào)傳遞的參數(shù)值）
//->1.純字符串拆分
//->2.編寫強(qiáng)大的正則，捕獲到需要的結(jié)果
//->3.通過動(dòng)態(tài)創(chuàng)建一個(gè)A標(biāo)簽，利用A標(biāo)簽的一些內(nèi)置屬性來分別獲取每一個(gè)部分的內(nèi)容
//->...
/***
    var link=document.createElement("a");
    link.;//->此處地址就是我們需要解析的URL
    //->hash:存儲(chǔ)了哈希值 "#teacher"
    //->hostname: 存儲(chǔ)的是域名 "http//www.andy.com"
    //->pathname: 存儲(chǔ)的是請(qǐng)求資源的路徑 "/stu/"
    //->protocol: 協(xié)議 "http:"
    //->search: 存儲(chǔ)的是問號(hào)傳遞參數(shù)值，沒有傳遞是字符串 "?name=andy&age=30&sex=0"
***/

function queryURLParameter(url){
    var link=document.createElement("a");
    link.href="url";
    var search=link.search,
        obj={};
    if(search.length===0) return;
    search=search.substr(1).split(/&|=/g);
    for(var i=0;i
removeChild
容器.removeChild(元素)
在當(dāng)前容器中把某一個(gè)元素移除掉

replaceChild
容器.replaceChild(新元素，老元素)
在當(dāng)前容器中，拿新元素替換老元素

cloneNode
元素.cloneNode(false/true)
把原有的元素克隆一份一模一樣的，false：只克隆當(dāng)前的元素本身，true：深度克隆，把當(dāng)前元素本身以及元素的所有后代都進(jìn)行克隆

[set/get/remove]Attribute
給當(dāng)前元素設(shè)置/獲取/移除 屬性的（一般操作的都是他的自定義屬性）
box.setAttribute("myIndex",0)
box.getAttribute("myIndex")
box.removeAttribute("myIndex")
使用xxx.index和xxx.setAttribute("index",0)這兩種設(shè)置自定義屬性的區(qū)別
xxx.index：是把當(dāng)前操作的元素當(dāng)做一個(gè)普通對(duì)象，為其設(shè)置一個(gè)屬性名（和頁(yè)面中的HTML標(biāo)簽沒關(guān)系）
xxx.setAttribute：把元素當(dāng)做特殊的元素對(duì)象來處理，設(shè)置的自定義屬性是和頁(yè)面結(jié)構(gòu)中的DOM元素映射在一起的

JS中獲取的元素對(duì)象，我們可以把它理解為兩種角色：

與頁(yè)面HTML結(jié)構(gòu)無關(guān)的普通對(duì)象
與頁(yè)面HTML結(jié)構(gòu)存在映射關(guān)系的元素對(duì)象

元素對(duì)象中的內(nèi)置屬性，大部分都和頁(yè)面的標(biāo)簽存再映射關(guān)系：
xxx.style.backgroundColor="xxx" 此時(shí)不僅把JS中對(duì)象對(duì)應(yīng)的屬性值改變了，而且也會(huì)映射到頁(yè)面的HTML標(biāo)簽上（標(biāo)簽中有一個(gè)style行內(nèi)樣式，元素的樣式改變了）
xxx.className="xxx" 此時(shí)不僅是把JS對(duì)象中的屬性值改了，而且頁(yè)面中的標(biāo)簽增加了class樣式類（可以看見的）
//獲取上一個(gè)哥哥元素節(jié)點(diǎn)
//=>獲取當(dāng)前元素的上一個(gè)節(jié)點(diǎn)
//=>循環(huán)判斷：當(dāng)上一個(gè)節(jié)點(diǎn)存在，并且上一個(gè)節(jié)點(diǎn)類型不為1時(shí)，持續(xù)循環(huán)，知道節(jié)點(diǎn)類型為1
function prevSibling(curELe){
    var p=curEle.previousSibling;
    while(p && typeof!==1){
        p=p.perviousSibling;
    }
    return p;
}
Date日期操作基礎(chǔ)講解
Date 是日期類，通過他可以對(duì)時(shí)間進(jìn)行處理
var time=new Date();//獲取當(dāng)前客戶端本機(jī)時(shí)間（當(dāng)前獲取的時(shí)間不能作為重要的參考依據(jù)）

//=>獲取的結(jié)果是一個(gè)日期格式的對(duì)象：Mon Jul 02 2018 14:00:14 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間)

typeof new Date()->"object"

//=>time.getFullYear()獲取四位整數(shù)年
//=>time.getMonth() 獲取月0~11, 代表1~12月
//=>time.getDate() 獲取日
//=>time.getDay() 獲取星期（0~6）代表周日~周六
//=>time.getHours() 獲取小時(shí)
//=>time.getMinutes() 獲取分鐘
//=>time.getSeconds() 獲取秒
//=>time.getMilliseconds() 獲取毫秒
//=>time.getTime() 獲取當(dāng)前日期距離"1970-01-01 00:00:00"毫秒差
var time=new Date("2017-10-22");//=>當(dāng)new Date中傳遞一個(gè)時(shí)間格式的字符串，相當(dāng)于把這個(gè)字符串轉(zhuǎn)換為標(biāo)準(zhǔn)的時(shí)間對(duì)象格式（轉(zhuǎn)換完成后，就可以調(diào)取上面我們講的那些方法了）
//=>時(shí)間格式的字符串
//"2017-10-22"(IE下識(shí)別不了)
//"2017/10/22"
//"2017/10/22 16:15:34"
//1530511656252(如果傳遞的是距離1970年的那個(gè)毫秒差，但是只能是數(shù)字)