The correct use of previoussibling and nextsibling in JavaScript _javascript techniques

Source: Internet
Author: User
Tags getdate tagname

I do the verification of the time, the format is not required to verify, only need to verify the start date and end date of the size, but because the input page is batch, and each row is automatically generated, so you can not use the ID as a parameter, can only use nodes. This adds to the difficulty of verification.

The following are part of the JSP page:

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

And my JS function is the end of this writing:

The purpose of the JS function is not to pass the ID, but can get two input value, that is, the start time and end time, and then compare the size of two times.

function Checkdateone (inputsnode) {
var p = inputsnode.parentnode;//Get the parent node of the input node TD
Var prenode= p.previoussibling.firstchild;//Gets the first child node of the TD node's previous sibling
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 ("Start date cannot be greater than End Date");   
   return false;}}
 

The first is to obtain the parent node P (that is, the TD node) of the current node input node, and then the first child node input of the parent node's previous node is obtained. This achieves the purpose.

To emphasize here, do not forget that the TD node is the parent node of the input node and cannot be considered as its sibling node.

Also want to say: PreviousSibling and nextsibling in the difference between IE and FF:

Let's take a look at an example:

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

On the structure surface of the object, the DIV's nextsibling has only 2 entries-two input nodes. But there are actually 5 items of--/n,input,/n,input,/n. This is because input is the label that creates various form input controls, whether it is generating a button, a checkbox, a radio ... or other form controls, IE automatically creates a 1-byte bit of white space later.

IE will skip the space document nodes (such as newline characters) that are generated between the nodes, and Mozilla will not do so--FF will read the typographic elements such as the space-wrapping as node reads, so the next node element can be read in IE with nextsibling. This is what you need to write in FF: nextsibling.nextsibling.

PreviousSibling is just the opposite, but the same is true of usage!

Introduction to NextSibling and previoussibling

The

contains many spaces as text nodes in Firefox, so there is a problem when we use nextsibling and previoussibling. Because Firefox will mistake the text node as the sibling node of the element node to handle. We can add nodetype to judge. When the previous node or the next node is a text node, continue looking until the next element node is found. The following code is for reference only and is tested through Firefox:

        Next sibling nodes 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;
      }//Previous sibling node 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; }  

The values of NodeType include the following:

The NodeType value of the element node is 1
The NodeType value of the attribute node is 2
The NodeType value of the text node is 3

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.