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.
xxxxxxxxxx1
2
<html>3
<body>4
<div class="element">Some textContent...</div>5
<div class="element">Some textContent...</div>6
<div class="element">Some textContent...</div>7
<script>8
9
var elements = document.getElementsByClassName('element');10
11
for(var i = 0; i < elements.length; ++i)12
elements[i].textContent = 'Element ' + (i + 1);13
14
</script>15
</body>16
</html>Result:
xxxxxxxxxx1
2
<html>3
<body>4
<div class="element">Element</div>5
<div id="container">6
<div class="element">Element</div>7
<div class="element">Element</div>8
<div class="element">Element</div>9
</div>10
<div class="element">Element</div>11
<script>12
13
var container = document.getElementById('container');14
var elements = container.getElementsByClassName('element');15
16
for(var i = 0; i < elements.length; ++i)17
elements[i].textContent = 'Element ' + (i + 1);18
19
</script>20
</body>21
</html>Result:
xxxxxxxxxx1
2
<html>3
<body>4
<div class="element">Element</div>5
<div class="element">Element</div>6
<div class="element">Element</div>7
<script>8
9
var element = document.querySelector('.element');10
11
element.textContent = 'My Element';12
13
</script>14
</body>15
</html>Result:
Note:
document.querySelectormethod uses css selectors - it means each class name should be prefixed with dot.
xxxxxxxxxx1
2
<html>3
<body>4
<div class="element">Element</div>5
<div id="container">6
<div class="element">Element</div>7
<div class="element">Element</div>8
<div class="element">Element</div>9
</div>10
<div class="element">Element</div>11
<script>12
13
var container = document.getElementById('container');14
var element = container.querySelector('.element');15
16
element.textContent = 'My Element';17
18
</script>19
</body>20
</html>Result:
Note:
ParentNode.prototype.querySelectormethod uses css selectors - it means each class name should be prefixed with dot.
xxxxxxxxxx1
2
<html>3
<body>4
<div class="element">Element</div>5
<div class="element">Element</div>6
<div class="element">Element</div>7
<script>8
9
var elements = document.querySelectorAll('.element');10
11
for(var i = 0; i < elements.length; ++i)12
elements[i].textContent = 'Element ' + (i + 1);13
14
</script>15
</body>16
</html>Result:
Note:
document.querySelectorAllmethod uses css selectors - it means each class name should be prefixed with dot.
xxxxxxxxxx1
2
<html>3
<body>4
<div class="element">Element</div>5
<div id="container">6
<div class="element">Element</div>7
<div class="element">Element</div>8
<div class="element">Element</div>9
</div>10
<div class="element">Element</div>11
<script>12
13
var container = document.getElementById('container');14
var elements = container.querySelectorAll('.element');15
16
for(var i = 0; i < elements.length; ++i)17
elements[i].textContent = 'Element ' + (i + 1);18
19
</script>20
</body>21
</html>Result:
Note:
ParentNode.prototype.querySelectorAllmethod uses css selectors - it means each class name should be prefixed with dot.
xxxxxxxxxx1
2
<html>3
<body>4
<div class="element">Element</div>5
<div class="element">Element</div>6
<div class="element">Element</div>7
<script>8
9
$(document).ready(function() {10
var elements = $('.element');11
12
elements.each(function(index, element) {13
$(this).text('Element ' + (index + 1));14
});15
});16
17
</script>18
</body>19
</html>Result:
xxxxxxxxxx1
2
<html>3
<head>4
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>5
</head>6
<body>7
<div class="element">Element</div>8
<div id="container">9
<div class="element">Element</div>10
<div class="element">Element</div>11
<div class="element">Element</div>12
</div>13
<div class="element">Element</div>14
<script>15
16
$(document).ready(function() {17
var container = $('#container');18
var elements = $('.element', container);19
20
elements.each(function(index, element) {21
$(this).text('Element ' + (index + 1));22
});23
});24
25
</script>26
</body>27
</html>Result:
