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

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