getElementsByName vs querySelector

Viewed 51

Very simple question...

I want to change the "innerHTML" or "innerText" of an Element by clicking a button. For this I created the following event listener

<script>
    // ##### navbar monitoring, get/set active class #####
    var links = document.querySelectorAll("a");                                                 
    for (let i=0; i<links.length; i++) {                                                        
        links[i].addEventListener('click', function(){                                          
            var currentActive = document.getElementsByClassName("active");                      
            currentActive[0].className = currentActive[0].className.replace(" active", "");     
            this.className += " active";                                                        
            document.querySelector("header").innerHTML = "New Headline";
        });
    };
</script>

The referred element looks like this: <header class="row" name="header">Headline</header>

This is how my first attempt looked like: document.getElementsByName("header").innerHTML = "New Headline"; or document.getElementsByName("header").innerText = "New Headline";

Neither of these worked. Why? Especially since that works: document.querySelector("header").innerHTML = "New Headlines";

0 Answers
Related