Para selecionar elementos por um determinado nome de classe, você usa o getElementsByClassName()método:
let elements = document.getElementsByClassName('className');Linguagem de código: JavaScript ( javascript )O getElementsByClassName() método retorna uma coleção de elementos cujo nome de classe é a classe CSS que você passa para o método. A coleção de retorno é um arquivo NodeList.
HTML:
<html>
<head>
<title>JavaScript getElementsByClassName() example</title>
</head>
<body>
<div id="container">
<p class="note">The first note.</p>
<p class="note">The second note.</p>
</div>
<p class="note">The third note.</p>
<script src="js/app.js"></script>
</body>
</html>Linguagem de código: HTML, XML ( xml )aplicativo.js
let elements = document.getElementsByClassName('note');
for (let i = 0; i < elements.length; i++) {
console.log(elements[i].innerHTML);
}Linguagem de código: JavaScript ( javascript )Saída:
The first note.
The second note.
The third note.Como the getElementsByClassName()é um método de Element, você pode selecionar elementos com uma determinada classe dentro de um contêiner.
O exemplo a seguir mostra apenas o innerHTML do elemento com a nota de classe CSS dentro do contêiner:
let container = document.getElementById('container');
let elements = container.getElementsByClassName('note');
for (let i = 0; i < elements.length; i++) {
console.log(elements[i].innerHTML);
}Linguagem de código: JavaScript ( javascript )Saída:
The first note.
The second note.
Anterior
