How to Getelementbyclass Instead of Getelementbyid with JavaScript

How to getElementByClass instead of GetElementById with JavaScript?

Modern browsers have support for document.getElementsByClassName. You can see the full breakdown of which vendors provide this functionality at caniuse. If you're looking to extend support into older browsers, you may want to consider a selector engine like that found in jQuery or a polyfill.

Older Answer

You'll want to check into jQuery, which will allow the following:

$(".classname").hide(); // hides everything with class 'classname'

Google offers a hosted jQuery source-file, so you can reference it and be up-and-running in moments. Include the following in your page:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
  $(function(){
    $(".classname").hide();
  });
</script>

How to use getElementsByClassName instead of getElementById

This worked.

  document.getElementsByClassName('container')[0].style.marginLeft = '350px';

And so does this which i think is better for my specific situation :

function openNav() {    document.getElementById('side').style.width = '350px';    document.querySelector('.container').style.marginLeft = '350px';}

.sidenav {    height: 100%;    width: 0;    position: fixed;    z-index: 1;    top: 0;    left: 0;    background-color: #111;    overflow-x: hidden;    transition: 0.5s;    padding-top: 60px;}
.sidenav a {    padding: 8px 8px 8px 32px;    text-decoration: none;    font-size: 25px;    color: #818181;    display: block;    transition: 0.3s;}
.sidenav a:hover {    color: #f1f1f1;}
.sidenav .closebtn {    position: absolute;    top: 0;    right: 25px;    font-size: 36px;    margin-left: 50px;}
.container {    transition: margin-left .5s;    padding: 16px;}

<!DOCTYPE html><html><body>
<div id="side" class="sidenav">  <a href="#">About</a>  <a href="#">Services</a>  <a href="#">Clients</a>  <a href="#">Contact</a></div>
<div class="container">  <span style="font-size:30px;cursor:pointer" onclick="openNav()">☰</span></div>
     </body></html>

Using document.getElementsByClassName() instead of id

getElementByClassName returns a NodeList, not a single element. You need to index it:

var element = document.getElementsByClassName("stuffClass")[0];

Or if there are multiple elements with the same class, you need to loop over it.

You could also use document.querySelector:

var element = document.querySelector(".stuffClass");

Equivalent of getElementById for Classes in Javascript

There is simply document.getElementsByClassName("myClass"), which returns an array of all the elements with that HTML class.

If you're using jQuery, you can do it with $(".myClass"), which will return a collection of all of the elements with that class.

Difference between document.getElementById and document.getElementsByClassName

Because getElementsByClassName returns an array-like object of all child elements which have all of the given class names.

Use this instead if you want to do it by class

DEMO 1 -> http://jsfiddle.net/1r0u5d3o/2/

document.getElementsByClassName("move")[0].style.paddingLeft = "50px";

Or if you want to do it to all the elements of the class, use a loop

DEMO 2 -> http://jsfiddle.net/1r0u5d3o/1/

function movefun() {
    var elements = document.getElementsByClassName("move");
    for (var i = 0; i < elements.length; i++) {
        elements[i].style.paddingLeft = "50px";
    }
}

How do I getElementsByClassName instead of getElementById here?

In this case, you can use document.getElementsByClassName("timer")[0] instead of getElementById('countdown').

Change from getElementById to getElementsByClassName

You can use getElementsByClassName and select the first element, because this method returns a list of Elements which is ordered by the position of the elements in the DOM.

So, given that the element you want to get is the first one that appears in your HTML code with that class, you can do:

document.getElementsByClassName("news-image")[0]

And if it isn't the first one, you can change the number and select another element:

document.getElementsByClassName("news-image")[2] // third element

You can also use querySelector to select the first element that matches the given CSS selector, which is, in my opinion, easier:

document.querySelector("img.news-image")

Finally, since I see you're using jQuery as well, you can use it's selector like this:

$("img.news-image")[0]

Talking about your specific code, here's the solution you were looking for:

$(".news-button").click(function(){
    var img = $('img.news-image')[0];
    if (img.src.indexOf('news-bt-1.png')!=-1) {
        img.src  = 'img/news-bt-2.png';
    }
    else {
        img.src = 'img/news-bt-1.png';
    }
});

How to Getelementbyclass Instead of Getelementbyid with JavaScript