javascript中的previousSibling和nextSibling的正确用法

更新时间：2015年09月16日 12:10:41 投稿：mrr

这篇文章主要介绍了javascript中的previousSibling和nextSibling的正确用法的相关资料,需要的朋友可以参考下

我做的时间的验证，格式是不需要验证的，只需要验证起始日期与结束日期的大小，但是因为输入页面是批量的，而且每一行又是自动生成的，这样就不能用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，却能够获得两个input的value,即起始时间和结束时间，然后比较两个时间的大小。

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

首先是取得当前节点input节点的父节点p（即td节点），然后再取得父节点的上一个节点的第一个子结点input。这样就达到了目的。

这里想强调的是，不要忘记td节点是input节点的父节点，不能当成是它的兄弟节点。

另外还想说：previousSibling和nextSibling在IE和FF之间的差异：

先来看一个例子：

<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只有2项——两个input节点。但实际上有5项——/n,input,/n,input,/n。这是因为input作为创建各种表单输入控件的标签，无论是生成button、checkbox、radio...等或其他表单控件，IE都会自动在后面创建一个1字节位的空白。

IE将跳过在节点之间产生的空格文档节点（如：换行字符），而Mozilla不会这样——FF会把诸如空格换行之类的排版元素视作节点读取，因此，在ie 中用nextSibling便可读取到的下一个节点元素，在FF中就需要这样写：nextSibling.nextSibling了。

previousSibling的作用正好相反，但是用法也是同样的道理！

nextSibling和previousSibling介绍

在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)? 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)? 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)? 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)? 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

您可能感兴趣的文章:

JS中prototype关键字的功能介绍及使用示例
prototype 关键字可以为JS原有对象或者自己创建的类中添加方法或者属性。也可以实现继承，下面以实例的方式为大家详细介绍下
2013-07-07
JavaScript实现继承的7种方式总结
用官方点的话讲继承是面向对象三大特征之一，可以使得子类具有父类的属性和方法，同时还可以在子类中重新定义以及追加属性和方法。本文整理了JavaScript实现继承的7种方式，需要的可以了解一下
2023-04-04
全屏js头像上传插件源码高清版
这篇文章主要为大家详细介绍了全屏js头像上传插件源码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-03-03
js精度溢出解决方案
一般参数值不能超过16位。如果超出16都是用0替代，导致我们查询不到自己想要的结果，本文将介绍如何处理这种现象
2012-12-12
JavaScript中检测数据类型的四种方法总结
这篇文章主要为大家详细介绍了四个JavaScript中检测数据类型的常用方法，文中的示例代码讲解详细，具有一定的参考价值，需要的可以参考一下
2023-04-04
three.js实现圆柱体
这篇文章主要为大家详细介绍了three.js实现圆柱体的相关代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-12-12
js仿百度贴吧验证码特效实例代码
这篇文章主要介绍了js仿百度贴吧验证码特效实例代码，有需要的朋友可以参考一下
2014-01-01
Javacript实现颜色梯度变化和渐变的效果代码
用js对导航栏的颜色做了梯度的变化处理,通过处理..获取两种颜色在变化时的各种颜色字符串，并且字符串的个数，即获取的频率可以调节
2013-05-05
Javascript 去除数组的重复元素
在js中，如何去除指定数组中的重复元素？
2010-05-05
学习JavaScript中的闭包closure应该注意什么
这篇文章主要介绍了学习JavaScript中的闭包closure应该注意什么?在 JavaScript 中，每当创建一个函数，闭包就会在函数创建的同时被创建出来,但是学习的时候我们应该注意哪些问题呢，带着疑问一起进入下面文章学习具体内容吧
2022-06-06

javascript中的previousSibling和nextSibling的正确用法

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具