How do I change the innerText on the li element with JavaScript

Question

This code is after the browser's loaded. I need to change the li class buddyName - "Strider" to "Aragon".

<script src="./scripts/fellowship.js"></script>
<main>
    <section id="Middle-Earth">
        <article class="the-shire">...</article>
        <article class="rivendell">
            <h1>Rivendell</h1>
            <aside>
                <ul id="myBuddy">
                    <li class="buddyName">Gandalf the Grey</li>
                    <li class="buddyName">Legolas</li>
                    <li class="buddyName">Gimli</li>
                    <li class="buddyName">Strider</li>
                    <li class="buddyName">Boromir</li>
                </ul>
            </aside>
        </article>
        <article class="morder">...</article>
    </section>
</main>

This was my most recent attempt but not working:

document.querySelectorAll('buddyName'[3]).innerHTML = "Aragorn";   

Answer 1

You would use getElementsByClassName to get all li tags. The next step is select the fourth element of the array and change the value.

document.getElementsByClassName('buddyName')[3].innerHTML= "Aragorn";