ywxowen999
- 浏览: 24187 次
- 性别:
- 来自: 吉林
-
最新评论
-
zhangfan1990：
楼主的文章有启发啊
JavaScript原型链 -
s2640226szm：
写的不错，理解了原型链
JavaScript原型链
在DOM操纵里，createElement是创建一个新的节点，createDocumentFragment是创建一个文档片段。
网上可以搜到的大项目组都是说应用createDocumentFragment主如果因为避免因createElement多次添加到document.body引起的效力题目，比如：
这个说法并没有错，然则并不严谨，因为像这种用法，首要还是用在目标节点是已存在并且有一项目组内容的景象下，比如上方例子中的body元素，若是目标节点并不存在或者为空，完全可以用createElement创建一个雷同的元素，操纵之后再应用一次appendChild或者replaceChild来达到雷同的目标，如许也不存在反复刷新的题目。
虽说我日常平凡都是把两者混着用，然则还是得熟悉打听两者之间的一点差别：
第一：
createElement创建的元素可以应用innerHTML，createDocumentFragment创建的元素应用innerHTML并不克不及达到预期批改文档内容的结果，只是作为一个属性罢了。两者的节点类型完全不合，并且createDocumentFragment创建的元素在文档中没有对应的标识表记标帜，是以在页面上只能用js中接见到。
demo：
第二：另一个最首要的差别就是createElement创建的元素可以反复操纵，添加之后就算从文档里面移除依旧归文档所有，可以持续操纵，然则createDocumentFragment创建的元素是一次性的，添加之后再就不克不及操纵了（申明：这里的添加并不是添加了新创建的片段，因为上方说过，新创建的片段在文档内是没有对应的标签的，这里添加的是片段的所有子节点）。
一个对比的例子：
来源：http://www.mysjtu.com/page/M0/S660/660001.html
END
网上可以搜到的大项目组都是说应用createDocumentFragment主如果因为避免因createElement多次添加到document.body引起的效力题目，比如：
var arrText=["1","2","3","4","5","6","7","8","9","10"];
for(var i=0;i<arrText.length;i++){
var op=document.createElement()"P");
var oText=document.createTextNode(arrText[i]);
op.appendChild(oText);
document.body.appendChild(op);
}
var arrText=["1","2","3","4","5","6","7","8","9","10"];
var oFrag=document.createDocumentFragment();
for(var i=0;i<arrText.length;i++){
var op=document.createElement("P");
var oText=document.createTextNode(arrText[i]);
op.appendChild(oText);
oFrag.appendChild(op);
}
document.body.appendChild(oFrag);
这个说法并没有错，然则并不严谨，因为像这种用法，首要还是用在目标节点是已存在并且有一项目组内容的景象下，比如上方例子中的body元素，若是目标节点并不存在或者为空，完全可以用createElement创建一个雷同的元素，操纵之后再应用一次appendChild或者replaceChild来达到雷同的目标，如许也不存在反复刷新的题目。
虽说我日常平凡都是把两者混着用，然则还是得熟悉打听两者之间的一点差别：
第一：
createElement创建的元素可以应用innerHTML，createDocumentFragment创建的元素应用innerHTML并不克不及达到预期批改文档内容的结果，只是作为一个属性罢了。两者的节点类型完全不合，并且createDocumentFragment创建的元素在文档中没有对应的标识表记标帜，是以在页面上只能用js中接见到。
demo：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
#outer{ height: 200px; border: 1px solid #006400;}
</style>
</head>
<body>
<div id="outer"></div>
<input type="button" value="createElement" id="btn_1"/>
<input type="button" value="createDocumentFragment" id="btn_2"/>
<script type="text/javascript">
var fragment_1 = document.createDocumentFragment();
fragment_1.innerHTML = "<p>我是一个粉刷匠</p>";
document.body.appendChild(fragment_1);
var fragment_2 = document.createElement("p");
fragment_2.innerHTML = "粉刷本领强";
document.body.appendChild(fragment_2);
</script>
</body>
</html>
第二：另一个最首要的差别就是createElement创建的元素可以反复操纵，添加之后就算从文档里面移除依旧归文档所有，可以持续操纵，然则createDocumentFragment创建的元素是一次性的，添加之后再就不克不及操纵了（申明：这里的添加并不是添加了新创建的片段，因为上方说过，新创建的片段在文档内是没有对应的标签的，这里添加的是片段的所有子节点）。
一个对比的例子：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
#outer{ height: 200px; border: 1px solid #006400;}
</style>
</head>
<body>
<div id="outer"></div>
<input type="button" value="createElement" id="btn_1"/>
<input type="button" value="createDocumentFragment" id="btn_2"/>
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
var outer = $("outer");
var inner = $("inner");
$("btn_1").onclick = function(){
var div = document.createElement("div");
div.innerHTML = "<p>测试createElement</p>";
document.body.appendChild(div);
setTimeout(function(){
outer.appendChild(div);
setTimeout(function(){
outer.removeChild(div);
},1000)
},1000)
}
$("btn_2").onclick = function(){
var p = document.createElement('p');
p.innerHTML = "测试DocumentFragment";
var fragment = document.createDocumentFragment();
fragment.appendChild(p);
fragment.innerHTML = "<p>测试DocumentFragment</p>";
fragment.innerHTML = "<span>测试DocumentFragment</span>";
document.body.appendChild(fragment);
setTimeout(function(){
outer.appendChild(fragment);//报错,因为此时文档内部已经可以或许不存在fragment了
setTimeout(function(){
outer.removeChild(fragment);
},1000)
},1000）
}
</script>
</body>
</html>
来源：http://www.mysjtu.com/page/M0/S660/660001.html
END
分享到：
发表评论
-
js 垃圾回收
2012-10-06 11:42 965在IE浏览器下可以由JS程序调用垃圾回收函数CollectGa ... -
open-flash-chart 2
2012-09-22 22:40 813最近研究了open-flash-chart2这个报表组件，组件 ... -
一段优美的正则
2012-09-08 20:42 1323记录下来，一段优美的 ... -
原生的DOM选择器
2012-09-08 15:38 3149说说下面几个方法： getElementById, getEl ... -
IE 中的id 与name
2012-09-07 16:09 2118火星浏览器(IE)又抽风了表现如下，在IE7下，使用docum ... -
compareDocumentPosition与contains
2012-09-07 13:26 1683研究KISSY 1.3RC源代码DOM/traversal 发 ... -
tabindex
2012-09-06 17:26 0http://www.cnblogs.com/rubylouv ... -
IE的href 设值BUG
2012-09-06 17:21 1363今天研究KISSY1.3 RC源代码时看到这样一段代码，如下： ... -
IE下的条件编译
2012-09-06 14:24 1008在IE浏览器下，可以把部分只针对IE的javascript代码 ... -
判断IE5~IE7
2012-09-06 14:17 0判断IE5~7可以通过检测：document.document ... -
property 和attribute
2012-09-06 13:22 0aaaasdfaaaaa -
KISSY1.3.0RC源码分析一Kissy.js
2012-08-25 18:28 0kissy.js从名字即可以看出它是kissy框架最核心的文件 ... -
javascript闭包
2011-08-22 19:44 981javascript的闭包特性非常强大，但也常常成为bug的滋 ... -
javascript作用域
2011-08-22 19:37 764今天看到一篇非常帮的文章，博主仅使用几个例子就将javascr ... -
框架结构锁屏实现
2011-08-22 19:30 1883如果大家不知道什么是锁屏，可以去163信箱看一看，用途是你 ... -
SWFObject
2011-08-04 16:17 936SWFObject: 基于Javascript的Flash媒体 ... -
TrimQuery
2011-08-04 12:58 1401TrimQuery引擎是TrimPath开源项目 ... -
JavaScript原型链
2011-07-29 16:18 1584声明，文章中用到的专业名词可能并不标准。请同学指正。 ...
相关推荐
网上可以搜到的大部分都是说使用createDocumentFragment主要是因为避免因createElement多次添加到document.body引起的效率问题，比如： 代码如下: var arrText=[“1″,”2″,”3″,”4″,”5″,”6″,”7″,”8″,”...
计算机硬件控制_驱动级键盘鼠标同步_PS2接口UDP协议多机协同_基于rabirdwinio和pynput的跨设备输入共享系统_实现多台Windows电脑的键盘鼠标同步操作_支持
嵌入式八股文面试题库资料知识宝典-TCPIP协议栈.zip
少儿编程scratch项目源代码文件案例素材-开膛手杰克.zip
基于深度学习CNN网络+pytorch框架实现遥感图像滑坡识别源码+数据集+训练好的模型，个人经导师指导并认可通过的高分设计项目，评审分99分，代码完整确保可以运行，小白也可以亲自搞定，主要针对计算机相关专业的正在做大作业的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业，代码资料完整，下载可用。 基于深度学习CNN网络+pytorch框架实现遥感图像滑坡识别源码+数据集+训练好的模型基于深度学习CNN网络+pytorch框架实现遥感图像滑坡识别源码+数据集+训练好的模型基于深度学习CNN网络+pytorch框架实现遥感图像滑坡识别源码+数据集+训练好的模型基于深度学习CNN网络+pytorch框架实现遥感图像滑坡识别源码+数据集+训练好的模型基于深度学习CNN网络+pytorch框架实现遥感图像滑坡识别源码+数据集+训练好的模型基于深度学习CNN网络+pytorch框架实现遥感图像滑坡识别源码+数据集+训练好的模型基于深度学习CNN网络+pytorch框架实现遥感图像滑坡识别源码+数据集+训练好的模型基于深度学习CNN网络+pytorch框架实现遥感图像滑坡识别源码+数据集+训练好的模型基于深度学习CNN网络+pytorch框架实现遥感图像滑坡识别源码+数据集+训练好的模型基于深度学习CNN网络+pytorch框架实现遥感图像滑坡识别源码+数据集+训练好的模型基于深度学习CNN网络+pytorch框架实现遥感图像滑坡识别源码+数据集+训练好的模型基于深度学习CNN网络+pytorch框架实现遥感图像滑坡识别源码+数据集+训练好的模型基于深度学习CNN网络+pytorch框架实现遥感图像滑坡识别源码+数据集+训练好的模型基于深度学习CNN网络+pytorch框架实现遥感图像滑坡识别源码+数据集+训练好的模型基于深度学习CNN网络+pytorch框架实现
内容概要：本文详细探讨了电力弹簧技术在主动配电网规划及运行优化调度中的应用。首先介绍了电力弹簧技术作为智能电网调控手段的优势，如自适应性强、响应速度快、节能环保等。接着阐述了主动配电网规划的目标和策略，包括优化电网结构、提高能源利用效率和降低故障风险。随后讨论了运行优化调度的原则和方法，强调了实时监测、智能调度策略以及优化调度模型的重要性。最后通过实际案例分析展示了电力弹簧技术在提升电网稳定性、可靠性和能效方面的显著效果，展望了其广阔的应用前景。 适合人群：从事电力系统规划、运行管理的研究人员和技术人员，以及对智能电网感兴趣的学者和学生。 使用场景及目标：适用于希望深入了解电力弹簧技术及其在主动配电网规划和运行优化调度中具体应用的专业人士。目标是掌握电力弹簧技术的工作原理、优势及其在实际项目中的实施方法。 其他说明：本文不仅提供了理论分析，还有具体的案例支持，有助于读者全面理解电力弹簧技术的实际应用价值。
嵌入式八股文面试题库资料知识宝典-C语言思维导图.zip
电路教学与科研案例的结合—以最大功率传输定理为例.pdf
内容概要：本文深入介绍了HarmonyOS文件系统及其在万物互联时代的重要性。HarmonyOS自2019年发布以来，逐步覆盖多种智能设备，构建了庞大的鸿蒙生态。文件系统作为其中的“数字管家”，不仅管理存储资源，还实现多设备间的数据协同。文章详细介绍了常见的文件系统类型，如FAT、NTFS、UFS、EXT3和ReiserFS，各自特点和适用场景。特别强调了HarmonyOS的分布式文件系统（hmdfs），它通过分布式软总线技术，打破了设备界限，实现了跨设备文件的无缝访问。此外，文章对比了HarmonyOS与Android、iOS文件系统的差异，突出了其在架构、跨设备能力和安全性方面的优势。最后，从开发者视角讲解了开发工具、关键API及注意事项，并展望了未来的技术发展趋势和对鸿蒙生态的影响。 适合人群：对操作系统底层技术感兴趣的开发者和技术爱好者，尤其是关注物联网和多设备协同的用户。 使用场景及目标：①理解HarmonyOS文件系统的工作原理及其在多设备协同中的作用；②掌握不同文件系统的特性和应用场景；③学习如何利用HarmonyOS文件系统进行应用开发，提升跨设备协同和数据安全。 阅读建议：本文内容详实，涵盖了从基础概念到高级开发技巧的多个层次，建议读者结合自身需求，重点关注感兴趣的部分，并通过实践加深理解。特别是开发者可参考提供的API示例和开发技巧，尝试构建基于HarmonyOS的应用。
嵌入式八股文面试题库资料知识宝典-海康嵌入式笔试题.zip
内容概要：本文详细介绍了基于瞬时无功功率理论的三电平有源电力滤波器（APF）仿真研究。主要内容涵盖并联型APF的工作原理、三相三电平NPC结构、谐波检测方法（ipiq）、双闭环控制策略（电压外环+电流内环PI控制）以及SVPWM矢量调制技术。仿真结果显示，在APF投入前后，电网电流THD从21.9%降至3.77%，显著提高了电能质量。 适用人群：从事电力系统研究、电力电子技术开发的专业人士，尤其是对有源电力滤波器及其仿真感兴趣的工程师和技术人员。 使用场景及目标：适用于需要解决电力系统中谐波污染和无功补偿问题的研究项目。目标是通过仿真验证APF的有效性和可行性，优化电力系统的电能质量。 其他说明：文中提到的仿真模型涉及多个关键模块，如三相交流电压模块、非线性负载、信号采集模块、LC滤波器模块等，这些模块的设计和协同工作对于实现良好的谐波抑制和无功补偿至关重要。
基于环比增长的销售统计分析——2019年中青杯全国数学建模竞赛C题.pdf
嵌入式八股文面试题库资料知识宝典-linux面试题.zip
嵌入式八股文面试题库资料知识宝典-linux常见面试题.zip
内容概要：本文探讨了小电流接地系统在配电网络中的应用，特别是在单相故障情况下的仿真分析。文中介绍了小电流接地系统的背景和发展现状，重点讨论了两种常见的接地方式——中性点不接地和中性点经消弧线圈接地。利用Matlab作为仿真工具，作者构建了详细的电路模型，模拟了单相故障的发生过程，并通过多个结果图表展示了故障电流、电压波形及系统运行状态。此外，文章还包括了详细的设计说明书和PPT介绍，帮助读者全面理解仿真过程和技术细节。 适合人群：从事电力系统研究、维护的技术人员，尤其是关注配电网络安全和稳定的工程师。 使用场景及目标：适用于希望深入了解小电流接地系统的工作原理和故障处理机制的专业人士。通过本研究，读者可以掌握如何使用Matlab进行电力系统仿真，评估不同接地方式的效果，优化配电网络的安全性能。 其他说明：随文附带完整的仿真工程文件、结果图、设计说明书及PPT介绍，便于读者进一步探索和实践。
少儿编程scratch项目源代码文件案例素材-激烈的殴斗.zip
嵌入式八股文面试题库资料知识宝典-小米嵌入式软件工程师笔试题目解析.zip
内容概要：本文详细探讨了车辆主动避撞技术中的两种常见策略——纵向紧急制动避撞和横向紧急转向避撞。首先介绍了这两种避撞策略的基本概念，接着深入分析了临界纵向安全距离的概念及其对避撞模式选择的影响。文中特别强调了五次多项式换道轨迹模型在计算横向紧急转向避撞安全距离中的应用。最后，通过一个简化的程序实现了避撞策略的模拟和可视化展示，帮助读者更好地理解不同避撞方式的应用场景和技术细节。 适合人群：汽车工程技术人员、交通安全研究人员、自动驾驶开发者。 使用场景及目标：适用于研究和开发车辆主动避撞系统的专业人士，旨在提高对避撞策略的理解，优化避撞算法的设计，提升行车安全性。 其他说明：文章不仅提供了理论分析，还结合了具体的数学模型和程序实现，使读者能够从多个角度全面掌握车辆避撞技术的关键要素。
基于MPPSK调制的数字对讲机系统.pdf
嵌入式八股文面试题库资料知识宝典-Nec试题回忆二.zip