摘要：基礎知識基礎精講文檔對象模型，提供一些屬性和方法可以讓我們去操作元素。

DOM：document.object model 文檔對象模型，提供一些屬性和方法可以讓我們去操作DOM元素。

document.getElementById 一個元素

[context].getElementsByTagName 元素集合

[context].getElementsByClassName 元素集合

document.getElementsByName 節點集合

document.documentElement 獲取整個HTML對象

document.body 獲取整個BODY對象

document.head 獲取整個HEAD對象

[context].querySelector 一個元素對象

[context].querySelectorAll 獲取元素集合

...

getElementById

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

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


    

    

    



getElementsByClassName
上下文可以隨意指定
獲取的結果也是一個元素集合（類數組集合）
1、真實項目中我們經常會通過樣式類名來獲取元素，getElementsByClassName這個方法在IE6~8瀏覽器中是不兼容的

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

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

DOM的節點


node：節點，瀏覽器認為在一個HTML頁面中所有內容都是節點（包括標簽，注釋，文字文本等）

元素節點 ：HTML標簽
文本節點 ：文字內容（高版本瀏覽器會把空格和換行也當作文本節點）
注釋節點：注釋內容
document文檔節點
...


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

childNodes
獲取當前元素所有的子節點（節點集合：類數組）
注：不僅僅是元素節點，文本、注釋等都會包含在內；子節點說明只是在兒子輩分中查找；

children
獲取所有的元素子節點（元素集合）
在IE6~8下獲取的結果和標準瀏覽器中有區別（IE6~8中會把注釋節點當做元素節點獲取到）

parentNode
獲取當前元素的父節點（元素對象）
previousSibling && nextSibling 
previousSibling：獲取當前節點的上一個哥哥節點（不一定是元素節點也可以能是文本和注釋）
nextSibling：獲取當前節點的下一個弟弟節點

previousElementSibling && nextElementSibling
previousElementSibling：獲取當前節點的上一個哥哥元素節點
nextElementSibling：獲取當前節點下一個弟弟元素節點
IE6~8下不兼容

firstChild  && lastChild
fristChild：當前元素所有子節點中的第一個（也不一定時元素節點，可能是文本和注釋）
lastChild：當前元素所有子節點中的最后一個

fristElementChild && lastElementChild （IE6~8 兼容）
DOM的增刪改
真實項目中，我們偶爾會在JS中動態創建一些HTML標簽，然后把其增加到頁面中
document.createElement
在JS中動態創建一個HTML標簽
appendChild
容器.appendChild(新元素)
把當前創建的新元素添加到容器的末尾位置

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

//=>真實項目中很多需求都是通過動態創建元素來完成的，其中有一個需求:解析一個URL地址每一部分的信息（包含問號傳遞的參數值）
//->1.純字符串拆分
//->2.編寫強大的正則，捕獲到需要的結果
//->3.通過動態創建一個A標簽，利用A標簽的一些內置屬性來分別獲取每一個部分的內容
//->...
/***
    var link=document.createElement("a");
    link.;//->此處地址就是我們需要解析的URL
    //->hash:存儲了哈希值 "#teacher"
    //->hostname: 存儲的是域名 "http//www.andy.com"
    //->pathname: 存儲的是請求資源的路徑 "/stu/"
    //->protocol: 協議 "http:"
    //->search: 存儲的是問號傳遞參數值，沒有傳遞是字符串 "?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(元素)
在當前容器中把某一個元素移除掉

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

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

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

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

與頁面HTML結構無關的普通對象
與頁面HTML結構存在映射關系的元素對象

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

//=>獲取的結果是一個日期格式的對象：Mon Jul 02 2018 14:00:14 GMT+0800 (中國標準時間)

typeof new Date()->"object"

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