这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 javascript 将 DOM 节点添加到文档的方法, 对比分析了 javascript 的两种节点创建的方法, 涉及 javascript 节点操作及运行时间计算的相关技巧, 需要的朋友可以参考下
本文实例讲述了 javascript 将 DOM 节点添加到文档的方法。分享给大家供大家参考。具体如下:
这里对两种方法进行了比较:第一种:先创建所有节点,再添加到文档方式的运行时长;第二种:先向文档添加一个空容器,然后每创建一个节点,再添加到容器中方式的运行时长,从测试来看,第二种方法优于第一种!
运行效果如下图所示:
具体代码如下:
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <title>
- 将DOM节点添加到文档实例
- </title>
- </head>
- <script type="text/javascript">
- //第一种:先创建所有节点,再添加到文档
- function createAdd(count) {
- var start = new Date();
- var container = document.createElement("div");
- var obj = document.getElementById("main");
- for (var i = 0; i < count; i++) {
- var node = document.createElement("div");
- node.style.position = "absolute";
- node.style.left = (6 + parseInt(Math.random() * 100)) + "px";
- node.style.top = (6 + parseInt(Math.random() * 100)) + "px";
- container.appendChild(node);
- }
- obj.appendChild(container);
- var end = new Date();
- var duration = end - start;
- alert("第一种方式:" + duration + "ms");
- }
- //第二种:先添加到文档一个空容器,再创建所有接点,并分别添加到容器中
- function addCreate(count) {
- var start = new Date();
- var container = document.createElement("div");
- var obj = document.getElementById("main");
- obj.appendChild(container);
- for (var i = 0; i < count; i++) {
- var node = document.createElement("div");
- node.style.position = "absolute";
- node.style.left = (6 + parseInt(Math.random() * 100)) + "px";
- node.style.top = (6 + parseInt(Math.random() * 100)) + "px";
- container.appendChild(node);
- }
- var end = new Date();
- var duration = end - start;
- alert("第二种方式:" + duration + "ms");
- }
- //检测输入的数据是否正确
- function checkData() {
- var number = parseInt(document.getElementById("count").value);
- return number;
- }
- //调用createAdd()函数
- function callCreateAdd() {
- var count = checkData();
- createAdd(count);
- }
- //调用addCreate()函数
- function callAddCreate() {
- var count = checkData();
- addCreate(count);
- }
- </script>
- <body>
- <h3>
- 将DOM节点添加到文档实例
- </h3>
- <hr style="border:1px solid #000000;" />
- 请输入一个整数:
- <input type="text" id="count" name="count" />
- <br />
- <input type="button" id="createadd" name="createadd" value="第一种:先创建所有节点,再添加到文档方式的运行时长"
- onClick="callCreateAdd();" />
- <input type="button" id="one" name="one" value="第二种:先向文档添加一个空容器,然后每创建一个节点,再添加到容器中方式的运行时长"
- onClick="callAddCreate();" />
- <br />
- <div id="main" style="position:absolute;">
- </div>
- </body>
- </html>
希望本文所述对大家的 javascript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0422/270134.html