首頁 > 開發者 > JavaScript
標籤：進階 等於 節點 nod on() blog 需要 字串操作 動態建立
注釋在DOM中是通過Comment 類型來表示的。Comment 節點具有下列特徵：
Comment 類型與Text 類型繼承自相同的基類，因此它擁有除splitText()之外的所有字串操作方法。與Text 類型相似，也可以通過nodeValue 或data 屬性來取得注釋的內容。
注釋節點可以通過其父節點來訪問，以下面的代碼為例。
<div id="myDiv"><!--A comment --></div>
在此，注釋節點是<div>元素的一個子節點，因此可以通過下面的代碼來訪問它。
var div = document.getElementById("myDiv");var comment = div.firstChild;alert(comment.data); //"A comment"
運行一下
另外，使用document.createComment()並為其傳遞注釋文本也可以建立注釋節點，如下面的例子所示。
var comment = document.createComment("A comment ");
顯然，開發人員很少會建立和訪問注釋節點，因為注釋節點對演算法鮮有影響。此外，瀏覽器也不會識別位於</html>標籤後面的注釋。如果要訪問注釋節點，一定要保證它們是<html>元素的後代（即位於<html>和</html>之間）。
在Firefox、Safari、Chrome 和Opera 中，可以訪問Comment 類型的建構函式和原型。在IE8 中， 注釋節點被視作標籤名為"!" 的元素。也就是說， 使用getElementsByTagName()可以取得注釋節點。儘管IE9 沒有把注釋當成元素，但它仍然通過一個名為HTMLCommentElement 的建構函式來表示注釋。
CDATASection 類型只針對基於XML 的文檔，表示的是CDATA 地區。與Comment 類似，CDATASection 類型繼承自Text 類型，因此擁有除splitText()之外的所有字串操作方法。
CDATASection 節點具有下列特徵：
CDATA 地區只會出現在XML 文檔中，因此多數瀏覽器都會把CDATA 地區錯誤地解析為Comment或Element。以下面的代碼為例：
<div id="myDiv"><![CDATA[This is some content.]]></div>
這個例子中的<div>元素應該包含一個CDATASection 節點。可是，四大主流瀏覽器無一能夠這樣解析它。即使對於有效XHTML 頁面，瀏覽器也沒有正確地支援嵌入的CDATA 地區。
在真正的XML 文檔中，可以使用document.createCDataSection()來建立CDATA 地區，只需為其傳入節點的內容即可。
在Firefox、Safari、Chrome 和Opera 中，可以訪問CDATASection 類型的建構函式和原型。IE9 及之前版本不支援這個類型。
DocumentType 類型在網頁瀏覽器中並不常用，僅有Firefox、Safari 和Opera 支援它①。① Chrome 4.0 也支援DocumentType 類型。
Type 包含著與文檔的doctype 有關的所有資訊，它具有下列特徵：
在DOM1 級中，DocumentType 對象不能動態建立，而只能通過解析文檔代碼的方式來建立。支援它的瀏覽器會把DocumentType 對象儲存在document.doctype 中。DOM1 級描述了DocumentType 對象的3 個屬性：name、entities 和notations。其中，name 表示文件類型的名稱；
entities 是由文件類型描述的實體的NamedNodeMap 對象；notations 是由文件類型描述的符號的NamedNodeMap 對象。通常，瀏覽器中的文檔使用的都是HTML 或XHTML 文件類型，因而entities和notations 都是空列表（列表中的項來自行內文件類型聲明）。但不管怎樣，只有name 屬性是有用的。這個屬性中儲存的是文件類型的名稱，也就是出現在<!DOCTYPE 之後的文本。
以下面嚴格型HTML
4.01 的文件類型聲明為例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
DocumentType 的name 屬性中儲存的就是"HTML"：
alert(document.doctype.name); //"HTML"
IE 及更早版本不支援DocumentType，因此document.doctype 的值始終都等於null。可是，這些瀏覽器會把文件類型聲明錯誤地解釋為注釋， 並且為它建立一個注釋節點。IE9 會給document.doctype 賦正確的對象，但仍然不支援訪問DocumentType 類型。
10.1.8 DocumentFragment類型在所有節點類型中，只有DocumentFragment 在文檔中沒有對應的標記。DOM 規定文檔片段（document fragment）是一種“輕量級”的文檔，可以包含和控制節點，但不會像完整的文檔那樣佔用額外的資源。DocumentFragment 節點具有下列特徵：
雖然不能把文檔片段直接添加到文檔中，但可以將它作為一個“倉庫”來使用，即可以在裡面儲存將來可能會添加到文檔中的節點。要建立文檔片段，可以使用document.createDocumentFragment()方法，如下所示：
var fragment = document.createDocumentFragment();
文檔片段繼承了Node 的所有方法，通常用於執行那些針對文檔的DOM操作。如果將文檔中的節點添加到文檔片段中，就會從文檔樹中移除該節點，也不會從瀏覽器中再看到該節點。添加到文檔片段中的新節點同樣也不屬於文檔樹。可以通過appendChild()或insertBefore()將文檔片段中內容添加到文檔中。在將文檔片段作為參數傳遞給這兩個方法時，實際上只會將文檔片段的所有子節點添加到相應位置上；文檔片段本身永遠不會成為文檔樹的一部分。來看下面的HTML 範例程式碼：
<ul id="myList"></ul>
假設我們想為這個<ul>元素添加3 個清單項目。如果逐個地添加清單項目，將會導致瀏覽器反覆渲染（呈現）新資訊。為避免這個問題，可以像下面這樣使用一個文檔片段來儲存建立的清單項目，然後再一次性將它們添加到文檔中。
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);
運行一下
在這個例子中，我們先建立一個文檔片段並取得了對<ul>元素的引用。然後，通過for 迴圈建立3 個清單項目，並通過文本表示它們的順序。為此，需要分別建立<li>元素、建立文本節點，再把文本節點添加到<li>元素。接著使用appendChild()將<li>元素添加到文檔片段中。迴圈結束後，再調用appendChild()並傳入文檔片段，將所有清單項目添加到<ul>元素中。此時，文檔片段的所有子節點都被刪除並轉移到了<ul>元素中。
元素的特性在DOM 中以Attr 類型來表示。在所有瀏覽器中（包括IE8），都可以訪問Attr 類型的建構函式和原型。從技術角度講，特性就是存在於元素的attributes 屬性中的節點。特性節點具有下列特徵：
儘管它們也是節點，但特性卻不被認為是DOM 文檔樹的一部分。開發人員最常使用的是getAttribute()、setAttribute()和remveAttribute()方法，很少直接引用特性節點。
Attr 對象有3 個屬性：name、value 和specified。其中，name 是特性名稱（與nodeName 的值相同），value 是特性的值（與nodeValue 的值相同），而specified 是一個布爾值，用以區別特性是在代碼中指定的，還是預設的。
使用document.createAttribute()並傳入特性的名稱可以建立新的特性節點。例如，要為元素添加align 特性，可以使用下列代碼：
var attr = document.createAttribute("align");attr.value = "left";element.setAttributeNode(attr);alert(element.attributes["align"].value); //"left"alert(element.getAttributeNode("align").value); //"left"alert(element.getAttribute("align")); //"left"
運行一下
這個例子建立了一個新的特性節點。由於在調用createAttribute()時已經為name 屬性賦了值，所以後面就不必給它賦值了。之後，又把value 屬性的值設定為"left"。為了將新建立的特性添加到元素中，必須使用元素的setAttributeNode()方法。添加特性之後，可以通過下列任何方式訪問該特性：attributes 屬性、getAttributeNode()方法以及getAttribute()方法。其中，attributes和getAttributeNode()都會返回對應特性的Attr 節點，而getAttribute()則只返回特性的值。
我們並不建議直接存取特性節點。實際上，使用getAttribute()、setAttribute()和removeAttribute()方法遠比操作特性節點更為方便。
更多章節教程：http://www.shouce.ren/api/view/a/15218
10.1.5 Comment類型【JavaScript進階程式設計第三版】
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
