DOM---documentFragment

代码暂时寄存

创建:document.createDocumentFragment()

案例:

            var a=document.createDocumentFragment();
            var b=document.getElementById("div1");
            for(i=0;i<3;i++){
                var c=document.createElement("li");
                c.innerHTML="fuck " +i;
                a.appendChild(c);
            }
            b.appendChild(a);

上面代码用一个fragment避免了li一个个插入的尴尬

时间: 2024-10-10 16:18:15

DOM---documentFragment的相关文章

Ckeditor 的加载顺序

我们的只用在文件里面引用一个CKEditor的js文件--CKEditor目录下的ckeditor.js文件, 该文件会完成后续的所有的CKEidtor依赖的js文件的加载. 所依赖的js文件加载顺序如下 <script src="/Scripts/CKEditor/CKEditor.js"></script> <script src="http://localhost:9673/Scripts/CKEditor/core/loader.js&q

深入理解DOM节点类型第四篇——文档片段节点DocumentFragment

× 目录 [1]特征 [2]作用 前面的话 在所有节点类型中,只有文档片段节点DocumentFragment在文档中没有对应的标记.DOM规定文档片段(document fragment)是一种“轻量级”的文档,可以包含和控制节点,但不会像完整的文档那样占用额外的资源 特征 创建文档片段,要使用document.createDocumentFragment()方法.文档片段继承了Node的所有方法,通常用于执行那些针对文档的DOM操作 文档片段节点的三个node属性——nodeType.nod

DocumentFragment --更快捷操作DOM的途径

使用DocumentFragment将一批子元素添加到任何类似node的父节点上,对这批子元素的操作不需要一个真正的根节点.可以不依赖可见的DOM来构造一个DOM结构,而效率高是它真正的优势,试验表明,它比直接操作DOM快70%.下面我们就来看看DocumentFragments是如何使用的. DocumentFragment例子 我们要使用UL元素,然后往里面插入LI元素: <ul id="list"></ul> DOM插入和修改是一个很费力耗时的工作,所以,

从原型链看DOM--Comment,CDATASection,DocumentType,DocumentFragment,Attr类型

这次总结的是剩下的这些DOM类型节点,可能你见过却不经常使用但是了解一下总是好的,可以加深对DOM体系的整体理解~.本篇要介绍的是Comment,CDATASection,DocumentType,DocumentFragment,Attr类型. Comment类型 原型链继承关系为comment实例.__proto__->Comment.prototype->CharacterData.prototype->Node.prototype->EventTarget.prototyp

高程 第10章 DOM

DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口). DOM描绘了一个层次化的节点树,允许添加,移除和修改页面的某一部分. 注意:IE中的所有DOM对象都是以COM对象的形式实现的.这意味着DOM对象与原生JavaScript对象的行为或活动特点并不一致. 10.1 节点层次 DOM描绘出的由多层节点构成的结构,每个节点都拥有各自的特点,数据和方法,也与其他节点存在某种关系,这种关系构成了层次,所有页面标记则表现为一个以特定节点为根节点的树形结构. 文档节点是每个文

原生JS中DOM节点相关API合集

节点属性 Node.nodeName //返回节点名称,只读 Node.nodeType //返回节点类型的常数值,只读 Node.nodeValue //返回Text或Comment节点的文本值,只读 Node.textContent //返回当前节点和它的所有后代节点的文本内容,可读写 Node.baseURI //返回当前网页的绝对路径 Node.ownerDocument //返回当前节点所在的顶层文档对象,即document Node.nextSibling //返回紧跟在当前节点后面

关于我们DOM的知识点

DOM的概念及子节点类型 前言 DOM的作用是将网页转为一个javascript对象,从而可以使用javascript对网页进行各种操作(比如增删内容).浏览器会根据DOM模型,将HTML文档解析成一系列的节点,再由这些节点组成一个树状结构.DOM的最小组成单位叫做节点(node),文档的树形结构(DOM树)由12种类型的节点组成. 一:DOM ==> 全称: document Object Mode   文档对象模型 文档: html页面 文档对象:页面元素(节点) 文档对象模型: W3C标准

为什么说DOM操作很慢

原文转自:http://kb.cnblogs.com/page/534571/ 一直都听说DOM很慢,要尽量少的去操作DOM,于是就想进一步去探究下为什么大家都会这样说,在网上学习了一些资料,这边整理出来. 首先,DOM对象本身也是一个js对象,所以严格来说,并不是操作这个对象慢,而是说操作了这个对象后,会触发一些浏览器行为,比如布局(layout)和绘制(paint).下面主要先介绍下这些浏览器行为,阐述一个页面是怎么最终被呈现出来的,另外还会从代码的角度,来说明一些不好的实践以及一些优化方案

DOM之节点层次

1.1 Node类型 DOM1级定义了一个Node接口,该接口将由DOM中的所有节点类型实现.这个Node接口在JS中是作为Node类型实现的:除了IE之外,其他浏览器可访问这个类型.JS中的所有节点类型都继承自Node类型.注意:不是所有节点类型都受到了Web浏览器的支持. 每个节点都有一个childNodes属性,其中保存着一个NodeList对象.NodeList是一种类数组对象,并不是Array的实例.它实际是基于DOM结构动态执行查询的结果.除了在IE8-中,可以使用Array.pro

JavaScript高级程序设计学习笔记第十章--DOM

1.DOM:文档对象模型,是针对 HTML 和 XML 文档的一个 API(应用程序编程接口). 2.DOM 可以将任何 HTML 或 XML 文档描绘成一个由多层节点构成的结构. 3.文档节点是每个文档的根节点.在这个例子中,文档节点只有一个子节点,即<html>元素,我们称之为文档元素.文档元素是文档的最外层元素,文档中的其他所有元素都包含在文档元素中.每个文档只能有一个文档元素.在 HTML 页面中,文档元素始终都是<html>元素.在 XML 中,没有预定义的元素,因此任何