摘要：如果傳遞的參數(shù)是，將遞歸復(fù)制當(dāng)前節(jié)點的所有子孫節(jié)點。的話只復(fù)制當(dāng)前節(jié)點。設(shè)置內(nèi)容時，能將里面的標(biāo)簽渲染成正常的標(biāo)簽。

DOM由節(jié)點組成

在 HTML DOM （文檔對象模型）中，每個部分都是節(jié)點：
文檔本身是文檔節(jié)點
所有 HTML 元素是元素節(jié)點
所有 HTML 屬性是屬性節(jié)點
HTML 元素內(nèi)的文本是文本節(jié)點
注釋是注釋節(jié)點

1．重要節(jié)點類型：標(biāo)簽(元素)節(jié)點，屬性節(jié)點，文本節(jié)點。

2．重要節(jié)點屬性：
（1）nodeType 節(jié)點類型（數(shù)字表示，標(biāo)簽1，屬性2，文本3）
（2）nodeName 節(jié)點名字
（3）nodeValue 節(jié)點值
3.不同類型節(jié)點的屬性取值

	標(biāo)簽節(jié)點	屬性節(jié)點	文本節(jié)點
nodeType節(jié)點類型	1	2	3
nodeName節(jié)點名字	對應(yīng)的標(biāo)簽名	對應(yīng)的屬性名	#text
nodeValue節(jié)點值	null	對應(yīng)的屬性值	對應(yīng)的文本內(nèi)容

標(biāo)簽節(jié)點：
nodeType：1;
nodeName：對應(yīng)的標(biāo)簽名;
nodeValue:null

屬性節(jié)點:
nodeType：2;
nodeName：對應(yīng)的屬性名;
nodeValue:對應(yīng)的屬性值

文本節(jié)點:
nodeType：3;
nodeName：#text;
nodeValue:元素節(jié)點或?qū)傩怨?jié)點中的文本內(nèi)容

文檔節(jié)點:
nodeType：9;
nodeName：表示整個文檔（DOM 樹的根節(jié)點）
nodeValue:document

獲取節(jié)點

獲得當(dāng)前元素的父節(jié)點 : .parentNode

獲得當(dāng)前元素的子節(jié)點 :
.childNodes（標(biāo)準(zhǔn)屬性）獲取標(biāo)簽節(jié)點和文本節(jié)點
.children不是DOM的標(biāo)簽屬性，但是所有的瀏覽器都支持，只會獲得標(biāo)簽子節(jié)點

獲取相鄰節(jié)點的屬性:

[next（previous）Sibling]、[next（previous）ElementSibling]

.nextSibling :
返回指定節(jié)點之后緊跟的節(jié)點（同級）。
被返回的節(jié)點以 Node 對象返回,元素中的空格被視作文本，而文本被視作文本節(jié)點
IE8及之前的瀏覽器會忽略空白文本節(jié)點

function getPrevNode (dom){
  var preNode=dom.previousSibling;
  var txt=preNode.nodeValue.trim(); //"    "
  if(preNode.nodeType==3 &&　txt.length==0){
     return preNode.previousSibling
  }else{
    return preNode
  }
}

.nextElementSibling:
IE8及之前的瀏覽器不支持這個屬性，只會獲得標(biāo)簽節(jié)點

//解決兼容性的問題
function getNextElement(element){

    if(element.nextElementSibling){
        return element.nextElementSibling;
    }else{
        var ele = element.nextSibling;
        console.log(ele)
        while(ele && ele.nodeType !==1){
            ele= ele.nextSibling;
        }
        return ele;
    }
}

父元素的first與last子節(jié)點 ：[first（last）Child]、[first（last）ElementChild]

.firstChild:
所有的瀏覽器都支持的，獲取標(biāo)簽節(jié)點、文本節(jié)點，
但是IE8及之前的低版本的瀏覽器，是可以忽略空白文本節(jié)點的而獲得的是標(biāo)簽節(jié)點

.firstElementChild:
IE8及之前的低版本的瀏覽器不支持，直接獲取父元素的第一個標(biāo)簽節(jié)點

function getFirstElementChild(element){
    if(element.firstElementChild){
        return element.firstElementChild;
    }else{
         var ele =  element.firstChild;
        while(ele && ele.nodeType !==1){
               ele = ele.nextSibling;
        }
        return ele;
    }
}

function getLastElementChild(element){
    if(element.lastElementChild){
        return element.lastElementChild;
    }else{
        var ele = element.lastChild;
        while(ele&&ele.nodeType!==1){
           ele=  ele.previousSibling;
        }
        return ele;
    }
}

總結(jié)

. childNodes ;（標(biāo)準(zhǔn)屬性）、next（previous）Sibling、first（last）Child
[不但可以獲得標(biāo)簽節(jié)點，還會獲取文本節(jié)點，但ie8及之前瀏覽器會忽略空本文本節(jié)點]

.children；[所有瀏覽器都支持，只會獲得當(dāng)前元素的標(biāo)簽子元素]
next（previous）ElementSibling、first（last）ElementChild
[IE8及之前的低版本瀏覽器不支持，只獲取標(biāo)簽節(jié)點]

節(jié)點操作 動態(tài)創(chuàng)建節(jié)點元素

document.createElement("標(biāo)簽名");//創(chuàng)建元素節(jié)點；
document.createTextNode("txt");//創(chuàng)建文本節(jié)點；

1．父級元素. appendChild(節(jié)點元素)--把節(jié)點插入到父節(jié)點的末尾

2．父級元素.insertBefore(新節(jié)點,插入位置)--把新節(jié)點插入到位置的前面

父級元素.removeChild(節(jié)點元素); //刪除節(jié)點元素

父級元素.replaceChild(節(jié)點1,節(jié)點2); //用節(jié)點1替換節(jié)點2

克隆節(jié)點：

cloneNode（boolean值）
1.該方法將復(fù)制并返回調(diào)用它的節(jié)點的副本。
2.如果傳遞的參數(shù)是 true，將遞歸復(fù)制當(dāng)前節(jié)點的所有子孫節(jié)點。False的話只復(fù)制當(dāng)前節(jié)點。

如果參數(shù)為False的話，僅僅克隆的是一個標(biāo)簽(不傳參，默認(rèn)值為false)
  如果參數(shù)為true的話，標(biāo)簽之間的內(nèi)容也會克隆，也叫做深度克隆

3.返回的節(jié)點不屬于文檔樹，它的 parentNode 屬性為 null。
4.當(dāng)復(fù)制的是 Element 節(jié)點時，它的所有屬性都將被復(fù)制。但是，當(dāng)前節(jié)點上注冊的事件不會被復(fù)制

節(jié)點屬性 基本用法

1.對象.的方式設(shè)置、獲取屬性[元素是DOM對象]

例如：txt.value=”123”;{不能設(shè)置、獲取自定義屬性}

2.setAttribute(屬性名，屬性值) ：設(shè)置屬性，也可設(shè)置自定義屬性，推薦使用
注意：設(shè)置已經(jīng)存在的屬性時，會將原來的屬性值覆蓋
3.getAttribute() 可獲得行內(nèi)的原生屬性，也可獲得自定義屬性

4.removeAttribute(要移除的屬性名) 徹底刪除

給元素節(jié)點設(shè)置樣式

給元素設(shè)置樣式的兩種形式（通過對象.的方式）：

1.設(shè)置類名
className：元素的一個屬性，設(shè)置類名；
[加入要為某個元素添加多個樣式時，可以將樣式都放在一個css的類樣式中，然后通過元素的屬性className獲取該類名。]

dom.setAttribute("class","xxx");

IE6/7不支持setAttribute("class",xxx)方式設(shè)置元素的class。

dom.setAttribute("className", "xxx")

IE8/9/10/Firefox/Safari/Chrome/Opera不支持setAttribute("className",xxx)方式設(shè)置元素的class

dom.className = "xxx";

所有瀏覽器都支持

dom.className = dom.className.replace("hide","show");
//字符串的替換，僅僅是替換了要替換的字符，不改變其它的

2．Style：元素的一個屬性，通過其設(shè)置一個樣式。
例如：

dom.style.backgroundColor="red"; //將樣式的中橫線寫法換成駝峰的寫法
dom.style.background="red";
dom.style.color="red";

設(shè)置、清除類的方式

1．設(shè)置類名：dom.className="類名";
2．清除類名：dom.className="";
3．徹底清除類的屬性：dom.removeAttribute("class")

設(shè)置、獲取標(biāo)簽中的文本內(nèi)容

獲取內(nèi)容區(qū)別：
1．innerText只打印標(biāo)簽之間的文本內(nèi)容，不打印標(biāo)簽
2．innerHTML,不但打印文本內(nèi)容，連標(biāo)簽間的標(biāo)簽也打印出來。高版本瀏覽器會將格式原樣輸出

設(shè)置內(nèi)容區(qū)別：
1.innerText 設(shè)置內(nèi)容時，無法設(shè)置標(biāo)簽，會將標(biāo)簽進(jìn)行轉(zhuǎn)義。
2.innerHtml設(shè)置內(nèi)容時，能將里面的標(biāo)簽渲染成正常的html標(biāo)簽 。

小結(jié)：
（1）innerHTML所有的瀏覽器都支持，不但獲取文本，還獲取標(biāo)簽間的標(biāo)簽。
（2）innerText是老版本的火狐瀏覽器不支持，只支持用textContent；
（3）textContent是Ie8之前的瀏覽器不支持，只支持innerText；

動態(tài)創(chuàng)建元素

凡是通過js來設(shè)置頁面的標(biāo)簽都可以稱為動態(tài)的創(chuàng)建頁面元素。
1.document.write() 幾乎是很少用的
2.InnerHTML：直接在里面寫html代碼生成標(biāo)簽
3.document.creatElement(標(biāo)簽名)：創(chuàng)建一對標(biāo)簽

獲取樣式

obj.style：只能獲取html標(biāo)簽中的style屬性中的值（style="..."）

獲取定義在