Correct use of previussibling and nextSibling in javascript _ javascript skills

This article mainly introduces information about the correct usage of previussibling and nextSibling in javascript. If you need it, you can refer to my time verification. The format does not need to be verified, you only need to verify the size of the start date and end date. However, because the input page is batch and each row is automatically generated, IDS cannot be used as parameters, but nodes can only be used. This increases the difficulty of verification.

The following is a part of the jsp page:

My js functions are written as follows:

The purpose of the js function is to obtain two input values, namely, the start time and end time, without passing the id, and then compare the size of the two time periods.

Function checkDateOne (inputsNode) {var p = inputsNode. parentNode; // The parent node that obtains the input node. tdvar preNode = p. previussibling. firstChild; // get the first child node var startDate = document of the previous brother node of the td node. 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 later than end date"); // return false ;}}}

First, obtain the parent node p (td node) of the input node of the current node, and then obtain the input of the first child node of the previous node of the parent node. This achieves the goal.

It should be emphasized that the td node is the parent node of the input node and cannot be its sibling node.

In addition, the differences between previussibling and nextSibling in IE and FF are as follows:

Let's look at an example:

On the surface of the object structure, the nextSibling of p has only two items-two input nodes. But there are actually five items --/n, input,/n, input,/n. This is because the input is used as the tag to create various form input controls, whether it is to generate buttons, checkbox, radio... or other form controls, IE will automatically create a 1-byte white space.

IE will skip the space document nodes generated between nodes (such as line breaks), but Mozilla will not -- FF will regard typographical elements such as space line breaks as node reads. Therefore, in ie, nextSibling is used to read the next node element. In FF, you need to write nextSibling. nextSibling.

Previussibling has the opposite effect, but its usage is the same!

NextSibling and previussibling

There are many spaces in FireFox as text nodes, so problems will occur when we use nextSibling and previousSibling. Because FireFox will mistakenly treat the text node as the sibling node of the element node. We can add nodeType to judge. When the last or next node is a text node, continue searching until the next element node is found. The following code is for reference only and passes the test in 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. previussibling; while (tempObj. nodeType! = 1 & tempObj. previussibling! = Null) {tempObj = tempObj. previussibling;} return (tempObj. nodeType = 1 )? TempObj: null ;}