Rumah >hujung hadapan web >tutorial js >Penggunaan yang betul bagi previousSibling dan nextSibling dalam petua javascript_javascript

Penggunaan yang betul bagi previousSibling dan nextSibling dalam petua javascript_javascript

WBOYasal: 2016-05-16 15:39:131191semak imbas

Apabila saya melakukan pengesahan masa, format tidak perlu disahkan saya hanya perlu mengesahkan saiz tarikh mula dan tarikh tamat Walau bagaimanapun, kerana halaman input adalah dalam kelompok dan setiap baris dijana secara automatik. ia tidak boleh digunakan id digunakan sebagai parameter, dan hanya nod boleh digunakan. Ini menjadikan pengesahan lebih sukar.

Berikut ialah bahagian halaman jsp:

<td><input id="warrantyStartDateStr" name="warrantyStartDateStr"        

 class="toolbar_button_input_80" type="Text" onClick="WdatePicker()"></td>
<td><input id="warrantyEndDateStr" name="warrantyEndDateStr" class="toolbar_button_input_80" type="Text" onClick="WdatePicker()" onBlur="checkDateOne(this)"></td>

Dan fungsi js saya akhirnya ditulis seperti ini:

Tujuan fungsi js adalah untuk mendapatkan nilai dua input, iaitu masa mula dan masa tamat, tanpa melepasi id, dan kemudian membandingkan dua masa.

function checkDateOne(inputsNode){
var p = inputsNode.parentNode; //取得input节点的父节点td
var preNode=p.previousSibling.firstChild;//取得td节点的前一个兄弟节点的第一个子结点
var startDate = document.getElementByIdx_x(preNode.id).value;
var endDate = document.getElementByIdx_x(inputsNode.id).value;      
if(startDate.length>0 && endDate.length>0){   
 var startTmp=startDate.split("-"); 
 var endTmp=endDate.split("-"); 
 var sd=new Date(startTmp[0],startTmp[1],startTmp[2]); 
 var ed=new Date(endTmp[0],endTmp[1],endTmp[2]); 
 if(sd.getDate()>=ed.getDate()){  
  alert("起始日期不能大于结束日期");   
   //return false;   
  }   
  }
 }

Mula-mula, dapatkan nod induk p (iaitu nod td) nod input nod semasa, dan kemudian dapatkan input nod anak pertama bagi nod sebelumnya nod induk. Ini mencapai matlamat.

Apa yang ingin saya tekankan di sini ialah jangan lupa bahawa nod td ialah nod induk bagi nod input dan tidak boleh dianggap sebagai nod saudaranya.

Saya juga ingin mengatakan: perbezaan antara Adik-beradik sebelumnya dan seterusnyaAdik-beradik antara IE dan FF:

Mari lihat contoh dahulu:

<body>  
<div>  
<input id= "a4" type= "button" onclick= "alert(this.nextSibling);" value= "d" />  
<input id= "a5" type= "button" onclick= "alert(this.nextSibling);" value= "e" />  
</div>  
</body>

Di permukaan, struktur objek ini menunjukkan bahawa nextSibling div hanya mempunyai dua item - dua nod input. Tetapi sebenarnya terdapat 5 item -/n,input,/n,input,/n. Ini kerana input digunakan sebagai label untuk mencipta pelbagai kawalan input bentuk Sama ada ia menghasilkan butang, kotak semak, radio... atau kawalan borang lain, IE akan secara automatik mencipta kosong 1 bait pada penghujungnya.

IE akan melangkau nod dokumen ruang (seperti aksara suapan baris) yang dijana antara nod, tetapi Mozilla tidak akan melakukan ini - FF akan merawat elemen susun atur seperti pemisah ruang dan suapan baris sebagai nod dibaca, jadi dalam Elemen nod seterusnya yang boleh dibaca menggunakan nextSibling dalam IE perlu ditulis seperti ini dalam FF: nextSibling.nextSibling.

PreviousSibling mempunyai kesan sebaliknya, tetapi penggunaannya adalah sama!

Pengenalan kepada nextSibling dan previousSibling

Mengandungi banyak ruang sebagai nod teks dalam FireFox, jadi masalah akan berlaku apabila kita menggunakan nextSibling dan previousSibling. Kerana FireFox akan tersilap menganggap nod teks sebagai nod adik-beradik nod elemen. Kita boleh menambah nodeType untuk menilai. Apabila nod sebelumnya atau nod seterusnya ialah nod teks, teruskan mencari sehingga nod elemen seterusnya ditemui. Kod berikut adalah untuk rujukan sahaja dan lulus ujian dalam fireFox:

　　　　　　　　//下一个兄弟节点
    function nextSibling(node) {
      var tempLast = node.parentNode.lastChild;
      if (node == tempLast) return null;
      var tempObj = node.nextSibling;
      while (tempObj.nodeType != 1 && tempObj.nextSibling != null) {
        tempObj = tempObj.nextSibling;
      }
      return (tempObj.nodeType==1)&#63; tempObj:null;
    }
    //前一个兄弟节点
    function prevSibling(node) {
      var tempFirst = node.parentNode.firstChild;
      if (node == tempFirst) return null;
      var tempObj = node.previousSibling;
      while (tempObj.nodeType != 1 && tempObj.previousSibling != null) {
        tempObj = tempObj.previousSibling;
      }
      return (tempObj.nodeType==1)&#63; tempObj:null;
    }  

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>
  <script type="text/javascript" language="javascript" >
    window.onload = function () {
      var oUl = document.getElementsByTagName("UL");
      var nodeLi = oUl[0].childNodes[3];
      var nextListItem = nodeLi.nextSibling;
      var preListItem = nodeLi.previousSibling;
      alert(nextListItem.tagName + " " + preListItem.tagName);
      nextListItem = nextSibling(nodeLi);
      preListItem = prevSibling(nodeLi);
      alert(nextListItem.tagName + " " + preListItem.tagName);
    }
    //下一个兄弟节点
    function nextSibling(node) {
      var tempLast = node.parentNode.lastChild;
      if (node == tempLast) return null;
      var tempObj = node.nextSibling;
      while (tempObj.nodeType != 1 && tempObj.nextSibling != null) {
        tempObj = tempObj.nextSibling;
      }
      return (tempObj.nodeType==1)&#63; tempObj:null;
    }
    //前一个兄弟节点
    function prevSibling(node) {
      var tempFirst = node.parentNode.firstChild;
      if (node == tempFirst) return null;
      var tempObj = node.previousSibling;
      while (tempObj.nodeType != 1 && tempObj.previousSibling != null) {
        tempObj = tempObj.previousSibling;
      }
      return (tempObj.nodeType==1)&#63; tempObj:null;
    }  
  </script>
</head>
<body>
  <form id="form1" runat="server">
  <div>
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
      <li>JQuery</li>
      <li>Dom</li>
    </ul>
    <ul>
      <li>ASP.NET</li>
      <li>JSP</li>
      <li>PHP</li>
      <li>VB.NET</li>
    </ul>
  </div>
  </form>
</body>
</html>

Nilai utama nodeType adalah seperti berikut:

Nilai nodeType nod elemen ialah 1
Nilai nodeType bagi nod atribut ialah 2
Nilai nodeType bagi nod teks ialah 3

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：Condongkan menu bar sisi terbuka kod kesan khas berdasarkan jQuery_jqueryArtikel seterusnya：Condongkan menu bar sisi terbuka kod kesan khas berdasarkan jQuery_jquery

Artikel berkaitan

Lihat lagi