JavaScript Get Element By Class Name

In order to use JavaScript Get element by class name you have to have a class. You can use a class in a div or any tag that you want. Here are a few examples of class names and how they are used.

<div class="anyName"></div>
<p class="anyName">Paragraph Text</p>
<span class="anyName">This is a span</span>
<h1 class="anyName">This is a heading</h1>

You Can Use A Class Anywhere

You can use a class anywhere in HTML. Name the class anything that you want. The name of the class does not matter. However when you are targeting the class in JavaScript it does matter that you use the name you give it.

Targeting A Class In JavaScript

Lets say that we named our class myclass. It should look something like this.

<span class="myclass"></span>

To target "myclass" in JavaScript the syntax will look like this.

<script>document.getElementsByClassName('myclass');</script>

If you want to put HTML in the JavaScript you would do something like this.

<script>document.getElementsByClassName('myclass').innerHTML='<p>This is some text.</p>']

JavaScript Get Elements by Class Name is Different Than JavaScript Get Element by id

The important thing to note is that targeting a class name is different than targeting an id. In JavaScript id's and classes are totally different. The syntax use is different too. A class is targeted plurally and an id is targeted singularly.