Contoh analisis kaedah menambah nod DOM pada dokumen menggunakan javascript-tutorial js-php.cn

Contoh analisis kaedah menambah nod DOM pada dokumen menggunakan javascript

PHPz

Lepaskan： 2018-09-29 12:52:21

asal

1319 orang telah melayarinya

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>

Salin selepas log masuk

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