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