recherche

Maison  >  Article  >  interface Web  >  Utilisation correcte de previousSibling et nextSibling dans les astuces javascript_javascript

Utilisation correcte de previousSibling et nextSibling dans les astuces javascript_javascript

WBOY
WBOYoriginal
2016-05-16 15:39:131168parcourir

Lorsque je fais la vérification de l'heure, le format n'a pas besoin d'être vérifié. Il me suffit de vérifier la taille de la date de début et de la date de fin. Cependant, comme la page de saisie est par lots et que chaque ligne est générée automatiquement, il ne peut pas être utilisé. L'identifiant est utilisé comme paramètre et seuls les nœuds peuvent être utilisés. Cela rend la vérification plus difficile.

Voici la partie de la page 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>

Et ma fonction js s'écrit finalement comme ceci :

Le but de la fonction js est d'obtenir les valeurs des deux entrées, à savoir l'heure de début et l'heure de fin, sans passer l'id, puis de comparer les deux heures. 

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;   
  }   
  }
 }

Tout d'abord, obtenez le nœud parent p (c'est-à-dire le nœud td) du nœud d'entrée du nœud actuel, puis obtenez la première entrée du nœud enfant du nœud précédent du nœud parent. Cela atteint l’objectif.

Ce que je tiens à souligner ici, c'est qu'il ne faut pas oublier que le nœud td est le nœud parent du nœud d'entrée et ne peut pas être considéré comme son nœud frère.

Je voudrais aussi dire : la différence entre previousSibling et nextSibling entre IE et FF :

Regardons d'abord un exemple : 

<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>

En surface, la structure de cet objet montre que le nextSibling du div n'a que deux éléments - deux nœuds d'entrée. Mais il y a en fait 5 éléments -/n,input,/n,input,/n. En effet, l'entrée est utilisée comme étiquette pour créer divers contrôles de saisie de formulaire. Qu'il s'agisse de générer des boutons, des cases à cocher, des radios... ou d'autres contrôles de formulaire, IE créera automatiquement un espace de 1 octet à la fin.

IE ignorera les nœuds de document d'espace (tels que les caractères de saut de ligne) générés entre les nœuds, mais Mozilla ne le fera pas - FF traitera les éléments de mise en page tels que les sauts d'espace et les sauts de ligne lors de la lecture du nœud, donc dans l'élément de nœud suivant qui peut être lu avec nextSibling dans IE doit être écrit comme ceci dans FF : nextSibling.nextSibling.

PrécédentSibling a exactement l’effet inverse, mais l’utilisation est la même !

Présentation de nextSibling et previousSibling

Contient de nombreux espaces comme nœuds de texte dans FireFox, donc des problèmes surviendront lorsque nous utiliserons nextSibling et previousSibling. Parce que FireFox traitera par erreur les nœuds de texte comme des nœuds frères des nœuds d'élément. Nous pouvons ajouter nodeType pour juger. Lorsque le nœud précédent ou suivant est un nœud de texte, continuez la recherche jusqu'à ce que le nœud d'élément suivant soit trouvé. Le code suivant est uniquement à titre de référence et a réussi le test dans 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>

Les principales valeurs de nodeType sont les suivantes :

La valeur nodeType du nœud de l'élément est 1
La valeur nodeType du nœud d'attribut est 2
La valeur nodeType du nœud de texte est 3

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Code d'effet spécial du menu latéral ouvert inclinable basé sur jQuery_jqueryArticle suivant：Code d'effet spécial du menu latéral ouvert inclinable basé sur jQuery_jquery

Articles Liés

Voir plus