10.1.5 Comment类型【JavaScript高级程序设计第三版】

注释在DOM中是通过Comment 类型来表示的。Comment 节点具有下列特征：

nodeType 的值为8；
nodeName 的值为"#comment"；
nodeValue 的值是注释的内容；
parentNode 可能是Document 或Element；
不支持（没有）子节点。

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 的构造函数来表示注释。

10.1.6 CDATASection类型

CDATASection 类型只针对基于XML 的文档，表示的是CDATA 区域。与Comment 类似，CDATASection 类型继承自Text 类型，因此拥有除splitText()之外的所有字符串操作方法。
CDATASection 节点具有下列特征：

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 及之前版本不支持这个类型。

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 表示文档类型的名称；

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()方法远比操作特性节点更为方便。

更多章节教程：http://www.shouce.ren/api/view/a/15218