javascript中的previousSibling和nextSibling的正确用法


Posted in Javascript onSeptember 16, 2015

我做的时间的验证,格式是不需要验证的,只需要验证起始日期与结束日期的大小,但是因为输入页面是批量的,而且每一行又是自动生成的,这样就不能用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

Javascript 相关文章推荐
IE DOM实现存在的部分问题及解决方法
Jul 25 Javascript
javascript 读取XML数据,在页面中展现、编辑、保存的实现
Oct 27 Javascript
js获取html文件的思路及示例
Sep 17 Javascript
jQuery中map()方法用法实例
Jan 06 Javascript
Angularjs实现多个页面共享数据的方式
Mar 29 Javascript
搭建Bootstrap离线文档的方法
Dec 02 Javascript
详解Jquery Easyui的验证扩展
Jan 09 Javascript
vue-cli3.0 特性解读
Apr 22 Javascript
JS的Ajax与后端交互数据的实例
Aug 08 Javascript
前端Electron新手入门教程详解
Jun 21 Javascript
javascript贪吃蛇游戏设计与实现
Sep 17 Javascript
微信小程序实现页面监听自定义组件的触发事件
Nov 01 Javascript
Javascript实现商品秒杀倒计时(时间与服务器时间同步)
Sep 16 #Javascript
JS+CSS实现的经典tab选项卡效果代码
Sep 16 #Javascript
使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法
Sep 16 #Javascript
jQuery实现的超酷苹果风格图标滑出菜单效果代码
Sep 16 #Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
Sep 16 #Javascript
JS实现不规则TAB选项卡效果代码
Sep 16 #Javascript
JQuery通过AJAX从后台获取信息显示在表格上并支持行选中
Sep 15 #Javascript
You might like
php 静态变量与自定义常量的使用方法
2010/01/26 PHP
php修改指定文件后缀的方法
2014/09/11 PHP
PHP+MYSQL中文乱码问题
2015/07/01 PHP
PHP中上传文件打印错误错误类型分析
2019/04/14 PHP
javascript 操作cookies及正确使用cookies的属性
2009/10/15 Javascript
10个基于Jquery的幻灯片插件教程
2010/10/29 Javascript
Egret引擎开发指南之视觉编程
2014/09/03 Javascript
超棒的响应式布局jQuery插件Freetile.js
2014/11/17 Javascript
JS实现自动切换文字的导航效果代码
2015/08/27 Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
2016/11/18 Javascript
BootStrap3使用错误记录及解决办法
2016/12/22 Javascript
前端JS面试中常见的算法问题总结
2016/12/23 Javascript
jQuery实现的浮动层div浏览器居中显示效果
2017/02/03 Javascript
使用vuex缓存数据并优化自己的vuex-cache
2018/05/30 Javascript
element ui 表格动态列显示空白bug 修复方法
2018/09/04 Javascript
使用nodejs分离html文件里的js和css详解
2019/04/12 NodeJs
JQuery获取元素尺寸、位置及页面滚动事件应用示例
2019/05/14 jQuery
openlayers4实现点动态扩散
2020/08/17 Javascript
利用React高阶组件实现一个面包屑导航的示例
2020/08/23 Javascript
夯基础之手撕javascript继承详解
2020/11/09 Javascript
vue中如何添加百度统计代码
2020/12/19 Vue.js
python中的__slots__使用示例
2015/02/26 Python
python通过openpyxl生成Excel文件的方法
2015/05/12 Python
Python中字符串List按照长度排序
2019/07/01 Python
python打印直角三角形与等腰三角形实例代码
2019/10/20 Python
python 实现检验33品种数据是否是正态分布
2019/12/09 Python
python装饰器相当于函数的调用方式
2019/12/27 Python
python SOCKET编程基础入门
2021/02/27 Python
汇科协同Java笔试题
2012/03/31 面试题
进修护士自我鉴定
2013/10/14 职场文书
劳资人员岗位职责
2013/12/19 职场文书
高中数学课堂教学反思
2016/02/18 职场文书
2019年二手房买卖合同范本
2019/10/14 职场文书
JavaScript 实现页面滚动动画
2021/04/24 Javascript
JS ES6异步解决方案
2021/04/29 Javascript
MIME类型中application/xml与text/xml的区别介绍
2022/01/18 HTML / CSS