摘要：所有節(jié)點(diǎn)的屬性，用于表明節(jié)點(diǎn)的類型。節(jié)點(diǎn)具有以下特征以及其子節(jié)點(diǎn)可能是一個(gè)最多一個(gè)最多一個(gè)或。表示全部標(biāo)簽方法該方法返回給定特性的所有元素。實(shí)現(xiàn)處理事件的接口。類型該類型用于表現(xiàn)或元素，提供了對(duì)元素標(biāo)簽名子節(jié)點(diǎn)及特性的訪問。

幾個(gè)概念：

DOM：文檔對(duì)象模型，是針對(duì) HTML 和 XML 文檔的一個(gè) API（應(yīng)用程序編程接口）。

根節(jié)點(diǎn)：就是 Document 節(jié)點(diǎn)。

nodeType: 所有節(jié)點(diǎn)的屬性，用于表明節(jié)點(diǎn)的類型。

DOM1 級(jí)的接口，該接口除了 IE 之外，在其他所有瀏覽器中都可以訪問到這個(gè)類型。

節(jié)點(diǎn)類型由在 Node 類型中定義的下列 12 個(gè)數(shù)值常量來(lái)表示，任何節(jié)點(diǎn)類型必居其一：

Node.ELEMENT_NODE;

Node.ATTRIBUTE_NODE;

Node.TEXT_NODE;

Node.CDATA_SECTION_NODE;

Node.ENTITY_REFERENCE_NODE;

Node.ENTITY_NODE;

Node.PROCESSING_INSTRUCTION_NODE;

Node.COMMENT_NODE;

Node.DOCUMENT_NODE;

Node.DOCUMENT_TYPE_NODE;

11. Node.DOCUMENT_FRAGMENT_NODE;
12. Node.NOTATION_NODE;

分別返回 1-12 數(shù)值。

如：

hello this is h1
hello this is h2
this is a paragraph

console.log(document.getElementById("h1").nodeType == Node.ELEMENT_NODE); //true

因?yàn)?IE 兼容性問題，Node 類型的構(gòu)造函數(shù)無(wú)效，最好還是將它換成數(shù)字值進(jìn)行比較。如：

console.log(document.getElementById("h1").nodeType == 1); //true

在使用這兩個(gè)屬性之前，最好是先檢測(cè)一下節(jié)點(diǎn)的類型：

if (someNode.nodeValue == 1){
    value = someNode.nodeName;
}


console.log(document.getElementById("input").nodeName); //INPUT
console.log(document.getElementById("input").nodeValue); //null

對(duì)于元素節(jié)點(diǎn)（Node.ELEMENT_NODE）,nodeName 中始終是元素的標(biāo)簽名，nodeValue 中則為 null。

前者中保存著一個(gè) NodeList 對(duì)象；

后者并不是 Array 的實(shí)例；

可以通過(guò)方括號(hào)和 item() 方法來(lái)訪問在后者的節(jié)點(diǎn)；

如：

this is a paragraph

var para = document.getElementById("p");
var array = Array.prototype.slice.call(para.childNodes,0);
console.log(array);

上述代碼在 IE8 中無(wú)效，因?yàn)?IE8 及更早版本將 NodeList 實(shí)現(xiàn)為一個(gè) COM 對(duì)象。但下面的代碼可以在所有瀏覽器中運(yùn)行：

function convertToArray(nodes){
    var array = null;
    try{
        array = Array.prototype.slice.call(nodes,0);
    }catch(ex){
        array = new Array();
        for (var i=0; i

parentNode屬性和previousSibling、nextSibling屬性
parentNode屬性指向文檔樹中的父節(jié)點(diǎn)；同胞節(jié)點(diǎn)中第一個(gè)節(jié)點(diǎn)的previousSibling屬性的值為null；同理最后一個(gè)節(jié)點(diǎn)的nextSibling屬性的值也為null。如：
if (someNode.nextSibling === null){
    console.log("last node in the parent"s childNodes list.");
} else if(someNode.previousSibling === null){
    console.log("first node in the parent"s childNodes list.");
}


firstChild屬性和lastChild屬性
這兩個(gè)屬性分別等于：    someNode.childNodes[0]和someNode.childNodes[someNode.childNodes.length - 1];

hasChildNodes()方法和ownerDocument屬性
前者返回是否包含子節(jié)點(diǎn)的布爾值；后者指向表示整個(gè)文檔的文檔節(jié)點(diǎn)。
hello this is h1

var title = document.getElementById("h1");
console.log(title.childNodes) //["hello this is h1"]

hello this is h1
var title = document.getElementById("h1");
console.log(title.ownerDocument.nodeType) //9

操作節(jié)點(diǎn)
以下述代碼為例：
this is a paragraph


appendChild()方法
該方法用于向 childNodes 列表的末尾添加一個(gè)節(jié)點(diǎn)。其中，如果在 調(diào)用 appendChild() 時(shí)傳入了父節(jié)點(diǎn)的第一個(gè)子節(jié)點(diǎn)，那么該節(jié)點(diǎn)就會(huì)成為父節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)，如：
var txt = document.getElementById("p");
txt.appendChild(txt.firstChild);
console.log(txt.childNodes) //[, "this is a paragraph"]


insertBefore()方法
用于把節(jié)點(diǎn)放在 childNodes 列表中某個(gè)特定的位置上。接收兩個(gè)參數(shù)：要插入的節(jié)點(diǎn)和作為參照的節(jié)點(diǎn)，如：
var txt = document.getElementById("p");

var newNode = document.createElement("p");
var newNode_value = document.createTextNode("hello there");
newNode.appendChild(newNode_value);

txt.insertBefore(newNode, txt.lastChild);
document.write(Array.prototype.slice.call(txt.childNodes,0));//[object Text],[object HTMLParagraphElement],[object HTMLImageElement]

如果參照節(jié)點(diǎn)為 null，則 insertBefore() 與 appendChild() 執(zhí)行相同的操作。

replaceChild()方法
該方法接收兩個(gè)參數(shù)：要插入的節(jié)點(diǎn)和要替換的節(jié)點(diǎn)，如：
var txt = document.getElementById("p");

var newNode = document.createElement("p");
var newNode_value = document.createTextNode("hello there");
newNode.appendChild(newNode_value);

txt.replaceChild(newNode, txt.lastChild);
document.write(Array.prototype.slice.call(txt.childNodes,0));//[object Text],[object HTMLParagraphElement]


removeChild()方法
該方法接收一個(gè)參數(shù)：要?jiǎng)h除的節(jié)點(diǎn)，如：
var txt = document.getElementById("p");

txt.removeChild(txt.lastChild);
document.write(Array.prototype.slice.call(txt.childNodes,0));//[object Text]

其他方法

cloneNode()方法
該方法所有類型節(jié)點(diǎn)都具有；用于創(chuàng)建調(diào)用這個(gè)方法的節(jié)點(diǎn)的一個(gè)完全相同的副本。接收一個(gè)參數(shù)，表示是否執(zhí)行深賦值。true 執(zhí)行深復(fù)制，復(fù)制節(jié)點(diǎn)及整個(gè)子節(jié)點(diǎn)樹；false 執(zhí)行淺復(fù)制，只復(fù)制節(jié)點(diǎn)本身，后要通過(guò) appendChild() 等方法添加到文檔中。如：

    
item 1
    
item 2
    
item 3


var myList = document.getElementById("unordered");
var deepList = myList.cloneNode(true);
console.log(deepList.childNodes.length); //7 (IE < 9 版本情況下為3，因?yàn)椴粫?huì)創(chuàng)建空白符節(jié)點(diǎn)。)

var shallowList = myList.cloneNode(false);
console.log(shallowList.childNodes.length); //0


normalize()方法
該方法的作用是處理文檔樹中的文本節(jié)點(diǎn)。在出現(xiàn)文本節(jié)點(diǎn)不包含文本，或者連接出現(xiàn)兩個(gè)文本節(jié)點(diǎn)的情況下，就刪除它。
Document 類型
JavaScript 通過(guò) Document 類型表示文檔，在瀏覽器中，document 對(duì)象是 HTMLDocument 的一個(gè)實(shí)例，表示整個(gè) HTML 頁(yè)面。Document 節(jié)點(diǎn)具有以下特征：

console.log(document.nodeType + document.nodeName + document.nodeValue + document.parentNode + document.ownerDocument); //9#documentnullnullnull

以及其子節(jié)點(diǎn)可能是一個(gè) DocumentType（最多一個(gè)）、Element（最多一個(gè)）、ProcessingInstruction 或 Comment。


文檔的子節(jié)點(diǎn)

documentElement屬性和body屬性
其子節(jié)點(diǎn)可能是一個(gè) DocumentType（最多一個(gè)）、Element（最多一個(gè)）、ProcessingInstruction 或 Comment。但還有兩個(gè)內(nèi)置的訪問其子節(jié)點(diǎn)的方式：一個(gè)是 documentElement 屬性，該屬性始終指向  元素如：
var html = document.getElementsByTagName("html")[0];
console.log(document.documentElement === html); //true

var html = document.firstChild;
console.log(document.documentElement === html); //true

var html = document.childNodes[0];
console.log(document.documentElement === html); //true

以上代碼建立在如下網(wǎng)頁(yè)源代碼之上：

    
    
    
    
    


另外一個(gè)則是 body 屬性。直接指向  元素。

DocumentType即doctype屬性
通常將  標(biāo)簽看成一個(gè)與文檔其他部分不同的實(shí)體，可以通過(guò) doctype 屬性（document.doctype）查看。如：


    
    
    
    
    


瀏覽器對(duì) document.doctype 的支持差別很大，主要有：

IE8 及之前的版本：當(dāng)做注釋，document.doctype 的值為 null；

IE9+ 及 Firefox：作為第一個(gè)子節(jié)點(diǎn)；

Safari、Chrome 和 Opera：不作為文檔的子節(jié)點(diǎn)。


另外，按理說(shuō)出現(xiàn)在 html 標(biāo)簽之外的注釋也算是文檔的子節(jié)點(diǎn)。如：


    
    
    
    



瀏覽器在處理位于 html 標(biāo)簽之外的注釋方面存在如下差異：

IE8 及之前的版本、Safari 3.1 及更高的版本、Opera 和 Chrome 只為第一條注釋創(chuàng)建節(jié)點(diǎn)；

IE9 及更高的版本將兩個(gè)注釋都創(chuàng)建為節(jié)點(diǎn)；

Firefox、Safari 3.1 之前的版本會(huì)忽略這兩個(gè)注釋。


文檔信息

title屬性
document 對(duì)象的另一個(gè)屬性是 title，包含這 title 元素中的文本，但是修改 title 屬性的值并不會(huì)
改變 title 標(biāo)簽元素。如：
var x = setTimeout(setTitle, 1000);
function setTitle(){
    document.title = "Hello";
    var y = setTimeout(setTitle2, 1000);
    function setTitle2(){
        document.title = "World";
        x = setTimeout(setTitle, 1000);
    }
}

以上代碼可以以1秒的速度自動(dòng)切換顯示 title 標(biāo)簽的內(nèi)容

URL、domain和referrer屬性
三者分別包含完整的 URL；頁(yè)面的域名以及連接到當(dāng)前頁(yè)面的那個(gè)頁(yè)面的 URL。三個(gè)屬性當(dāng)中只有 domain 是可以設(shè)置的。如：
//假設(shè)頁(yè)面來(lái)自 p2p.wrox.com 域

document.domain = "wrox.com"; //成功
document.domain = "baidu.com"; //失敗

另外，由于跨域安全限制，來(lái)自不同的子域的頁(yè)面無(wú)法通過(guò) js 通信。還有，如果域名一開始是“松散的”(loose)，那么就不能再設(shè)置為“緊繃的”(tight)。即將 document.domain 設(shè)置為"wrox.com"之后，就不能再將其設(shè)置回"p2p.wrox.com"否則將出錯(cuò)。
查找元素

getElementById()方法
該方法接收一個(gè)參數(shù)即元素的 ID。以下面的元素為例：
Some text

可以使用下面的代碼取得這個(gè)元素：
var div = document.getElementById("myDiv");
var div = document.getElementById("mydiv"); //無(wú)效的ID 但是可以在 IE7 及更早的版本中使用

如果文檔中出現(xiàn)多個(gè) ID 相同的元素，則取得第一次出現(xiàn)的那個(gè)。
IE7 及更早的版本在 name 特性與給定的 ID 匹配的表單元素（input textarea button select）也會(huì)被該方法訪問。如：

Some text

console.log(document.getElementById("myElement"));

所以最好不要把 id 與 name 設(shè)置成同一個(gè)名稱。

getElementsByTagName()方法、HTMLCollection屬性以及namedItem()方法
前者接收一個(gè)參數(shù)即要去的的元素的標(biāo)簽名，后者則是該方法返回的對(duì)象，如下代碼將取得所有 img 元素，并返回一個(gè) HTMLCollection 對(duì)象：





console.log(document.getElementsByTagName("img").length); //4

這里返回的 HTMLCollection 對(duì)象可以通過(guò)方括號(hào)語(yǔ)法或 item() 方法來(lái)訪問：

    
    
    
    
    


另外，可以通過(guò)namedItem()方法來(lái)獲得指定的 name 特性的項(xiàng)如：

    
    
    


當(dāng)然也可以使用方括號(hào)語(yǔ)法：

    
    
    


在后臺(tái)，對(duì)數(shù)值索引就會(huì)調(diào)用 item()，而對(duì)字符串索引就會(huì)調(diào)用 namedItem()。
另外，可以向 getElementsByTagName() 中傳入“*”。表示全部標(biāo)簽；

getElementsByName()方法
該方法返回給定 name 特性的所有元素。最常用的情況是取得單選按鈕。

    

        Which color do you perfer?
        

            

                
                Red
            
            

                
                Green
            
            

                
                Blue
            
        
    
    


在這里 namedItem() 方法只會(huì)取得第一項(xiàng)，因?yàn)槊恳豁?xiàng)的 name 特性都是 color。
特殊集合（.anchors/.forms/.images/.links）

document.anchors：文檔中所有帶 name 特性的 a 元素；

document.applets：文檔中的所有 applet 元素。已經(jīng)不推薦使用 applet 元素了。

document.forms：文檔中所有 form 元素

document.images：文檔中所有 img 元素

document.links：文檔中所有帶 href 特性的 a 元素；


如下：



abc
abc
abc

console.log(document.anchors.length); //2
console.log(document.forms.length); //2
console.log(document.links.length); //3

DOM 一致性檢測(cè)

document.implementation屬性與hasFeature()方法
由于 DOM 有多個(gè)級(jí)別，包含多個(gè)部分，因此檢測(cè)瀏覽器實(shí)現(xiàn)了 DOM 的哪些部分是非必要。該方法接收兩個(gè)參數(shù)：要檢測(cè)的 DOM 功能的名稱及版本號(hào)。如果瀏覽器支持，則返回 true，如：
console.log(document.implementation.hasFeature("XML", "1.0")); //True

列表如下：
Core    實(shí)現(xiàn) Node、Element、Document、Text 和其他所有DOM實(shí)現(xiàn)都要求實(shí)現(xiàn)的基本接口 所有遵守 DOM 標(biāo)準(zhǔn)的實(shí)現(xiàn)都必須支持該模塊。

HTML    實(shí)現(xiàn) HTMLElement、HTMLDocument 和其他 HTML 專有接口。

XML 實(shí)現(xiàn) Entity、EntityReference、ProcessingInstruction、Notation 和其他 XML 文檔專用的節(jié)點(diǎn)類型。

StyleSheets 實(shí)現(xiàn)描述普通樣式表的簡(jiǎn)單接口。

CSS 實(shí)現(xiàn) CSS 樣式表專有的接口。

CSS2    實(shí)現(xiàn) CSS2Properties 接口。

Events  實(shí)現(xiàn)基本的事件處理接口。

UIEvents    實(shí)現(xiàn)處理用戶界面事件的接口。

MouseEvents 實(shí)現(xiàn)處理鼠標(biāo)事件的接口。

HTMLEvents  實(shí)現(xiàn)處理 HTML 事件的接口。

MutationEvents  實(shí)現(xiàn)處理文檔變化事件的接口。

Range   實(shí)現(xiàn)操作文檔范圍的接口。

Traversal   實(shí)現(xiàn)進(jìn)行高級(jí)文檔遍歷的接口。

Views   實(shí)現(xiàn)處理文檔視圖的接口。

文檔寫入

write()、writeln()、open()以及close()

其中，writeln() 會(huì)在字符串最后添加一個(gè)換行符（
）如：
document.write("hello");
document.writeln("there"); //最后面有個(gè)換行符
document.write("anybodyHome?");
//hellothere anybodyHome?

此外，還可以使用 write() 和 writeln() 方法動(dòng)態(tài)地包含外部資源。
需要注意的是，如果在文檔加載完畢后再執(zhí)行 document.write 則會(huì)重寫文檔。
方法 open() 和 close() 分別用于打開和關(guān)閉網(wǎng)頁(yè)的輸出流。
Element 類型
該類型用于表現(xiàn) XML 或 HTML 元素，提供了對(duì)元素標(biāo)簽名、子節(jié)點(diǎn)及特性的訪問。主要特性如下：
var x = document.getElementsByTagName("p")[0];
console.log(x.tagName); //P
console.log(x.nodeName); //P
console.log(x.nodeType); //1
console.log(x.nodeValue); //null
console.log(x.parentNode); //HTMLDivElement

其子節(jié)點(diǎn)可能是 Element、Text、Comment、ProcessingInstruction、CDATASection 或 EntityReference。
因?yàn)?XML 和 HTML 的標(biāo)簽名大小寫關(guān)系，在比較標(biāo)簽名的時(shí)候最好先轉(zhuǎn)換成小寫，如：
var x = document.getElementsByTagName("p")[0];
if (x.tagName === "p") {
    console.log("testing1");
};
if (x.tagName.toLowerCase() === "p") {
    console.log("testing2");
};
//testing2

HTML元素
所有 HTML 元素都由 HTMLElement 類型表示，標(biāo)準(zhǔn)特性如下：

id：元素的唯一標(biāo)識(shí)符；

title：附加說(shuō)明信息；

lang：語(yǔ)言代碼；

dir：語(yǔ)言方向；

className：元素的 class 特性對(duì)應(yīng)，即 CSS 類。


如：


var div = document.getElementById("bd");
console.log(bd.dir); //ltr

另外還有其他眾多 HTML 元素以及與之關(guān)聯(lián)的類型。這里不再累述。
取得特性

getAttribute()方法
該方法主要是取得特性的值；
需要注意的是，任何元素的所有特性，都可以通過(guò) DOM 元素本身的屬性來(lái)訪問。但是自定義的特性不會(huì)以屬性的形式添加到 DOM 對(duì)象中。如：



由于各種原因，應(yīng)該只有在取得自定義特性值的情況下，才會(huì)使用該方法，如：



另外需要注意的是，根據(jù) HTML5 規(guī)范，自定義特性應(yīng)該加上 data- 前綴以便驗(yàn)證，如：



設(shè)置特性

setAttribute()方法
該方法接收兩個(gè)參數(shù)：要設(shè)置的特性名和值。如果特性名存在，則執(zhí)行替換操作。如：



綜上所述，在取得特性值的情況下，最好用getAttribute()方法取得自定義特性，用 DOM 屬性訪問公認(rèn)的特性；在設(shè)置特性值的情況下，最好用 DOM 屬性來(lái)設(shè)置公認(rèn)的特性，用setAttribute()方法設(shè)置自定義特性。如：



總之，最好直接通過(guò)屬性來(lái)讀取和設(shè)置特性。

removeAttribute()方法
一個(gè)參數(shù)，IE6 及以前的版本不支持該方法。如：



attributes 屬性
該屬性包含一個(gè) NamedNodeMap 對(duì)象，該對(duì)象有下列方法（不常用）：

getNamedItem(Name)：返回 nodeName 屬性等于 Name 的節(jié)點(diǎn)；

removeNamedItem(Name)：移除指定的節(jié)點(diǎn)；

setNamedItem(Node)：添加指定的節(jié)點(diǎn)；

item(pos)：返回位于數(shù)字 pos 位置的節(jié)點(diǎn)；


具體如下：

    
hhh


var pId = document.getElementById("pId");
var namedItem = pId.attributes.getNamedItem("id").nodeValue;
console.log(namedItem); //pId
var attrList = pId.attributes.item(0).nodeValue; //pId
console.log(attrList);
pId.attributes.removeNamedItem("id");
console.log(pId.id); //

該屬性經(jīng)常涌來(lái)遍歷元素的特性，如：
hhh

var pElem = document.getElementById("pId");

function outputAttributes(element) {
    var pairs = new Array();
    var attrName, attrValue, i, len;
    for (i = 0, len = element.attributes.length; i < len; i++) {
        attrName = element.attributes[i].nodeName;
        attrValue = element.attributes[i].nodeValue;
        pairs.push(attrName + "="" + attrValue + """);
    }
    return pairs.join(" ");
}
console.log(outputAttributes(pElem)); //id="pId" name="para"

但是需要強(qiáng)調(diào)的是：

不通瀏覽器返回的順序不通；

IE7 及更早的版本會(huì)返回 HTML 元素中所有可能的特性，包括沒有指定的特性


每個(gè)特性節(jié)點(diǎn)都有一個(gè)名為 specified 的屬性，這個(gè)屬性的值如果為 true，則意味著要么是在 HTML 中制定了相應(yīng)特性，要么是通過(guò) setAttribute() 方法設(shè)置了該特性。
上面的代碼兼容性考慮，應(yīng)該改為下面這樣：
hhh

var pElem = document.getElementById("pId");

function outputAttributes(element) {
    var pairs = new Array();
    var attrName, attrValue, i, len;
    for (i = 0, len = element.attributes.length; i < len; i++) {
        attrName = element.attributes[i].nodeName;
        attrValue = element.attributes[i].nodeValue;
        if (element.attributes[i].specified) {
            pairs.push(attrName + "="" + attrValue + """);
        };
    }
    return pairs.join(" ");
}
console.log(outputAttributes(pElem)); //id="pId" name="para"

創(chuàng)建元素

createElement()方法
該方法接收一個(gè)參數(shù)，即要?jiǎng)?chuàng)建元素的標(biāo)簽名。用該方法創(chuàng)建的新元素被賦予了ownerDocument屬性。隨后通過(guò)appendChild()等方法添加到文檔樹中。如：
var newElementP = document.createElement("p");
var newElementPValue = document.createTextNode("data");
newElementP.title = "im title";
newElementP.appendChild(newElementPValue);
document.body.appendChild(newElementP);
console.log(newElementP.lastChild.nodeValue); //data
console.log(newElementP.title); //im title

在 IE 中可以用另一種方式使用 createElement()，即為這個(gè)方法傳入完整的元素標(biāo)簽，也可以包含屬性，但這種方法存在很多問題，不建議使用。(具體見《js高級(jí)程序設(shè)計(jì)》第十章節(jié)點(diǎn)層次 Element 類型)
元素的子節(jié)點(diǎn)
以下面代碼為例：

    
1
    
2
    
3


var list = document.getElementById("ulList");
var childNodesList = list.childNodes;
console.log(childNodesList.length); //7

for (var i = childNodesList.length - 1; i >= 0; i--) {
    if (childNodesList[i].nodeType == 1) {
        console.log(childNodesList[i].nodeName); //LI*3
    };
};
for (var i = childNodesList.length - 1; i >= 0; i--) {
    if (childNodesList[i].nodeType == 3) {
        document.write(childNodesList[i].nodeValue); //LI*3的text節(jié)點(diǎn)值1、2、3
    };
};

如同上面的代碼一樣，如果需要通過(guò) childNodes 屬性遍歷子節(jié)點(diǎn)，呢么一定要在操作以前檢查 nodeType 屬性。因?yàn)椴煌臑g覽器會(huì)返回不同的節(jié)點(diǎn)個(gè)數(shù)：
1
2
3

這里才會(huì)返回 childNodesList.length 為3。
如果要返回上面代碼中的所有 li 元素，可以使用如下代碼：
var ulList = document.getElementById("ulList");
var liList = ulList.getElementsByTagName("li");
console.log(liList.length); //3

Text 類型
要注意的是，字符串會(huì)經(jīng)過(guò) HTML 或 XML 編碼。如：
var pElem = document.getElementById("pId");
pElem.firstChild.nodeValue = "
hello there
";
console.log(pElem.innerHTML); //
hello there
創(chuàng)建文本節(jié)點(diǎn)

createTextNode()方法
該方法創(chuàng)建文本節(jié)點(diǎn)，接收一個(gè)參數(shù)即文本字符串。按理說(shuō)一個(gè)元素只有一個(gè)文本節(jié)點(diǎn)，但是如果為其賦予了多個(gè)節(jié)點(diǎn)，那么這些節(jié)點(diǎn)中的文本就會(huì)連起來(lái)，并且中間沒有空格。如：
var newP = document.createElement("p");
var newPValue = document.createTextNode("data");
newP.appendChild(newPValue);
document.body.appendChild(newP);
var anotherPValue = document.createTextNode("anotherData");
newP.appendChild(anotherPValue); //dataanotherData

規(guī)范化文本節(jié)點(diǎn)

normalize()方法
該方法在一個(gè)包含兩個(gè)或多個(gè)文本節(jié)點(diǎn)的父元素上調(diào)用，將會(huì)把所有文本節(jié)點(diǎn)合成成一個(gè)節(jié)點(diǎn)。如：
var newP = document.createElement("p");
var newPValue = document.createTextNode("data");
newP.appendChild(newPValue);
document.body.appendChild(newP);
var anotherPValue = document.createTextNode("anotherData");
newP.appendChild(anotherPValue); //dataanotherData
console.log(newP.childNodes.length); //2
newP.normalize();
console.log(newP.childNodes.length); //1

分割文本節(jié)點(diǎn)

splitText()方法
這個(gè)方法將一個(gè)文本節(jié)點(diǎn)分成兩個(gè)文本節(jié)點(diǎn)，原來(lái)的文本節(jié)點(diǎn)包含從開始到指定位置之前的內(nèi)容；新的文本節(jié)點(diǎn)將包含剩下的文本。這個(gè)方法會(huì)返回一個(gè)新文本節(jié)點(diǎn)。如：
var newP = document.createElement("p");
var newPValue = document.createTextNode("data");
newP.appendChild(newPValue);
document.body.appendChild(newP);
var anotherPValue = document.createTextNode("anotherData");
newP.appendChild(anotherPValue); //dataanotherData

newP.normalize();
var anotherNewP = newP.firstChild.splitText(4);
console.log(newP.firstChild.nodeValue); //data
console.log(newP.lastChild.nodeValue); //anotherData

newP.normalize();
console.log(newP.firstChild.nodeValue); //dataanotherData

Comment 類型

createComment()方法
該方法可以創(chuàng)建注釋節(jié)點(diǎn)。不過(guò)鮮有人使用。擁有除 splitText() 之外的所有字符串操作方法。
CDATASection 類型
該類型只有在真正的 XML 文檔中可以使用以下方法，瀏覽器會(huì)解釋他為 Comment 類型：

    


console.log(document.getElementById("myDiv").firstChild); //Comment


createCDataSection()方法
該方法用來(lái)創(chuàng)建 CDATA 區(qū)域，只需為其傳入節(jié)點(diǎn)的內(nèi)容即可
DocumentType 類型
不常用。包含著與文檔的 doctype 有關(guān)的所有信息。
該類型對(duì)象的三個(gè)屬性：name、entities 和 notations。其中，name 表示文檔類型的名稱；entities 是由文檔類型描述的實(shí)體的 NamedNodeMap 對(duì)象；notations 是由文檔類型描述的符號(hào)的 NamedNodeMap 對(duì)象。一般來(lái)說(shuō)只有 name 有點(diǎn)用。
console.log(document.doctype.name); //html

IE 不支持。
DocumentFragment 類型

createDocumentFragment()方法
主要作用就是用來(lái)避免通過(guò)逐個(gè)添加元素所導(dǎo)致的瀏覽器反復(fù)渲染新信息的問題，使用一個(gè)文檔片段來(lái)保存創(chuàng)建的元素，然后再一次性將它們添加到文檔中。如：


var fragment = document.createDocumentFragment();
var ul = document.getElementById("myList");
var li = null;

for (var i = 0; i < 3; i++) {
    li = document.createElement("li");
    li.appendChild(document.createTextNode("Item" + (i + 1)));
    fragment.appendChild(li);
};

ul.appendChild(fragment);

Attr 類型
該對(duì)象又3個(gè)屬性：name、value 和 specified。但使用getAttribute()、setAttribute()和removeAttribute()方法更好用。