Top community members
All Wiki Articles Create Wiki Article

Many years me and my friends we were volunteers on my university doing programming classes for young people.

I got main conclusion: Young people are awesome, especially students, because they always bring new and fresh ideas :)
* I loved to do it but my time is limited

  I decided to create something that will help millions of students

Now I am here

co-founder

JavaScript - get element by class name with code example

0 contributions
14 points

In JavaScript it is possible to get element by class name in few ways.

1. document.getElementsByClassName method example

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<body>
  <div class="element">Element</div>
  <div class="element">Element</div>
  <div class="element">Element</div>
  <script>
  
    var elements = document.getElementsByClassName('element');

    for(var i = 0; i < elements.length; ++i)
        elements[i].textContent = 'Element ' + (i + 1);

  </script>
</body>
</html>

Result:

Get elements by class name preview.
Get elements by class name example.

2. Element.prototype.getElementsByClassName method example

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<body>
  <div class="element">Element</div>
  <div id="container">
    <div class="element">Element</div>
    <div class="element">Element</div>
    <div class="element">Element</div>
  </div>
  <div class="element">Element</div>
  <script>
  
    var container = document.getElementById('container');
    var elements = container.getElementsByClassName('element');

    for(var i = 0; i < elements.length; ++i)
        elements[i].textContent = 'Element ' + (i + 1);

  </script>
</body>
</html>

Result:

Get sub-elements by class name example.
Get sub-elements by class name example.

3. document.querySelector method example

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<body>
  <div class="element">Element</div>
  <div class="element">Element</div>
  <div class="element">Element</div>
  <script>
  
    var element = document.querySelector('.element');

    element.textContent = 'My Element';

  </script>
</body>
</html>

Result:

Get element with querySelector.
Get element with querySelector.

Note: document.querySelector method uses css selectors - it means each class name should be prefixed with dot.

4. ParentNode.prototype.querySelector method example

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<body>
  <div class="element">Element</div>
  <div id="container">
    <div class="element">Element</div>
    <div class="element">Element</div>
    <div class="element">Element</div>
  </div>
  <div class="element">Element</div>
  <script>
  
    var container = document.getElementById('container');
    var element = container.querySelector('.element');

    element.textContent = 'My Element';

  </script>
</body>
</html>

Result:

Get sub-element with querySelector.
Get sub-element with querySelector.

Note: ParentNode.prototype.querySelector method uses css selectors - it means each class name should be prefixed with dot. 

5. document.querySelectorAll method example

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<body>
  <div class="element">Element</div>
  <div class="element">Element</div>
  <div class="element">Element</div>
  <script>
  
    var elements = document.querySelectorAll('.element');

    for(var i = 0; i < elements.length; ++i)
        elements[i].textContent = 'Element ' + (i + 1);

  </script>
</body>
</html>

Result:

Get elements with querySelectorAll.
Get elements with querySelectorAll.

Note: document.querySelectorAll method uses css selectors - it means each class name should be prefixed with dot.

6. ParentNode.prototype.querySelectorAll method example

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<body>
  <div class="element">Element</div>
  <div id="container">
    <div class="element">Element</div>
    <div class="element">Element</div>
    <div class="element">Element</div>
  </div>
  <div class="element">Element</div>
  <script>
  
    var container = document.getElementById('container');
    var elements = container.querySelectorAll('.element');

    for(var i = 0; i < elements.length; ++i)
        elements[i].textContent = 'Element ' + (i + 1);

  </script>
</body>
</html>

Result:

Get sub-elements with querySelectorAll.
Get sub-elements with querySelectorAll.

Note: ParentNode.prototype.querySelectorAll method uses css selectors - it means each class name should be prefixed with dot. 

7. jQuery class selector example

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<body>
  <div class="element">Element</div>
  <div class="element">Element</div>
  <div class="element">Element</div>
  <script>
  
    $(document).ready(function() {
        var elements = $('.element');

        elements.each(function(index, element) {
            $(this).text('Element ' + (index + 1));
        });
    });

  </script>
</body>
</html>

Result:

JQuery class selector example.
JQuery class selector example.

8. jQuery sub-class selector example

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
  <div class="element">Element</div>
  <div id="container">
    <div class="element">Element</div>
    <div class="element">Element</div>
    <div class="element">Element</div>
  </div>
  <div class="element">Element</div>
  <script>
  
    $(document).ready(function() {
        var container = $('#container');
        var elements = $('.element', container);

        elements.each(function(index, element) {
            $(this).text('Element ' + (index + 1));
        });
    });

  </script>
</body>
</html>

Result:

jQuery sub-class selector example.
jQuery sub-class selector example.

References

  1. Document.getElementsByClassName - MDN Docs
  2. Document.querySelector - MDN Docs
  3. Element.querySelector - MDN Docs
  4. Document.querySelectorAll - MDN Docs
  5. Element.querySelectorAll - MDN Docs
  6. Class Selector - jQuery Docs 
0 contributions

Checkout latest Findings & News:

Checkout latest questions:

Checkout latest wiki articles:

Hey ūüĎč
Would you like to know what we do?
  • Dirask is IT community, where we share coding knowledge and help each other to solve coding problems.
  • We welcome everyone,
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.
Read more