10.1.5 Comment類型【JavaScript高級程序設計第三版】

時間 2019-12-12

標籤 10.1.5 comment 類型 javascript 高級程序設計第三欄目 JavaScript 简体版

原文原文鏈接

註釋在DOM中是經過Comment 類型來表示的。Comment 節點具備下列特徵：html

nodeType 的值爲8；
nodeName 的值爲"#comment"；
nodeValue 的值是註釋的內容；
parentNode 多是Document 或Element；
不支持（沒有）子節點。

Comment 類型與Text 類型繼承自相同的基類，所以它擁有除splitText()以外的全部字符串操做方法。與Text 類型類似，也能夠經過nodeValue 或data 屬性來取得註釋的內容。
註釋節點能夠經過其父節點來訪問，如下面的代碼爲例。node

<div id="myDiv"><!--A comment --></div>

在此，註釋節點是<div>元素的一個子節點，所以能夠經過下面的代碼來訪問它。算法

var div = document.getElementById("myDiv");
var comment = div.firstChild;
alert(comment.data); //"A comment"

運行一下
另外，使用document.createComment()併爲其傳遞註釋文本也能夠建立註釋節點，以下面的例子所示。api

var comment = document.createComment("A comment ");

顯然，開發人員不多會建立和訪問註釋節點，由於註釋節點對算法鮮有影響。此外，瀏覽器也不會識別位於</html>標籤後面的註釋。若是要訪問註釋節點，必定要保證它們是<html>元素的後代（即位於<html>和</html>之間）。
在Firefox、Safari、Chrome 和Opera 中，能夠訪問Comment 類型的構造函數和原型。在IE8 中，註釋節點被視做標籤名爲"!" 的元素。也就是說，使用getElementsByTagName()能夠取得註釋節點。儘管IE9 沒有把註釋當成元素，但它仍然經過一個名爲HTMLCommentElement 的構造函數來表示註釋。瀏覽器

10.1.6 CDATASection類型

CDATASection 類型只針對基於XML 的文檔，表示的是CDATA 區域。與Comment 相似，CDATASection 類型繼承自Text 類型，所以擁有除splitText()以外的全部字符串操做方法。
CDATASection 節點具備下列特徵：app

nodeType 的值爲4；
nodeName 的值爲"#cdata-section"；
nodeValue 的值是CDATA 區域中的內容；
parentNode 多是Document 或Element；
不支持（沒有）子節點。

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 及以前版本不支持這個類型。htm

10.1.7 DocumentType類型

DocumentType 類型在Web 瀏覽器中並不經常使用，僅有Firefox、Safari 和Opera 支持它①。① Chrome 4.0 也支持DocumentType 類型。
Type 包含着與文檔的doctype 有關的全部信息，它具備下列特徵：對象

nodeType 的值爲10；
nodeName 的值爲doctype 的名稱；
nodeValue 的值爲null；
parentNode 是Document；
不支持（沒有）子節點。

在DOM1 級中，DocumentType 對象不能動態建立，而只能經過解析文檔代碼的方式來建立。支持它的瀏覽器會把DocumentType 對象保存在document.doctype 中。DOM1 級描述了DocumentType 對象的3 個屬性：name、entities 和notations。其中，name 表示文檔類型的名稱；blog

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 節點具備下列特徵：

nodeType 的值爲11；
nodeName 的值爲"#document-fragment"；
nodeValue 的值爲null；
parentNode 的值爲null；
子節點能夠是Element、ProcessingInstruction、Comment、Text、CDATASection 或EntityReference。

雖然不能把文檔片斷直接添加到文檔中，但能夠將它做爲一個「倉庫」來使用，便可以在裏面保存未來可能會添加到文檔中的節點。要建立文檔片斷，可使用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>元素中。

10.1.9 Attr類型

元素的特性在DOM 中以Attr 類型來表示。在全部瀏覽器中（包括IE8），均可以訪問Attr 類型的構造函數和原型。從技術角度講，特性就是存在於元素的attributes 屬性中的節點。特性節點具備下列特徵：

nodeType 的值爲2；
nodeName 的值是特性的名稱；
nodeValue 的值是特性的值；
parentNode 的值爲null；
在HTML 中不支持（沒有）子節點；
在XML 中子節點能夠是Text 或EntityReference。

儘管它們也是節點，但特性卻不被認爲是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()方法遠比操做特性節點更爲方便。