我做的時(shí)間的驗(yàn)證，格式是不需要驗(yàn)證的，只需要驗(yàn)證起始日期與結(jié)束日期的大小，但是因?yàn)檩斎腠撁媸桥康模颐恳恍杏质亲詣?dòng)生成的，這樣就不能用id來作為參數(shù)，只能用節(jié)點(diǎn)。這就給驗(yàn)證增加了難度。
以下是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函數(shù)最終是這樣寫的：
js函數(shù)的目的就是不通過id，卻能夠獲得兩個(gè)input的value,即起始時(shí)間和結(jié)束時(shí)間，然后比較兩個(gè)時(shí)間的大小。
function checkDateOne(inputsNode){var p = inputsNode.parentNode; //取得input節(jié)點(diǎn)的父節(jié)點(diǎn)tdvar preNode=p.previousSibling.firstChild;//取得td節(jié)點(diǎn)的前一個(gè)兄弟節(jié)點(diǎn)的第一個(gè)子結(jié)點(diǎn)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("起始日期不能大于結(jié)束日期"); //return false; } } }首先是取得當(dāng)前節(jié)點(diǎn)input節(jié)點(diǎn)的父節(jié)點(diǎn)p（即td節(jié)點(diǎn)），然后再取得父節(jié)點(diǎn)的上一個(gè)節(jié)點(diǎn)的第一個(gè)子結(jié)點(diǎn)input。這樣就達(dá)到了目的。
這里想強(qiáng)調(diào)的是，不要忘記td節(jié)點(diǎn)是input節(jié)點(diǎn)的父節(jié)點(diǎn)，不能當(dāng)成是它的兄弟節(jié)點(diǎn)。
另外還想說：previousSibling和nextSibling在IE和FF之間的差異：
先來看一個(gè)例子：
<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>
該對象的結(jié)構(gòu)表面上看，div的nextSibling只有2項(xiàng)――兩個(gè)input節(jié)點(diǎn)。但實(shí)際上有5項(xiàng)――/n,input,/n,input,/n。這是因?yàn)閕nput作為創(chuàng)建各種表單輸入控件的標(biāo)簽，無論是生成button、checkbox、radio...等或其他表單控件，IE都會(huì)自動(dòng)在后面創(chuàng)建一個(gè)1字節(jié)位的空白。
IE將跳過在節(jié)點(diǎn)之間產(chǎn)生的空格文檔節(jié)點(diǎn)（如：換行字符），而Mozilla不會(huì)這樣――FF會(huì)把諸如空格換行之類的排版元素視作節(jié)點(diǎn)讀取，因此，在ie 中用nextSibling便可讀取到的下一個(gè)節(jié)點(diǎn)元素，在FF中就需要這樣寫：nextSibling.nextSibling了。
previousSibling的作用正好相反，但是用法也是同樣的道理！
nextSibling和previousSibling介紹
在FireFox中包含眾多空格作為文本節(jié)點(diǎn)，因此在我們使用nextSibling和previousSibling時(shí)就會(huì)出現(xiàn)問題。因?yàn)镕ireFox會(huì)把文本節(jié)點(diǎn)誤當(dāng)做元素節(jié)點(diǎn)的兄弟節(jié)點(diǎn)來處理。我們可以添加nodeType來判斷。當(dāng)上一節(jié)點(diǎn)或者是下一節(jié)點(diǎn)為文本節(jié)點(diǎn)時(shí)，就繼續(xù)尋找，直到找到下一個(gè)元素節(jié)點(diǎn)。以下代碼僅供參考，在fireFox中測試通過：
//下一個(gè)兄弟節(jié)點(diǎn) 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; } //前一個(gè)兄弟節(jié)點(diǎn) 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); } //下一個(gè)兄弟節(jié)點(diǎn) 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; } //前一個(gè)兄弟節(jié)點(diǎn) 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的值主要有以下幾種：
元素節(jié)點(diǎn)的nodeType值為1
屬性節(jié)點(diǎn)的nodeType值為2
文本節(jié)點(diǎn)的nodeType值為3
新聞熱點(diǎn)
疑難解答
網(wǎng)友關(guān)注
