집 > 기사 > 웹 프론트엔드 > javascript_javascript 팁에서 이전Sibling 및 nextSibling의 올바른 사용법

javascript_javascript 팁에서 이전Sibling 및 nextSibling의 올바른 사용법

WBOY원래의: 2016-05-16 15:39:131169검색

시간 검증을 할 때 형식을 검증할 필요는 없습니다. 다만, 입력 페이지가 일괄적으로 이루어지고 각 행이 자동으로 생성되기 때문에, 사용할 수 없습니다. id를 매개변수로 사용하며, 노드만 사용할 수 있습니다. 이로 인해 확인이 더 어려워집니다.

다음은 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>

그리고 내 js 함수는 마침내 다음과 같이 작성되었습니다.

js 함수의 목적은 id를 전달하지 않고 두 입력의 값인 시작 시간과 종료 시간을 가져온 후 두 시간을 비교하는 것입니다.

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

먼저 현재 노드 입력 노드의 상위 노드 p(즉, td 노드)를 가져온 다음, 상위 노드의 이전 노드의 첫 번째 하위 노드 입력을 가져옵니다. 이것은 목표를 달성합니다.

여기서 강조하고 싶은 점은 td 노드가 입력 노드의 상위 노드이며 형제 노드로 간주될 수 없다는 점을 잊지 마세요.

또한 말하고 싶습니다: IE와 FF 사이의 PreviousSibling과 nextSibling의 차이점:

먼저 예를 살펴보겠습니다.

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

표면적으로 이 개체의 구조는 div의 nextSibling에 두 개의 항목, 즉 두 개의 입력 노드만 있음을 보여줍니다. 그러나 실제로는 /n,input,/n,input,/n의 5개 항목이 있습니다. 이는 입력이 다양한 양식 입력 컨트롤을 생성하는 레이블로 사용되기 때문입니다. 버튼, 체크박스, 라디오 등을 생성하든 관계없이 IE는 자동으로 끝에 1바이트 공백을 생성합니다.

IE는 노드 사이에 생성된 공백 문서 노드(줄 바꿈 문자 등)를 건너뛰지만 Mozilla는 이를 수행하지 않습니다. FF는 공백 구분 및 줄 바꿈과 같은 레이아웃 요소를 노드 읽기로 처리하므로 다음 노드 요소에서 IE에서 nextSibling을 사용하여 읽을 수 있는 내용은 FF: nextSibling.nextSibling에서 다음과 같이 작성해야 합니다.

이전Sibling은 정확히 반대 효과를 가지고 있지만 사용법은 동일합니다!

다음형제와 이전형제 소개

FireFox에서는 텍스트 노드로 공백이 많이 포함되어 있으므로 nextSibling 및 PreviousSibling을 사용할 때 문제가 발생합니다. FireFox는 실수로 텍스트 노드를 요소 노드의 형제 노드로 취급하기 때문입니다. 판단하기 위해 nodeType을 추가할 수 있습니다. 이전 노드나 다음 노드가 텍스트 노드인 경우 다음 요소 노드를 찾을 때까지 계속 검색합니다. 다음 코드는 참조용이며 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>

nodeType의 주요 값은 다음과 같습니다.

요소 노드의 nodeType 값은 1입니다
속성 노드의 nodeType 값은 2
텍스트 노드의 nodeType 값은 3

성명：

이전 기사：jQuery_jquery를 기반으로 한 기울어진 사이드바 메뉴 특수 효과 코드다음 기사：jQuery_jquery를 기반으로 한 기울어진 사이드바 메뉴 특수 효과 코드

javascript_javascript 팁에서 이전Sibling 및 nextSibling의 올바른 사용법

관련 기사