Constraining index when selecting DOM elements.

index.html

<!--
This is a simple way to constrain an index to a range. A good use case for this is 
selecting DOM elements and then getting the element on a given index in that selection.
The code in getIndexInSelection() will constrain the index to the range of elements available,
choosing either the highest or lowest index if the requested index is out of range.
-->

<div id="container">

    <section>...</section>
    <section>...</section>
    <section>...</section>
    <section>...</section>
    <section>...</section>
    <section>...</section>
    <section>...</section>

</div>

main.js

var elements = document.querySelectorAll('#container section');

function getIndexInSelection(index) {
    return Math.max(Math.min(index, elements.length - 1), 0);
}

getIndexInSelection(10);   // Returns: 6

getIndexInSelection(8);    // Returns: 6

getIndexInSelection(4);    // Returns: 4

getIndexInSelection(-2);   // Returns: 0