你的位置:首页 > Java教程

[Java教程]从原型链看DOM--Comment,CDATASection,DocumentType,DocumentFragment,Attr类型


这次总结的是剩下的这些DOM类型节点,可能你见过却不经常使用但是了解一下总是好的,可以加深对DOM体系的整体理解~。本篇要介绍的是Comment,CDATASection,DocumentType,DocumentFragment,Attr类型。

Comment类型

原型链继承关系为comment实例.__proto__->Comment.prototype->CharacterData.prototype->Node.prototype->EventTarget.prototype->Object.prototype。

与Text节点类似,也可以通过nodeValue或data访问注释的内容。

var com=document.createComment('I am comment');com;// <!--I am comment-->com.data;// "I am comment"com.nodeValue;// "I am comment"

注释在DOM中通过Comment类型来表示的,Comment节点具有以下特征:

  • nodeType值为8
  • nodeName值为"#comment"
  • nodeValue值是注释内容
  • parentNode可能为Document或Element
  • 没有子节点

1.使用document.createComment()并为其传递注释文本可创建注释节点。createComment继承自Document.prototype。

2.浏览器对于注释节点的处理有些差距
(1).当注释位于HTML元素外 :Chrome,<=IE9处理HTML元素之前的注释节点,FF和>IE9 处理之外的所有节点。  

<!--I am first comment--><!DOCTYPE html><html><head> <title></title></head><body></body></html><!--I am last comment-->

Chrome46.0.2490.80:只处理出现在HTML元素之前的的注释节点,忽略出现在HTML元素之后的注释节点。

FF44.0.2:出现在HTML元素之前之后的注释节点都会处理。

>IE9:出现在HTML元素之前之后的注释节点都会处理。

<=IE9:只处理HTML元素之前的注释节点。 

注意:IE8中注释节点和文档声明被当作标签名为"!"的元素,开启IE8仿真模式后,由于IE8不支持访问DOM中一些API原生对象,所以通过使用getElementsByTagName()(继承自Document.prototype)可以取得被当作元素节点的注释节点和文档声明节点。


IE9没有把注释和文档声明当成元素节点,但却将文档声明节点<!Doctype html>视作注释节点。本图测试于IE9仿真

(2).当注释位于HTML元素内

<!DOCTYPE html><html><head> <title></title> <!-- I am comment--></head><body> <!-- I am comment too--></body></html>

三大浏览器均能解释成注释节点。

 

CDATASection类型

  • 了解XHTML

说起CDATASection类型节点,就先说起XHTML(可扩展超文本标记语言),它是将HTML作为

  1. XHTML元素必须被正确嵌套
  2. XHTML元素必须被正确关闭,即使是空标签也必须被正确关闭比如<br />,<img />,注意/与元素之间留有空格保证XHTML文档与当今浏览器兼容
  3. 标签名必须用小写字母
  4. XHTML文档必须拥有根元素
  5. 属性值必须加引号
  6. 属性不能简写
  7. 用id属性代替name属性,如<a />,<img />等
  8. XHTML DTD定义了强制使用的HTML元素
  9. 所有XHTML文档必须进行文档类型声明。

以下面代码块为例,它们在HTML中是有效的,但是在XHTML中是无效的

<script type="text/javascript">  function compare(a, b){    if(a < b){      console.log("A is less than B");    }else if(a > b){      console.log("A is greater than B");    }else{      console.log("A is equal to B");    }  }</script>

在HTML中有特殊规则用以确定<script>元素中哪些内容可以被解析,但这些规则在XHTML中不适用。这里比较语句a < b的小于号在XHTML中将被当作开始一个新标签来解析,但作为标签来说小于号后面又不能跟空格,因此就会导致语法错误如下“不合法的元素名”,所以JS代码后面就解析不了原样显示在页面上。

即使将代码中a < b间的空格去掉变为a<b,也会提示出错“解析属性出错”,毕竟b后面跟的是“)”。

避免出现这种情况的解决方式有两种:
(1).应用相应的HTML实体(&lt;),替换代码中所有的小于号(<),替换后一切正常

(2).用一个CData片段来包含JS代码,因为在XHTML(

<script type="text/javascript"><![CDATA[  function compare(a, b){   if(a < b){     console.log("A is less than B");   }esle if(a > b){     console.log("A is greater than B");   }else{     console.log("A is equal to B");   }  }]]></script>


在兼容XHTML的浏览器中这个办法可行,但实际上还有不少浏览器不兼容XHTML因而不支持CData片段。这种情况下使用JS注释将CData标记注释掉就可。

<script type="text/javascript">//<![[  function compare(a, b){   if(a < b){      }else if(a >b){   }else{   }  }//]]></script>

  • CDATASection类型

用JS也可以创建CData片段:

CDATASection只针对基于
CDATASection节点具有下列特征:

  • nodeType值为4
  • nodeName值为"cdata-section"
  • nodeValue值是内容区域的内容
  • parentNode可能是Document或Element
  • 不支持子节点

(1).兼容性:CDATA区域只会出现在

(2).在真正

var cd=document.createCDATASection('mycdata');cd;// <![CDATA[mycdata]]>document.appendChild(cd);/*Uncaught DOMException: Failed to execute 'appendChild' on 'Node': 
Nodes of type '#cdata-section' may not be inserted inside nodes of type '#document'.*/

CDATA区段不能进行嵌套,CDATA区段包含了不会被解析器解析的文本,CDATA中的标签不会被视为标签同时实体也不会被展开,主要目的是为了包含注入


DocumentType类型

DocumentType节点包含着与文档的doctype有关的信息,原型链继承关系为document.doctype.__proto__=>DocumentType.prototype=>Node.prototype=>EventTarget.prototype。

它具有下列特征: 

  • nodeType值为10
  • nodeName值为doctype名称,保存文档类型的名称即当前文档最外层标签顶级元素,document.doctype.name也可获取,就是出现在<!DOCTYPE 之后的文本(不包括后面那些PUBLIC...DTD版本号和文件路径)获取的为小写内容(不论之前代码中是否大小写)。这两种方式都是不可写的,因为nodeName和name的访问器属性set为undefiend。

注:有点疑问,经测试document.doctype只能在HTML文档中获取到DocumentType节点,在

  • nodeValue值为null
  • parentNode是Document
  • 没有子节点

在DOM1级中,DocumentType对象不能动态创建,只能通过解析文档代码的方式创建,支持它的浏览器会把DocumentType对象保存在document.doctype中。DOM1级描述了DocumentType对象的三个属性:name,entities,notations(它们都是DocumentType.prototype对象上的三个属性,但Chrome中好像已经没有后两个属性了,反正没获取到这两个属性)。

 

DocumentFragment类型

在所有节点类型中,只有DocumentFragment在文档中没有对应标记。原型链关系为: 文档片段实例.__proto__=>DocumentFragment.prototype=>Node.prototype=>EventTarget.prototype

注意文档片段类型只支持getElementById获取元素,没有getElementsByTagName那系列的,不过可以通过querySelector获取,毕竟很万能~
DOM规定文档片段是一种轻量级的文档,可以包含和控制节点,但不会像完整的文档那样占用额外的资源。DocumentFragment节点具有下列特征:

  • nodeType值为11
  • nodeName值为"#document-fragment"
  • nodeValue值为null
  • parentNode值为null
  • 子节点可以是Element,ProcessingInstruction,Comment,Text,CDATASection,EntityReference

可以把文档片段当作一个仓库来使用,可以在里面保存将来可能会添加到文档中的节点。创建文档片段使用document.createDocumentFragment()方法。
如果将文档中本身存在的节点添加到文档片段中,就会从文档树中移除该节点。


可以通过appendChild或insertBefore将文档片段中内容添加到文档中(其实还是继承自Node.prototype那些方法),在将文档片段作为参数传递给这两个方法时,实际上只会将文档片段的所有子节点添加到相应位置,文档片段节点本身永远不会成为文档树的一部分。假设想为ul元素添加三个列表项,如果逐个地添加列表项,将会导致浏览器反复渲染新信息。我们可以将所有列表项加到文档片段中,最后再一次性将它们添加到文档中。

var df = document.createDocumentFragment();var ul= document.createElement('ul');var li=null;for(var i=0;i<3;i++){ li = document.createElement('li'); li.appendChild(document.createTextNode("Item"+(i+1))); df.appendChild(li);}ul.appendChild(df);

现在看ul和df元素,说明文档片段节点并没加到ul中去,而是它里面的内容加进去了。


Attr类型

元素的特性在DOM中以Attr类型来表示,在除了<=IE7之外的所有浏览器都可以访问Attr类型的构造函数和原型。特性节点就是一种对象,就是存在于元素的attributes属性(继承自Element.prototype)中的节点。某元素的attributes属性指向的是一个NamedNodeMap类型的实例集合。在该集合中的每一项才是我们需要的属性节点对象。

原型链继承关系为:attrNode.__proto__=>Attr.prototype=>Node.prototype=>EventTarget.prototype

特性节点具有下列特征

  • nodeType值为2
  • nodename值是特性的名称
  • nodeValue值是特性的值
  • parentNode值为null
  • 在HTML中不支持子节点

尽管特性节点也是节点,但却不认为是DOM文档树中的一部分。开发人员最常使用的是getAttribute(),setAttribute(),removeAttribute()很少直接引用特性节点(这些方法继承自Element.prototype)。
(1).Attr对象有三个属性:name,value,specified
name :特性名称,与nodeName值相同
value :特性的值,与nodevalue值相同
specified :是一个布尔值,用以区别特性是在代码中指定的还是默认的

(2).创建新的特性节点:document.createAttribute()


当在调用createAttribute()时已经为name属性赋了值,所以后面就不需要给它赋值,在将特性节点添加到元素中时必须使用setAttributeNode。添加后可以通过attributes,getAttributeNode,getAttribute方法访问。不过不建议直接访问特性节点,使用getAttribute,setAttribute,removeAttribute比操作特性节点方便多。

参考

《JavaScript高级程序设计》