資訊專欄INFORMATION COLUMN
摘要：如果傳遞的參數(shù)是，將遞歸復(fù)制當(dāng)前節(jié)點(diǎn)的所有子孫節(jié)點(diǎn)。的話只復(fù)制當(dāng)前節(jié)點(diǎn)。設(shè)置內(nèi)容時(shí)，能將里面的標(biāo)簽渲染成正常的標(biāo)簽。
DOM由節(jié)點(diǎn)組成
在 HTML DOM （文檔對(duì)象模型）中，每個(gè)部分都是節(jié)點(diǎn)：
文檔本身是文檔節(jié)點(diǎn)
所有 HTML 元素是元素節(jié)點(diǎn)
所有 HTML 屬性是屬性節(jié)點(diǎn)
HTML 元素內(nèi)的文本是文本節(jié)點(diǎn)
注釋是注釋節(jié)點(diǎn)
1．重要節(jié)點(diǎn)類型：標(biāo)簽(元素)節(jié)點(diǎn)，屬性節(jié)點(diǎn)，文本節(jié)點(diǎn)。
2．重要節(jié)點(diǎn)屬性：
（1）nodeType 節(jié)點(diǎn)類型（數(shù)字表示，標(biāo)簽1，屬性2，文本3）
（2）nodeName 節(jié)點(diǎn)名字
（3）nodeValue 節(jié)點(diǎn)值
3.不同類型節(jié)點(diǎn)的屬性取值
| 標(biāo)簽節(jié)點(diǎn) | 屬性節(jié)點(diǎn) | 文本節(jié)點(diǎn) | |
| nodeType節(jié)點(diǎn)類型 | 1 | 2 | 3 |
| nodeName節(jié)點(diǎn)名字 | 對(duì)應(yīng)的標(biāo)簽名 | 對(duì)應(yīng)的屬性名 | #text |
| nodeValue節(jié)點(diǎn)值 | null | 對(duì)應(yīng)的屬性值 | 對(duì)應(yīng)的文本內(nèi)容 |
標(biāo)簽節(jié)點(diǎn)：
nodeType：1;
nodeName：對(duì)應(yīng)的標(biāo)簽名;
nodeValue:null
屬性節(jié)點(diǎn):
nodeType：2;
nodeName：對(duì)應(yīng)的屬性名;
nodeValue:對(duì)應(yīng)的屬性值
文本節(jié)點(diǎn):
nodeType：3;
nodeName：#text;
nodeValue:元素節(jié)點(diǎn)或?qū)傩怨?jié)點(diǎn)中的文本內(nèi)容
文檔節(jié)點(diǎn):
nodeType：9;
nodeName：表示整個(gè)文檔（DOM 樹(shù)的根節(jié)點(diǎn)）
nodeValue:document
獲得當(dāng)前元素的父節(jié)點(diǎn) : .parentNode
獲得當(dāng)前元素的子節(jié)點(diǎn) :
.childNodes（標(biāo)準(zhǔn)屬性）獲取標(biāo)簽節(jié)點(diǎn)和文本節(jié)點(diǎn)
.children不是DOM的標(biāo)簽屬性，但是所有的瀏覽器都支持，只會(huì)獲得標(biāo)簽子節(jié)點(diǎn)
獲取相鄰節(jié)點(diǎn)的屬性:
[next（previous）Sibling]、[next（previous）ElementSibling]
.nextSibling :
返回指定節(jié)點(diǎn)之后緊跟的節(jié)點(diǎn)（同級(jí)）。
被返回的節(jié)點(diǎn)以 Node 對(duì)象返回,元素中的空格被視作文本，而文本被視作文本節(jié)點(diǎn)
IE8及之前的瀏覽器會(huì)忽略空白文本節(jié)點(diǎn)
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及之前的瀏覽器不支持這個(gè)屬性，只會(huì)獲得標(biāo)簽節(jié)點(diǎn)
//解決兼容性的問(wèn)題
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é)點(diǎn) ：[first（last）Child]、[first（last）ElementChild]
.firstChild:
所有的瀏覽器都支持的，獲取標(biāo)簽節(jié)點(diǎn)、文本節(jié)點(diǎn)，
但是IE8及之前的低版本的瀏覽器，是可以忽略空白文本節(jié)點(diǎn)的而獲得的是標(biāo)簽節(jié)點(diǎn)
.firstElementChild:
IE8及之前的低版本的瀏覽器不支持，直接獲取父元素的第一個(gè)標(biāo)簽節(jié)點(diǎn)
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é)點(diǎn)，還會(huì)獲取文本節(jié)點(diǎn)，但ie8及之前瀏覽器會(huì)忽略空本文本節(jié)點(diǎn)]
.children；[所有瀏覽器都支持，只會(huì)獲得當(dāng)前元素的標(biāo)簽子元素]
next（previous）ElementSibling、first（last）ElementChild
[IE8及之前的低版本瀏覽器不支持，只獲取標(biāo)簽節(jié)點(diǎn)]
document.createElement("標(biāo)簽名");//創(chuàng)建元素節(jié)點(diǎn)；
document.createTextNode("txt");//創(chuàng)建文本節(jié)點(diǎn)；
1．父級(jí)元素. appendChild(節(jié)點(diǎn)元素)--把節(jié)點(diǎn)插入到父節(jié)點(diǎn)的末尾
2．父級(jí)元素.insertBefore(新節(jié)點(diǎn),插入位置)--把新節(jié)點(diǎn)插入到位置的前面
父級(jí)元素.removeChild(節(jié)點(diǎn)元素); //刪除節(jié)點(diǎn)元素
父級(jí)元素.replaceChild(節(jié)點(diǎn)1,節(jié)點(diǎn)2); //用節(jié)點(diǎn)1替換節(jié)點(diǎn)2
克隆節(jié)點(diǎn)：cloneNode（boolean值）
1.該方法將復(fù)制并返回調(diào)用它的節(jié)點(diǎn)的副本。
2.如果傳遞的參數(shù)是 true，將遞歸復(fù)制當(dāng)前節(jié)點(diǎn)的所有子孫節(jié)點(diǎn)。False的話只復(fù)制當(dāng)前節(jié)點(diǎn)。
如果參數(shù)為False的話，僅僅克隆的是一個(gè)標(biāo)簽(不傳參，默認(rèn)值為false)
如果參數(shù)為true的話，標(biāo)簽之間的內(nèi)容也會(huì)克隆，也叫做深度克隆
3.返回的節(jié)點(diǎn)不屬于文檔樹(shù)，它的 parentNode 屬性為 null。
4.當(dāng)復(fù)制的是 Element 節(jié)點(diǎn)時(shí)，它的所有屬性都將被復(fù)制。但是，當(dāng)前節(jié)點(diǎn)上注冊(cè)的事件不會(huì)被復(fù)制
1.對(duì)象.的方式設(shè)置、獲取屬性[元素是DOM對(duì)象]
例如：txt.value=”123”;{不能設(shè)置、獲取自定義屬性}
2.setAttribute(屬性名，屬性值) ：設(shè)置屬性，也可設(shè)置自定義屬性，推薦使用
注意：設(shè)置已經(jīng)存在的屬性時(shí)，會(huì)將原來(lái)的屬性值覆蓋
3.getAttribute() 可獲得行內(nèi)的原生屬性，也可獲得自定義屬性
4.removeAttribute(要移除的屬性名) 徹底刪除
給元素節(jié)點(diǎn)設(shè)置樣式給元素設(shè)置樣式的兩種形式（通過(guò)對(duì)象.的方式）：
1.設(shè)置類名
className：元素的一個(gè)屬性，設(shè)置類名；
[加入要為某個(gè)元素添加多個(gè)樣式時(shí)，可以將樣式都放在一個(gè)css的類樣式中，然后通過(guò)元素的屬性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：元素的一個(gè)屬性，通過(guò)其設(shè)置一個(gè)樣式。
例如：
dom.style.backgroundColor="red"; //將樣式的中橫線寫(xiě)法換成駝峰的寫(xiě)法 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)簽也打印出來(lái)。高版本瀏覽器會(huì)將格式原樣輸出
設(shè)置內(nèi)容區(qū)別：
1.innerText 設(shè)置內(nèi)容時(shí)，無(wú)法設(shè)置標(biāo)簽，會(huì)將標(biāo)簽進(jìn)行轉(zhuǎn)義。
2.innerHtml設(shè)置內(nèi)容時(shí)，能將里面的標(biāo)簽渲染成正常的html標(biāo)簽 。
小結(jié)：
（1）innerHTML所有的瀏覽器都支持，不但獲取文本，還獲取標(biāo)簽間的標(biāo)簽。
（2）innerText是老版本的火狐瀏覽器不支持，只支持用textContent；
（3）textContent是Ie8之前的瀏覽器不支持，只支持innerText；
凡是通過(guò)js來(lái)設(shè)置頁(yè)面的標(biāo)簽都可以稱為動(dòng)態(tài)的創(chuàng)建頁(yè)面元素。
1.document.write() 幾乎是很少用的
2.InnerHTML：直接在里面寫(xiě)html代碼生成標(biāo)簽
3.document.creatElement(標(biāo)簽名)：創(chuàng)建一對(duì)標(biāo)簽
obj.style：只能獲取html標(biāo)簽中的style屬性中的值（style="..."）
獲取定義在