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

时间: 2024-10-15 03:09:46

10.1.5 Comment类型【JavaScript高级程序设计第三版】的相关文章

《JavaScript高级程序设计 第三版》 前2章 Javascript简介与HTML 读书笔记

第一章:Javascript简介 1.JavaScript诞生于1995年,当时,它的主要目的是处理以前由服务器端语言(如Perl)负责的一些输入验证操作.现在,JavaScript是一种专为与网页交互而设计的脚本语言. 注:Netscape(网景)公司研发,Java是sun公司研发,原名为LiveScript,为了搭上媒体热炒的Java的顺风车,更名为JavaScript 2.微软推出JSript的和网景的JavaScript相竞争,最后微软胜利.ECMA指定了规定并重新命名为ECMAScri

javascript高级程序设计第三版 读书笔记

第三章   基本概念 1.在JavaScript中是区分大小写的,第一个字符是字母 _ 或者$,其他字符可以试数字 字母 _ 或者$,命名格式要求是驼峰式书写(第一个字母小写,剩下的每个有意义的单词开头大写  比如fontSize) 2.单行注释//  块级注释为/*多行 内容*/ 不得使用关键字和保留字 3.在JavaScript中变量是松散型的   可以为任何一种类型 4.用var操作符定义的变量成为定义该变量的作用域中的局部变量. function test(){ var i = 'hi'

模拟事件【JavaScript高级程序设计第三版】

事件,就是网页中某个特别值得关注的瞬间.事件经常由用户操作或通过其他浏览器功能来触发.但很少有人知道,也可以使用JavaScript 在任意时刻来触发特定的事件,而此时的事件就如同浏览器创建的事件一样.也就是说,这些事件该冒泡还会冒泡,而且照样能够导致浏览器执行已经指定的处理它们的事件处理程序.在测试Web 应用程序,模拟触发事件是一种极其有用的技术.DOM2 级规范为此规定了模拟特定事件的方式,IE9.Opera.Firefox.Chrome 和Safari 都支持这种方式.IE 有它自己模拟

4.1 基本类型和引用类型的值【JavaScript高级程序设计第三版】

ECMAScript 变量可能包含两种不同数据类型的值:基本类型值和引用类型值.基本类型值指的是简单的数据段,而引用类型值指那些可能由多个值构成的对象. 在将一个值赋给变量时,解析器必须确定这个值是基本类型值还是引用类型值.第3 章讨论了5 种基本数据类型:Undefined.Null.Boolean.Number 和String.这5 种基本数据类型是按值访问的,因为可以操作保存在变量中的实际的值. 引用类型的值是保存在内存中的对象.与其他语言不同,JavaScript 不允许直接访问内存中的

2.1 &lt;script&gt;元素【JavaScript高级程序设计第三版】

向 HTML 页面中插入 JavaScript 的主要方法,就是使用<script>元素.这个元素由 Netscape 创造并在 Netscape Navigator 2 中首先实现.后来,这个元素被加入到正式的 HTML 规范中. HTML 4.01 为<script>定义了下列 6 个属性. async:可选.表示应该立即下载脚本,但不应妨碍页面中的其他操作,比如下载其他资源或等待加载其他脚本.只对外部脚本文件有效. charset:可选.表示通过 src 属性指定的代码的字符

20.2 解析与序列化【JavaScript高级程序设计第三版】

JSON 之所以流行,拥有与JavaScript 类似的语法并不是全部原因.更重要的一个原因是,可以把JSON 数据结构解析为有用的JavaScript 对象.与XML 数据结构要解析成DOM 文档而且从中提取数据极为麻烦相比,JSON 可以解析为JavaScript 对象的优势极其明显.就以上一节中包含一组图书的JSON数据结构为例,在解析为JavaScript 对象后,只需要下面一行简单的代码就可以取得第三本书的书名: books[2].title 当然,这里是假设把解析JSON 数据结构后

21.1 XMLHttpRequest 对象【JavaScript高级程序设计第三版】

IE5 是第一款引入XHR 对象的浏览器.在IE5 中,XHR 对象是通过MSXML 库中的一个ActiveX对象实现的.因此,在IE 中可能会遇到三种不同版本的XHR 对象,即MSXML2.XMLHttp.MSXML2.XMLHttp.3.0 和MXSML2.XMLHttp.6.0.要使用MSXML 库中的XHR 对象,需要像第18章讨论创建XML 文档时一样,编写一个函数,例如: //适用于IE7 之前的版本 function createXHR() { if (typeof argumen

读Javascript高级程序设计第三版第六章面向对象设计--创建对象

虽然Object构造函数或者对象字面量都可以用来创建单个对象,但是缺点非常明显:使用同一接口创建很多对象,会产生大量重复代码. 工厂模式  1 function CreatePerson(name,age,job){ 2         var o=new Object(); 3         o.name=name; 4         o.age=age; 5         o.job=job; 6         o.sayName=function(){ 7            

javascript高级程序设计第三版dom元素大小笔记

是滚动大小(scroll dimension),指的是包含滚动内容的元素的大小.有些元素(例如 <html>元素),即使没有执行任何代码也能自动地添加滚动条:但另外一些元素,则需要通过 CSS 的 overflow 属性进行设置才能滚动.以下是 4 个与滚动大小相关的属性. 在IE8以下scrollHeight=元素内容本身的高度. 1.增加边框,不同浏览器有不同解释. 谷歌火狐IE>=8会忽略边框的大小. 2,增加内边距,最终值是width||height+padding ie8以下是