EN
JavaScript - get element by class name
14
points
In this article, we would like to show you how to get elements by class name in JavaScript.
1. document.getElementsByClassName method example
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<body>
<div class="element">Some textContent...</div>
<div class="element">Some textContent...</div>
<div class="element">Some textContent...</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:
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:
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:
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:
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:
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:
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:
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:
