ywxowen999
- 浏览: 24141 次
- 性别:
- 来自: 吉林
-
最新评论
-
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 960在IE浏览器下可以由JS程序调用垃圾回收函数CollectGa ... -
open-flash-chart 2
2012-09-22 22:40 812最近研究了open-flash-chart2这个报表组件，组件 ... -
一段优美的正则
2012-09-08 20:42 1312记录下来，一段优美的 ... -
原生的DOM选择器
2012-09-08 15:38 3147说说下面几个方法： getElementById, getEl ... -
IE 中的id 与name
2012-09-07 16:09 2115火星浏览器(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 1362今天研究KISSY1.3 RC源代码时看到这样一段代码，如下： ... -
IE下的条件编译
2012-09-06 14:24 1001在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 980javascript的闭包特性非常强大，但也常常成为bug的滋 ... -
javascript作用域
2011-08-22 19:37 763今天看到一篇非常帮的文章，博主仅使用几个例子就将javascr ... -
框架结构锁屏实现
2011-08-22 19:30 1881如果大家不知道什么是锁屏，可以去163信箱看一看，用途是你 ... -
SWFObject
2011-08-04 16:17 935SWFObject: 基于Javascript的Flash媒体 ... -
TrimQuery
2011-08-04 12:58 1398TrimQuery引擎是TrimPath开源项目 ... -
JavaScript原型链
2011-07-29 16:18 1581声明，文章中用到的专业名词可能并不标准。请同学指正。 ...
相关推荐
网上可以搜到的大部分都是说使用createDocumentFragment主要是因为避免因createElement多次添加到document.body引起的效率问题，比如： 代码如下: var arrText=[“1″,”2″,”3″,”4″,”5″,”6″,”7″,”8″,”...
内容概要：本文档《数据结构》（02331）第一章主要介绍数据结构的基础概念，涵盖数据与数据元素的定义及其特性，详细阐述了数据结构的三大要素：逻辑结构、存储结构和数据运算。逻辑结构分为线性结构（如线性表、栈、队列）、树形结构（涉及根节点、父节点、子节点等术语）和其他结构。存储结构对比了顺序存储和链式存储的特点，包括访问方式、插入删除操作的时间复杂度以及空间分配方式，并介绍了索引存储和散列存储的概念。最后讲解了抽象数据类型（ADT）的定义及其组成部分，并探讨了算法分析中的时间复杂度计算方法。 适合人群：计算机相关专业学生或初学者，对数据结构有一定兴趣并希望系统学习其基础知识的人群。 使用场景及目标：①理解数据结构的基本概念，掌握逻辑结构和存储结构的区别与联系；②熟悉不同存储方式的特点及应用场景；③学会分析简单算法的时间复杂度，为后续深入学习打下坚实基础。 阅读建议：本章节内容较为理论化，建议结合实际案例进行理解，尤其是对于逻辑结构和存储结构的理解要深入到具体的应用场景中，同时可以尝试编写一些简单的程序来加深对抽象数据类型的认识。
内容概要：本文详细介绍了施耐德M580系列PLC的存储结构、系统硬件架构、上电写入程序及CPU冗余特性。在存储结构方面，涵盖拓扑寻址、Device DDT远程寻址以及寄存器寻址三种方式，详细解释了不同类型的寻址方法及其应用场景。系统硬件架构部分，阐述了最小系统的构建要素，包括CPU、机架和模块的选择与配置，并介绍了常见的系统拓扑结构，如简单的机架间拓扑和远程子站以太网菊花链等。上电写入程序环节，说明了通过USB和以太网两种接口进行程序下载的具体步骤，特别是针对初次下载时IP地址的设置方法。最后，CPU冗余部分重点描述了热备功能的实现机制，包括IP通讯地址配置和热备拓扑结构。 适合人群：从事工业自动化领域工作的技术人员，特别是对PLC编程及系统集成有一定了解的工程师。 使用场景及目标：①帮助工程师理解施耐德M580系列PLC的寻址机制，以便更好地进行模块配置和编程；②指导工程师完成最小系统的搭建，优化系统拓扑结构的设计；③提供详细的上电写入程序指南，确保程序下载顺利进行；④解释CPU冗余的实现方式，提高系统的稳定性和可靠性。 其他说明：文中还涉及一些特殊模块的功能介绍，如定时器事件和Modbus串口通讯模块，这些内容有助于用户深入了解M580系列PLC的高级应用。此外，附录部分提供了远程子站和热备冗余系统的实物图片，便于用户直观理解相关概念。
某型自动垂直提升仓储系统方案论证及关键零部件的设计.zip
2135D3F1EFA99CB590678658F575DB23.pdf#page=1&view=fitH
可以搜索文本内的内容，指定目录，指定文件格式，匹配大小写等
Windows 平台 Android Studio 下载与安装指南.zip
Android Studio Meerkat 2024.3.1 Patch 1（android-studio-2024.3.1.14-windows.zip）适用于Windows系统，文件使用360压缩软件分割成两个压缩包，必须一起下载使用： part1: https://download.csdn.net/download/weixin_43800734/90557033 part2: https://download.csdn.net/download/weixin_43800734/90557035
国网台区终端最新规范
国网台区终端最新规范
1.【锂电池剩余寿命预测】Transformer-GRU锂电池剩余寿命预测（Matlab完整源码和数据） 2.数据集：NASA数据集，已经处理好，B0005电池训练、B0006测试； 3.环境准备：Matlab2023b，可读性强； 4.模型描述：Transformer-GRU在各种各样的问题上表现非常出色，现在被广泛使用。 5.领域描述：近年来，随着锂离子电池的能量密度、功率密度逐渐提升，其安全性能与剩余使用寿命预测变得愈发重要。本代码实现了Transformer-GRU在该领域的应用。 6.作者介绍：机器学习之心，博客专家认证，机器学习领域创作者，2023博客之星TOP50，主做机器学习和深度学习时序、回归、分类、聚类和降维等程序设计和案例分析，文章底部有博主联系方式。从事Matlab、Python算法仿真工作8年，更多仿真源码、数据集定制私信。
Android项目原生java语言课程设计，包含LW+ppt
大学生入门前端-五子棋vue项目
这是一个完整的端到端解决方案，用于分析和预测阿联酋（UAE）地区的二手车价格。数据集包含 10,000 条二手车信息，覆盖了迪拜、阿布扎比和沙迦等城市，并提供了精确的地理位置数据。此外，项目还包括一个基于 Dash 构建的 Web 应用程序代码和一个训练好的 XGBoost 模型，帮助用户探索区域市场趋势、预测车价以及可视化地理空间洞察。 数据集内容 项目文件以压缩 ZIP 归档形式提供，包含以下内容： 数据文件： data/uae_used_cars_10k.csv：包含 10,000 条二手车记录的数据集，涵盖车辆品牌、型号、年份、里程数、发动机缸数、价格、变速箱类型、燃料类型、颜色、描述以及销售地点（如迪拜、阿布扎比、沙迦）。 模型文件： models/stacking_model.pkl：训练好的 XGBoost 模型，用于预测二手车价格。 models/scaler.pkl：用于数据预处理的缩放器。 models.py：模型相关功能的实现。 train_model.py：训练模型的脚本。 Web 应用程序文件： app.py：Dash 应用程序的主文件。 callback
资源内项目源码是来自个人的毕业设计，代码都测试ok，包含源码、数据集、可视化页面和部署说明，可产生核心指标曲线图、混淆矩阵、F1分数曲线、精确率-召回率曲线、验证集预测结果、标签分布图。都是运行成功后才上传资源，毕设答辩评审绝对信服的保底85分以上，放心下载使用，拿来就能用。包含源码、数据集、可视化页面和部署说明一站式服务，拿来就能用的绝对好资源！！！ 项目备注 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、大作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.txt文件，仅供学习参考, 切勿用于商业用途。
资源内项目源码是来自个人的毕业设计，代码都测试ok，包含源码、数据集、可视化页面和部署说明，可产生核心指标曲线图、混淆矩阵、F1分数曲线、精确率-召回率曲线、验证集预测结果、标签分布图。都是运行成功后才上传资源，毕设答辩评审绝对信服的保底85分以上，放心下载使用，拿来就能用。包含源码、数据集、可视化页面和部署说明一站式服务，拿来就能用的绝对好资源！！！ 项目备注 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、大作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.txt文件，仅供学习参考, 切勿用于商业用途。
此为代码审查工具 可查 文件数，字节数，总行数，代码行数，注释行数，空白行数，注释率等
内容概要：本文档涵盖了一项关于企业破产概率的详细分析任务，分为书面回答和Python代码实现两大部分。第一部分涉及对业务类型和破产状态的边际分布、条件分布及相对风险的计算，并绘制了相应的二维条形图。第二部分利用Python进行了数据处理和可视化，包括计算比值比、识别抽样技术类型、分析鱼类数据集以及探讨辛普森悖论。此外，还提供了针对鱼类和树木数据的统计分析方法。 适合人群：适用于有一定数学和编程基础的学习者，尤其是对统计学、数据分析感兴趣的大学生或研究人员。 使用场景及目标：①帮助学生掌握统计学概念如边际分布、条件分布、相对风险和比值比的实际应用；②教授如何用Python进行数据清洗、分析和可视化；③提高对不同类型抽样技术和潜在偏见的理解。 其他说明：文档不仅包含了理论知识讲解，还有具体的代码实例供读者参考实践。同时提醒读者在完成作业时需要注意提交格式的要求。
MCP快速入门实战，详细的实战教程
python，playwright基础