For example, when processing an event, you sometimes need to know the number of subnodes currently clicked, and HTMLDOM itself does not directly provide the corresponding attributes and needs to be calculated by yourself. Interested friends can understand this article, for example, when handling events, sometimes they need to know which subnodes are currently clicked, And the html dom itself does not directly provide the corresponding attributes, you need to calculate it by yourself.
From an index serial number, it is easy to obtain the corresponding sub-node or sub-element of the index, directly use parentNode. childNodes [index] Or parentNode. children [index.
However, if a node or element object is known, it is not so straightforward to know its index number.
For some special elements, the html dom has the corresponding attribute to indicate the index sequence number, mainly the TD and TR elements of the table.
The table cell TD element has the cellIndex attribute.
The TR element of the table row has the rowIndex attribute.
If your processing target is a table, use these two attributes first.
However, general nodes or elements do not have attributes such as childNodeIndex or childElementIndex.
There are two main solutions:
1. Pre-calculate and cache the node index number (which can exist in node attributes or js variables ).
Ii. Real-time computing, which involves traversing some nodes.
In the application, you can select one of the above two solutions based on the actual situation.
Applicable scenario 1:
Solution 1 can be used when the DOM structure does not change and the index of individual nodes needs to be frequently obtained.
The advantage is that subsequent reading is fast, but initialization requires overhead. After the DOM structure changes, it needs to be re-initialized.
Scenario 2:
The DOM structure may change, and the index of individual nodes is not frequently obtained. solution 2 can be used.
The advantage is that it is not affected by changes in the DOM structure and does not pollute the DOM structure and has no initialization overhead. The disadvantage is that it is not suitable for high-frequency calls.
Generally, solution 2 is better, because the DOM tree size is usually relatively limited, and a round of loop does not significantly reduce the overall performance, but its advantage is significant.
For ie browsers, there are more direct methods.
Both IE4 and IE11 have the sourceIndex attribute, which indicates the order of elements in the DOM tree, comparing the difference between the sourceIndex of an element and its parent element makes it easy to know which child element the element is.
I have written a function to differentiate processing. In IE, sourceIndex is used for efficient judgment, while in other words, General traversal is used.
The Code is as follows:
Function getChildrenIndex (ele ){
// IE is simplest and fastest
If (ele. sourceIndex ){
Return ele. sourceIndex-ele. parentNode. sourceIndex-1;
}
// Other browsers
Var I = 0;
While (ele = ele. previuselementsibling ){
I ++;
}
Return I;
}
The above function only calculates the Element, that is, the node with nodeType 1. The text node and comment node are not counted. If you need to calculate all nodes, sourceIndex cannot be applied, because this attribute only applies to Element. previuselementsibling and needs to be changed to previussibling. The following function should be written:
The Code is as follows:
Function getNodeIndex (node ){
Var I = 0;
While (ele = ele. previussibling ){
I ++;
}
Return I;
}
Note: In non-IE environments, the compareDocumentPosition method is used to compare the positional relationships of nodes. However, the performance of this method is very poor, its internal implementation mechanism certainly does not cache the resource index number as IE does. If this method is extremely efficient, you can use the binary method for calculation to improve efficiency, but it is not yet possible.
Summary:
The cellIndex and rowIndex attributes are preferred for table TD and TR elements.
The sourceIndex attribute is preferred for IE.
In other cases, use previuselementsibling or previussibling for traversal.
The compareDocumentPosition method has very poor performance.
