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.

Get Learn ECMAScript - Second Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.