How do I know what element of the HTML to select? Is there absolutely only one way?

#use id tags
or use
.class tags

//you mostly .addClass or .removeClass on certain events like on
<h1>learning js</h1>
    <p>js is: </p>
    <ul id="optionLIst">
        <li>a language that runs in browser</li>
        <li>simple, but powerful</li>
        <li>cool stuff</li>
    </ul>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>
    var id = document.getElementById("optionList")
    var myListItems = document.getElementsByTagName("li")
    $( "li" ).on( "click", function() {
    $( this ).css( "background-color", "red" );
    });
    $( "li" ).dblclick(function(){
        $(this).css("background", "white");
    })
    </script>