js nextSibling attribute and previousSibling attribute overview and usage notes_Basic knowledge

1: nextSibling attribute
This attribute represents the next node of the current node (the subsequent nodes belong to the same level as the current node); if there is no node of the same level thereafter, null is returned.
It is important to note that the execution results of this attribute are not the same in different browsers. See the following example:
Let’s look at an example first:

On the surface, the structure of this object shows that the nextSibling of div has only 2 items - two inputs node. But there are actually 5 items -/n,input,/n,input,/n. This is because input is used as a label to create various form input controls. Whether it is generating buttons, checkboxes, radios... or other form controls, IE will automatically create a 1-byte blank at the end.
IE will skip the space document nodes (such as line feed characters) generated between nodes, but Mozilla will not do this - FF will treat layout elements such as space breaks and line feeds as node reads, so in The next node element that can be read using nextSibling in IE needs to be written like this in FF: nextSibling.nextSibling.
opera and safari handle nextSibling in the same way as FF

2: previousSibling attribute
This attribute has the opposite effect to the nextSibling attribute. For example: someTagObject.nextSibling.previousSibling actually returns the tag element itself, but the premise must be: there must be a sibling element behind the tag element, otherwise null will be returned.

3: Attribute issues with HTML tag element objects obtained through nextSibling or previousSibling
Generally, the tag name is first obtained through nextSibling.nodeName, or through nextSibling.nodeType. Its label type, then if the nextSibling.nodeName = #text, its text value is obtained through nextSibling.nodeValue; otherwise, its properties can be obtained through other common label element properties such as nextSibling.innerHTML.