Get child node index

Outpacing loops with efficiency

Beyond our main feature, a couple of alternative techniques are available that handsomely skirt the need for traditional loops:

1. Deploy native methods – if brevity and clarity are your MO:

   const index = Array.prototype.indexOf.call(parent.children, child);
   

   "Hold my beer," says call, enabling indexOf to operate on the pseudo-array of children.

2. Turn to ES6 features – for a touch of elegance:

   const index = [...parent.children].indexOf(child);
   

   The spread operator steps up, mutating children into an actual array before indexOf could even grab its coat.

Dodging the curveballs

While these methods might seem like the cat's pajamas, there are scenarios that mandate a pivot in your approach:

• If childNode isn't a direct descendant, indexOf will very firmly return -1.
• In encounters with text nodes, the children attribute might ghost you – turn to childNodes and kindly show non-element nodes the door.

DOM traversal alternatives

For those offbeat occasions when you can't manifest children into an array, make friends with previousElementSibling:

function getChildIndex(child) {
    let index = 0;
    while ((child = child.previousElementSibling) != null) 
        index++;
    return index;
}


That's right, nextElementSibling isn't the only child in the playground – it explores forward through its playmates too. "Ready or not, here I come!"

Treading carefully with compatibility

Maintaining an always-on alert for browser compatibility ensures a smoother sail:

• As the belle of the ball, modern browsers dance gracefully with these methods, older versions, not so much.
• Tread carefully with non-standard properties like parentIndex – they can be the wallflowers at the cross-browser compatibility party.

To jQuery or not to jQuery

While jQuery does present methods like .index(), sticking with vanilla JavaScript boasts higher speed besides steering clear of external library dependencies. ES6 swoops in with the perfect recipe for tackling DOM manipulation without reaching for the jQuery spice.

Respecting JavaScript's evolution and performance

The advent and adoption of augmentations in JavaScript, such as the spread operator and Array.prototype.from, have been a game-changer in making tasks like finding a node’s index a veritable cakewalk. The by-product is a more legible code that's also dressed to kill in performance.

Tools for your arsenal

• For routine scenarios, indexOf paired with array conversion is your go-to hero.
• In need of support for older browsers? Pledge your allegiance to sibling traversal.
• To sideline text nodes, support children over childNodes.