Learn ECMAScript - Second Edition

Using the getElementsByTagName method

Similar to the ID method, getElementsByTagName(<Name Of Tag>) gets us elements with a couple of differences:

• It gives you a collection of elements instead of a single element (array)
• It queries for elements on the basis of their tag names and not ID values

Here's an example:

<div>My Content Here</div><script>const div = document.getElementsByTagName('div')[0];div.innerHTML = "Cool"; // above div's text is replaced with "Cool"</script>

Notice the word getElements. It returns us a bunch of elements. Therefore, we pick up the first element from the NodeList and set its contents to Cool.

innerHTML is used to change the HTML content inside the element you're working on.