cari

Rumah  >  Artikel  >  hujung hadapan web  >  Contoh analisis kaedah menambah nod DOM pada dokumen menggunakan javascript

Contoh analisis kaedah menambah nod DOM pada dokumen menggunakan javascript

PHPz
PHPzasal
2016-05-16 15:47:091295semak imbas

Artikel ini terutamanya memperkenalkan kaedah menambah nod DOM pada dokumen dalam JavaScript, dan membandingkan dan menganalisis dua kaedah penciptaan nod dalam JavaScript, yang melibatkan teknik berkaitan operasi nod JavaScript dan pengiraan masa berjalan Rakan yang memerlukan boleh merujuk kepadanya . Butirannya adalah seperti berikut:

Berikut adalah dua kaedah yang dibandingkan: yang pertama: buat semua nod dahulu, dan kemudian tambahkannya pada masa berjalan dokumen yang kedua: pertama tambahkan bekas kosong ke; dokumen, dan kemudian tambah setiap Masa berjalan untuk mencipta nod dan kemudian menambahkannya pada bekas Dari sudut pandangan ujian, kaedah kedua adalah lebih baik daripada yang pertama.

Kesan operasi ditunjukkan dalam rajah di bawah:

Kod khusus adalah seperti berikut: 

<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("p");
  var obj=document.getElementById("main");
  for(var i=0;i<count;i++)
  {
    var node=document.createElement("p");
    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("p");
  var obj=document.getElementById("main");
  obj.appendChild(container);
  for(var i=0;i<count;i++)
  {
    var node=document.createElement("p");
    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 />
<p id="main" style="position:absolute;"></p>
</body>
</html>

Di atas ialah keseluruhan kandungan bab ini, lebih banyak Untuk tutorial berkaitan, sila lawati Tutorial Video JavaScript!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Kaedah JavaScript untuk menggunakan objek FileSystemObject untuk menulis kandungan kemahiran fail_javascript teksArtikel seterusnya：Kaedah JavaScript untuk menggunakan objek FileSystemObject untuk menulis kandungan kemahiran fail_javascript teks

Artikel berkaitan

Lihat lagi