El método getElementsByClassName() en Javascript devuelve un objeto que contiene todos los elementos con los nombres de clase especificados en el documento como objetos. Se puede acceder a cada elemento del objeto devuelto por su índice. El valor del índice comenzará con 0. Se puede llamar a este método en cualquier elemento individual para buscar sus elementos descendientes con los nombres de clase especificados.
Sintaxis:
document.getElementsByClassName(classnames);
Parámetros: este es un método requerido que toma solo un parámetro, que es una string que contiene nombres de clase separados por espacios de los elementos que se van a buscar. Para buscar con varios nombres de clase, debe estar separado por un espacio.
Nota: Podemos usar la propiedad de longitud que devuelve la colección de todos los elementos HTML en un documento para el nombre de clase especificado y luego, al recorrer los elementos HTML, podemos tomar la información que queremos.
Ejemplo 1: este ejemplo describe el método getElementsByClassName() para obtener acceso al elemento HTML por su nombre de clase.
HTML
<!DOCTYPE html>
<html>
<head>
<title>DOM getElementByClassName() Method</title>
<style>
h1 {
color: green;
}
body {
text-align: center;
}
.example {
padding: 10px;
margin: auto;
margin-top: 10px;
border: 1px solid black;
width: 300px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>DOM getElementByClassName() Method</h2>
<div>
<h4 class="example">div1</h4>
<h4 class="yellowBorder example">div2</h4>
<h4 class="greenBorder example">div3</h4>
<h4 class="example">div4</h4> </div>
<script>
document.getElementsByClassName('greenBorder example')[0].style.border =
"10px solid green";
document.getElementsByClassName('yellowBorder example')[0].style.border =
"10px solid yellow";
</script>
</body>
</html>
Producción:
método document.getElementsByClassName()
Ejemplo 2: este ejemplo describe el uso del método document.getElementsByClassName() que accede a las 3 clases de botones con el color específico y altera el color del botón al hacer clic y el último botón restablece los 3 botones anteriores a su estado inicial .
HTML
<!DOCTYPE html>
<html>
<head>
<title>DOM getElementByClassName() Method</title>
<style>
h1 {
color: green;
}
body {
text-align: center;
}
button {
background-color: black;
color: white;
width: 300px;
padding: 10px;
margin: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>DOM getElementByClassName() Method</h2>
<div>
<button onclick="red()" class="black red">
Click to change to red button
</button>
<br>
<button onclick="blue()" class="black blue">
Click to change to blue button
</button>
<br>
<button onclick="yellow()" class="black yellow">
Click to change to yellow button
</button>
<br>
<button onclick="black()">
Click to change to all buttons to initial state
</button>
</div>
<script>
function red() {
document.getElementsByClassName('red')[0]
.style.backgroundColor = 'red';
}
function blue() {
document.getElementsByClassName('blue')[0]
.style.backgroundColor = 'blue';
}
function yellow() {
document.getElementsByClassName('yellow')[0]
.style.backgroundColor = 'yellow';
}
function black() {
var elements = document.getElementsByClassName('black');
for(var i = 0; i < elements.length; i++) {
elements[i].style.backgroundColor = 'black';
}
}
</script>
</body>
</html>
Producción:
método document.getElementsByClassName()
Navegador compatible: los navegadores compatibles con DOM getElementsByClassName() se enumeran a continuación:
- Google Chrome 1.0
- Internet Explorer 9.0
- Microsoft Edge 12.0
- Firefox 3.0
- Ópera 9.5
- Safari 3.1
Publicación traducida automáticamente
Artículo escrito por Archana choudhary y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA