En este artículo, aprenderemos sobre los métodos get Element en Javascript para manipular los elementos HTML. También entenderemos su implementación a través de los ejemplos.
Método getElementsByClassName() de JavaScript : este método devuelve un objeto que contiene todo con el nombre de clase especificado, como una colección de objetos de colección HTML que representa una colección de Nodes. Se puede acceder a los elementos devueltos utilizando su índice a partir de cero.
Sintaxis:
document.getElementsByClassName("class_name");
Parámetros: el nombre de clase de los elementos que desea obtener.
Valor de retorno: esta función devuelve el objeto de la colección HTML.
Ejemplo 1: este ejemplo describe el método getElementsByClassName() para encontrar todos los elementos HTML que contienen el mismo nombre de clase.
HTML
<!DOCTYPE html>
<html>
<head>
<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="yellow()"
class="black yellow">
Click to change to yellow button
</button>
<br>
<button onclick="green()"
class="green">
Click to change to green button
</button>
<br>
</div>
<script>
function yellow() {
document.getElementsByClassName('yellow')[0].style.backgroundColor =
'yellow';
}
function green() {
var elements = document.getElementsByClassName('green');
for(var i = 0; i < elements.length; i++) {
elements[i].style.backgroundColor = 'green';
}
}
</script>
</body>
</html>
Producción:
método getElementByClassName()
Método JavaScript getElementById() : este método devuelve el elemento que tiene el atributo ID con el valor especificado. Es elmétodo HTML DOM más utilizado para manipular u obtener información de un elemento en su documento.
Sintaxis:
document.getElementById("id_name");
Parámetros: esta función acepta un único parámetro, es decir, el ID del elemento, y se utiliza para almacenar el ID del elemento.
Valor devuelto: esta función devuelve el valor del atributo ID del elemento.
Ejemplo 2: este ejemplo describe el método getElementById() para especificar el valor de id para el que cambia el comportamiento del elemento al aplicar las propiedades de estilo.
HTML
<!DOCTYPE html>
<html>
<head>
<script>
// Function to change the
// color of element
function color() {
var demo = document.getElementById("heading");
demo.style.color = "green";
}
</script>
</head>
<body style="text-align:center">
<h1 id="heading">GeeksforGeeks</h1>
<h2>DOM getElementById() Method</h2>
<!-- Click on the button to change color -->
<input type="button"
onclick="color()"
value="Click here to change heading color" />
</body>
</html>
Salida: Desde la salida, podemos notar que este método modifica el elemento HTML para el valor de identificación especificado, al hacer clic en el botón.
método getElementById()
Diferencia entre el método getElementsByClassName() Vs getElementById():
S. No. |
método getElementById() |
método getElementsByClassName() |
|---|---|---|
|
1. |
Este método devuelve un objeto de elemento que especifica el elemento para el que la propiedad de identificación coincide con la string especificada, es decir, devuelve un único elemento DOM cuya identificación coincide con la consulta específica. |
Este método devuelve un objeto similar a una array de todos los elementos secundarios que contiene todos los nombres de clases dados, es decir, devolverá una HtmlCollection, una estructura similar a una array que contiene los elementos DOM que coincidieron con la consulta, que se necesita para iterar a través de cada elemento de la array para aplicar el estilo. |
|
2. |
Acepta el id como un valor de parámetro para localizar ese elemento específico. |
Toma el nombre, que es una string, como un valor de parámetro que representa los nombres de clase para hacer coincidir. En el caso de varios nombres de clase, se pueden separar con espacios en blanco. |
|
3. |
Devuelve un valor nulo si no se encuentra ningún elemento coincidente en el documento. |
Devuelve una HTMLCollection activa, con una longitud posible de 0 si no se encuentran elementos coincidentes en el documento. |
Publicación traducida automáticamente
Artículo escrito por aktmishra143 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA