【www.hj8828.com】关于javascript document.createDocumentFragment_javascript技巧_脚本之家

他支持以下DOM2方法: appendChild, cloneNode, hasAttributes,
hasChildNodes, insertBefore, normalize, removeChild, replaceChild.
也支持以下DOM2属性: attributes, childNodes, firstChild, lastChild,
localName, namespaceURI, nextSibling, nodeName, nodeType, nodeValue,
ownerDocument, parentNode, prefix, previousSibling, textContent.
其他方法可以将documentFragment 作为一个参数,(比如Node的
appendChild和insertBefore 方法),这样,fragment
就可以被追加到父对象中。 Example:复制代码 代码如下:var frag =
document.createDocumentFragment();
frag.appendChild(document.createTextNode; document.body.appendChild;
document.createDocumentFragment()说白了就是为了节约使用DOM。每次JavaScript对DOM的操作都会改变页面的变现,并重新刷新整个页面,从而消耗了大量的时间。为解决这个问题,可以创建一个文档碎片,把所有的新节点附加其上,然后把文档碎片的内容一次性添加到document中。复制代码 代码如下:var
oui=document.getElementById; for { var oli=document.createElement;
oui.appendChild; oli.appendChild(document.createTextNode; }
上面的代码在循环中调用了oui.appendChild,每次执行这条语句后,浏览器都会更新页面。其次下面的oui.appendChild()添加了文本节点,也要更新页面。所以一共要更新页面20次。
为了页面的优化,我们要尽量减少DOM的操作,将列表项目在添加文本节点之后再添加,并合理地使用creatDocumentFragment(),代码如下:复制代码 代码如下:var
oui=document.getElementById; var
oFragment=document.createDocumentFragment(); for{ var
oli=document.createElement; oli.appendChild(document.createTextNode;
oFragment.appendChild; } oui.appendChild;
W3C参考:
——————————————- DocumentFragment is a
“lightweight” or “minimal” Document object. It is very common to want to
be able to extract a portion of a document’s tree or to create a new
fragment of a document. Imagine implementing a user command like cut or
rearranging a document by moving fragments around. It is desirable to
have an object which can hold such fragments and it is quite natural to
use a Node for this purpose. While it is true that a Document object
could fulfill this role, a Document object can potentially be a
heavyweight object, depending on the underlying implementation. What is
really needed for this is a very lightweight object. DocumentFragment is
such an object. Furthermore, various operations — such as inserting
nodes as children of another Node — may take DocumentFragment objects
as arguments; this results in all the child nodes of the
DocumentFragment being moved to the child list of this node. The
children of a DocumentFragment node are zero or more nodes representing
the tops of any sub-trees defining the structure of the document.
DocumentFragment nodes do not need to be well-formed XML documents
(although they do need to follow the rules imposed upon well-formed XML
parsed entities, which can have multiple top nodes). For example, a
DocumentFragment might have only one child and that child node could be
a Text node. Such a structure model represents neither an HTML document
nor a well-formed XML document. When a DocumentFragment is inserted into
a Document (or indeed any other Node that may take children) the
children of the DocumentFragment and not the DocumentFragment itself are
inserted into the Node. This makes the DocumentFragment very useful when
the user wishes to create nodes that are siblings; the DocumentFragment
acts as the parent of these nodes so that the user can use the standard
methods from the Node interface, such as insertBefore and appendChild.

基础知识回顾:

DOM 即(Document Object
Model),文档对象模型,DOM实际是把HTML当作XML文件来进行处理,用对象的眼光来打量HTML,可以说DOM是继HTML后Web的最有用的发明。

 

Some review of XML 网页教学网

SGML(基于标签的语言的普遍规范),在SGML被用于定义HTML的DTD时,发现HTML本身是很不规范的。主要表现在某些标签可以省略/没
有/不允许结束标签(</xxx>),标签互相嵌入而很不不规范,属性值的定义方法也不统一等等。所以XML出现了,HTML中不规范的地方
都被明确定义,注意的是XML定义的是一种语言的语法和规范,是一系列满足这种规范的语言的统称,具体不同的场合会有不同的具体实现定义不同的标签及属性
来来解决不同的问题,如RDF,RSS,SOAP,XSLT,XSL等等,当然HTML的XML实现为XHTML。XML的实质含义是使用结构化的纯文本
来表达数据。

 

XML几个语法要点:

首行为XML prolog,一般为<?xml version=”1.0”?>,该行告诉xml
praser/浏览器,该XML如何被prase。 网页教学网

然后是文档类型声明(DTD),例如<!DOCTYPE html PUBLIC “-//W3C//DTD
XHTML 1.0 Transitional//EN”
“;

网页教学网

然后是document
element,它必须把所有其他标签都括入其中。就是该XML的最外层标签。也就是Root
Element,注意这个要与DTD中声明的root element type相一致,如上面的html。

不想被Praser解析的东西用<![CDATA[ ]]>括起来。

在document element中间的用<? … ?>括起来的语句被称为PI(processing
instruction),作用是给praser一些更特定的信息。

XML的API:

Webjx.Com

SAX(Sample API for
XML):第一个,Java语言实现,event-based,praser从上到下的解析XML文档,当遇到每个标签/属性/值…时就会激发事件,而具体在该事件做什么由程序员定义。
优点,lightweight,fast,缺点,任何时候,你想停下,回退,或专门指定解析该文档的某特定部分时,都得从头从文档的第一行开始解析。

Webjx.Com

DOM:基于树结构,并且当解析完后,你想访问或修改添加文档对象都不需要重新解析。DOM是不针对于语言的,浏览器负责对DOM实现进行Javascript的支持。
Webjx.Com

————————————————————————————————————————— Webjx.Com

DOM的核心: Node

由于DOM是树形结构,所以一个节点被抽象为对象Node,这是DOM的核心对象:
网页教学网

Node的种类一共有12种,通过Node.nodeType的取值来确定(为1-12),分为:

❑ Node.ELEMENT_NODE (1)

❑ Node.ATTRIBUTE_NODE (2)

❑ Node.TEXT_NODE (3) :<![CDATA[
]]>中括着的纯文本,他没有子节点

❑ Node.CDATA_SECTION_NODE (4) :子节点一定为TextNode

网页教学网

❑ Node.ENTITY_REFERENCE_NODE (5) :

 

❑ Node.ENTITY_NODE (6) :DTD中的实体定义<!ENTITY foo
“foo”>,无子节点

❑ Node.PROCESSING_INSTRUCTION_NODE (7) :PI,无子节点

Webjx.Com

❑ Node.COMMENT_NODE (8)

 

❑ Node.DOCUMENT_NODE (9) :最外层的Root element,包括所有其它节点

Webjx.Com

❑ Node.DOCUMENT_TYPE_NODE (10) :DTD,<!DOCTYPE………..>

❑ Node.DOCUMENT_FRAGMENT_NODE (11)

网页教学网

❑ Node.NOTATION_NODE (12) :DTD中的Nation定义

网页教学网

Node的属性和方法 网页教学网

nodeName 返回String. The name of ths node;this is defined depending on
theype of node.
nodeValue 返回String. The value of the node’this is defined depending on
the type of node.
nodeType 返回Number. One of the node type constant values.
ownerDocument 返回Document. Pointer to the document that this node
belongs to.
firstChild 返回Node. Pointer to the first node in the childNodes list.
lastChild 返回Node. Pointer to the last node in the childNodes list.
childNodes 返回NodeList. A list of all child nodes.
previousSibling 返回Node. Pointer to the previous sibling;null if this
is the first sibling.
nextSibling 返回Node. Pointer to the next sibling;null if this is the
last sibling.
attributes 返回NamedNodeMap. Contains Attr objects respresenting an
element’s attributes;only used for Element nodes.
appendChild(node) 返回Node. Adds node to the end of childNodes.
hasChildNodes() 返回Boolean. Returns true when childNodes contains one
or more nodes.
removeChild(node) 返回Node. Removes node from childNodes.

Webjx.Com

replaceChild(newnode, oldnode) 返回Node. Replace oldnode in childNodes
with newnode.
insertBefore(newnode, refnode) 返回Node. Inserts newnode before refnode
in childNodes.

—————————————————————————————————————————

DOM的使用

DOM是分级别的,不同浏览器对DOM支持的级别不同。DOM level1
(core,用来解析XML-base的文档,和DOM
HTML,用来针对HTML,因为DOM并非只针对HTML的),DOM
Level2(event,以前都是通过DHTML支持,style,与CSS沟通,等等。。)DOM
level3(DOM Load and Save;DOM Validation;对XML1.0的支持,包括:XML
Infoset, XPath,XML Base)

 

Netscape Navigator 1.0-4.x DOM兼容性(-)
Netscape 6.0+(Mozilla 0.6.0+) DOM兼容性(Level 1, Level 2, Level 3
(partial))
Internet Explorer 2.0-4.x DOM兼容性(-)
Internet Explorer 5.0 DOM兼容性(Level 1 (minimal))
Internet Explorer 5.5+ DOM兼容性(Level 1 (almost all))
Opera 1.0-6.0 DOM兼容性(-)
Opera 7.0+ DOM兼容性(Level 1 (almost all), Level 2 (partial))
Safari 1.0+ / Konqueror~2.0+ DOM兼容性(Level 1) Webjx.Com

获得Node: