首页 > 代码库 > 10.1.5 Comment类型【JavaScript高级程序设计第三版】

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

2024-09-20 15:46:09   218人阅读

注释在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 = "http://www.mamicode.com/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高级程序设计第三版】


联系
我们