你的位置:首页 > Java教程

[Java教程]DOM节点之DocumentType类型、DocumentFragement类型


DocumentFragment类型

【定义】

  在所有节点类型中,只有DocumentFragment在文档中没有对应的标记。DOM规定文档片段(document fragment)是一种“轻量级”的文档,可以包含和控制节点,但不会像完整的文档那样占用额外的资源。

 

【特征】

  nodeType: 11
  nodeName: #document-fragment
  nodeValue:null
  parentNode: null
  childNode:Element、ProcessingInstruction、Comment、Text、CDATASection、EntityReference

 

【方法及应用】

  虽然不能把文档片段直接添加到文档中,但可以将它作为一个“仓库”来使用,即可以在里面保存将来可能会添加到文档中的节点。要创建文档片段,可以使用document.createDocumentFragment()方法。文档片段继承了Node的所有方法,通常用于执行那些针对文档的DOM操作。如果将文档中的节点添加到文档片段中,就会从文档树中移除该节点,也不会从浏览器中再看到该节点。添加到文档片段中的新节点同样也不属性文档树。可以通过appendChild()或insertBefore()将文档片段中内容添加到文档中。在将文档片段作为参数传递给这两个方法时,实际上只会将文档片段的所有子节点添加到相应位置上;文档片段本身永远不会成为文档树的一部分。

<ul id="list"></ul><script>console.time("time");var oList = document.getElementById('list');var fragment = document.createDocumentFragment();var li = null;for(var i = 0; i < 300000; i++){  li = document.createElement('li');  li.appendChild(document.createTextNode("Item" + (i+1)));  fragment.appendChild(li);}oList.appendChild(fragment);//462.545msconsole.timeEnd('time');</script>

<ul id="list"></ul><script>console.time("time");var oList = document.getElementById('list');for(var i = 0; i < 300000; i++){  var li = document.createElement('li');  li.appendChild(document.createTextNode("Item" + (i+1)));  oList.appendChild(li);}console.timeEnd('time');//711.905ms</script>

    由以上结果可以看出,向页面加入<li>标签时,使用DocumentFragment的性能更好

 

DocumentType类型

【定义】

  DocumentType类型包含着与文档的doctype有关的所有信息

 

【特征】

  nodeType: 10
  nodeName: doctype的名称
  nodeValue: null
  parentNode: Document
  childNode:没有子节点

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Document</title></head><body><script>//IE8-浏览器不支持document.doctypevar oDoctype = document.doctype;if(oDoctype){  // html 10 null  console.log(oDoctype.nodeName,oDoctype.nodeType,oDoctype.nodeValue);  //#document []  console.log(oDoctype.parentNode,oDoctype.childNodes)}</script></body></html>  

 

【属性】

  DocumentType对象有3个属性:name、entities、notations。通常浏览器中的文档使用的都是HTML或XHTML文档类型,因而entites和notations都是空列表(列表中的项来自行内文档类型声明)
  name表示文档类型的名称
  entities表示由文档类型描述的实体的NamedNodeMap对象
  notations表示由文档类型描述的符号的NamedNodeMap对象

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Document</title></head><body><script>//IE8-浏览器不支持document.doctypevar oDoctype = document.doctype;if(oDoctype){  console.log(oDoctype.name,oDoctype.entities,oDoctype.notations);//html undefined undefined}</script></body> </html>