Languages
[Edit]
EN

JavaScript - get element by class name with code example

14 points
Created by:
JustMike
26120

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 
Native Advertising
50 000 ad impressions - 449$
ūüöÄ
Get your tech brand or product in front of software developers.
For more information contact us:
Red dot
Dirask - friendly IT community for everyone.

‚̧ԳŹūüíĽ ūüôā

Join