cari

Rumah >hujung hadapan web >tutorial js >js untuk melaksanakan papan mesej ringkas menggunakan kemahiran DOM operations_javascript

js untuk melaksanakan papan mesej ringkas menggunakan kemahiran DOM operations_javascript

WBOY
WBOYasal
2016-05-16 16:04:571343semak imbas

Contoh dalam artikel ini menerangkan cara js menggunakan operasi DOM untuk melaksanakan papan mesej ringkas. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

Papan mesej ringkas yang ditunjukkan dalam gambar adalah versi hiburan sendiri, secara terang-terangan, ia adalah untuk mempraktikkan operasi DOM.

Perkara 1: document.createElement("nama tag") mencipta elemen baharu

Mata 2: Elemen induk.appendChild("Elemen") Masukkan elemen baharu ke dalam teg halaman (dipaparkan pada teg terakhir), supaya ia akan dipaparkan dalam penyemak imbas

Mata 3: Elemen induk.insertBefore("Elemen","Sebelum elemen mana yang hendak dimasukkan") Masukkan elemen yang baru dibuat di hadapan teg yang ditentukan pada halaman, supaya kandungan yang dimasukkan kemudian akan dipaparkan di hadapan

Mata 4: Elemen induk.removeChild("Element") memadamkan elemen yang ditentukan

Di bawah, kod: 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<script>
window.onload = function(){
 var oMsg = document.getElementById("msg");
 var oBtn = document.getElementById("btn");
 var oMsg_c = document.getElementById("msg_c");
 var oUl = document.createElement("ul");
 oMsg_c.appendChild(oUl);
 oBtn.onclick = function(){
  var sVal = oMsg.value;
  var oli = document.createElement("li");
  oli.innerHTML = sVal + " <span>删除</span>";
  var oli1 = oUl.getElementsByTagName("li");
  if(oli1.length>0){
   oUl.insertBefore(oli,oli1[0]);
  }else{
   oUl.appendChild(oli);
  }
  oMsg.value='';
   var oSpan = document.getElementsByTagName("span");
   for(var i=0; i<oSpan.length; i++){
    oSpan[i].onclick = function(){
     oUl.removeChild(this.parentNode);
    }
   }
 }
} 
</script>
</head>
<body>
<h1>简易留言板</h1>
<input id="msg" type="text" size="40" value="">
<input id="btn" type="button" value="留言">
<div id="msg_c"></div>
</body>
</html>

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.

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：js untuk mencapai kemahiran effect_javascript gerakan penimbalArtikel seterusnya：js untuk mencapai kemahiran effect_javascript gerakan penimbal

Artikel berkaitan

Lihat lagi