全栈JavaScript之路（十）学习 DocumentFragment 类型节点

DocumentFragment 类型节点，代表一个文档片段，是一种轻量级的‘文档’ 对象，可以包含其它类型节点，并有能力访问、操作其中的节点，但是在文档中没有文档标记，相当于是一个页面不可见的容器。其构造函数为,function DocumentFragment() {[native code]}.

DocumentFragment 类型节点的特征;

nodeType:11
nodeName:#document-fragment
nodeValue:null
prasentNode:null
子节点类型:Element,Text,Comment,CDATASection,ProcesingInstruction,EntityReference

DocumentFragment 类型继承自 Node, 它继承了所有Node 的方法，通常用于执行那些针对文档的DOM操作。

如果将文档中的节点添加到DocumentFragment 节点中,就会从文档树中移除该节点，所以不会再能从浏览器看到该节点。添加到文档树的新节点同样也不属于文档树。

可以通过 appendChild(),insertBefore() 将文档片段中的内容添加到新节点中。

实际上，添加到文档树中的 DocumentFragment 类型节点中包含的节点，它本身永远不会成为文档树的一部分！

DocumentFragment 类型节点，相当于是一个’仓库‘，它包含的节点不会在页面上显示，

创建一个 DocumentFragment 类型节点; document.createDocumentFragment(),

全栈JavaScript之路（十）学习 DocumentFragment 类型节点,布布扣,bubuko.com

时间： 2024-10-25 03:29:49

全栈JavaScript之路（十）学习 DocumentFragment 类型节点的相关文章

全栈JavaScript之路（二十四）DOM2、DOM3, 不涉及XML命名空间的扩展

(一)DocumentType 类型的变化新增三个属性: publicId,systemId,internalSubset(内部子集) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" [<!ELEMENT name (#PCDATA)>] > 通过, document.doc

全栈JavaScript之路（十五）HTML5 focus 扩展 (焦点扩展)

HTML5 添加了辅助管理 focus 的功能, 文档获得焦点的途径有; 页面加载,用户输入(一般是按tab键),和在代码中调用focus()函数. HTML5新增的辅助管理焦点的属性与方法有: document.activeElement 属性, 这个属性指向获得焦点的元素,文档加载期间值为null, 文档加载完成,保存得是 document.body 的引用. document.hasFocus()方法, 确定文档是否获得了焦点. 查询文档获知哪个元素获得了焦点,以及确定文档是否获得

全栈JavaScript之路（十六）HTML5 HTMLDocument 类型的变化

HTML5 扩展了 HTMLDocument, 增加了新的功能. 1.document.readState = 'loading' || 'complete' //支持readyState 属性的浏览器有IE4+.Firefox 3.6+.Safari.Chrome 和Opera 9+. 2.document.compatMode = 'CSS1Compat' || 'BackCompat' //实现这个属性的浏览器有ie6,Firefox.Safari 3.1+.Opera 和Chrome.

全栈JavaScript之路（八）学习 CDATASection 类型节点

CDATASection 类型节点只针对于基于XML 的文档,表示的是CDATA 数据. 构造器函数为: CDATASection function(){[native code]} CDATASection 类型继承自 Text 类型,因此这类型的节点,拥有Text 类型节点除splitText(),方法之外的所有方法. CDATASection 类型有以下特点: nodeType:4 nodeName:#cdata-section parentNode: 可能是Element 或者是

全栈JavaScript之路（十一）学习 Attr 类型节点

元素的特性在DOM 中用Attr 类型的节点表示.在所有浏览器中都可以访问 Attr 类型的构造函数与原型. 从技术上讲,Attr 类型节点就是指,元素的 Attrbutes 属性中的节点.构造器函数为; function Attr() { [native code] } 尽管也是称之为节点,但是:Attr 类型的节点不是文档树的一部分! Attr 类型节点的特性: nodeType:2 nodeName: 值为特性的名称 nodeValue: 值为特性的值 prasentNode:n

全栈JavaScript之路（十九）HTML5 插入 html标记（一）innerHTML 与outerHTML

在需要给文档插入大量的html 标记下,通过DOM操作很麻烦,你不仅要创建一系列的节点,而且还要小心地按照顺序把它们接结起来. 利用html 标签插入技术,可以直接插入html代码字符串,简单.高效! 以下插入html标签相关的扩展已经纳入html5 规范. 1.innerHTML 属性 2.outerHTML 属性 3.insertAdjacentHTML 方法 innerHTML 属性有两种模式,写模式与读模式. 在读模式下,返回的是html 代码字符串. 例如: <div id="

全栈JavaScript之路（十八）HTML5 自定义数据属性

HTML5 规范规定,用户可以为元素自定义非标准属性, 但是要添加 data- 前缀. 目的是为元素提供与页面渲染无关的信息.或者语义信息.这些属性名可以随意添加,只要带上前缀 data- 开头就可以. <div id="myid" data-appid="1" data-appname="csdn"></div> 添加属性这后可以通过 dataset 访问自定义属性,dataset 属性是DOMStringMap

全栈JavaScript之路（十四）HTML5 中与class属性相关的扩充

1. getElementByClassName() :支持getElementsByClassName()方法的浏览器有IE 9+.Firefox 3+.Safari 3.1+.Chrome 和 Opera 9.5+. 2. classList 属性 : classList 属性是新集合类型 DOMTokenList 的实例.DOMTokenList 类型有一个lenght 属性 ,表示包含了多少子元素,要取得每一个元素可以通过item() 方法访问,也可以用 [ ] 方法访问. 此外这

全栈JavaScript之路（七）学习 Comment 类型节点.

凝视在DOM中,用 Comment 类型节点表示, 构造器函数为: function Comment(){[native code]}. comment 节点的特征: nodeType:8 nodeName:#comment, nodeValue: 凝视的内容, parsentNode: 可能是Element 类型节点,也有可能是Document节点.(在html 标签之外的凝视) 不支持子节点. Comment 类型与 Text 类型都是继承自 CharacterData 类型,

全栈JavaScript之路（十）学习 DocumentFragment 类型 节点

全栈JavaScript之路（十）学习 DocumentFragment 类型 节点的相关文章

全栈JavaScript之路（十）学习 DocumentFragment 类型节点

全栈JavaScript之路（十）学习 DocumentFragment 类型节点的相关文章