El método getElementById() devuelve los elementos que han dado un ID que se pasa a la función. Esta función es un método HTML DOM ampliamente utilizado en el diseño web para cambiar el valor de cualquier elemento en particular u obtener un elemento en particular. Si el ID pasado a la función no existe, devuelve nulo. Se requiere que el elemento tenga una identificación única , para poder acceder rápidamente a ese elemento específico, y también esa identificación en particular solo debe usarse una vez en todo el documento.
Sintaxis:
document.getElementById( element_ID )
Parámetro: esta función acepta un único parámetro element_ID que se utiliza para contener el ID del elemento.
Valor devuelto: Devuelve el objeto del ID dado. Si no existe ningún elemento con el ID dado, devuelve nulo.
Ejemplo 1: este ejemplo describe el método getElementById() donde se usa element_id para cambiar el color del texto al hacer clic en el botón.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
DOM getElementById() Method
</title>
<script>
// Function to change the color of element
function geeks() {
var demo = document.getElementById("geeks");
demo.style.color = "green";
}
</script>
</head>
<body style="text-align:center">
<h1 id="geeks">GeeksforGeeks</h1>
<h2>DOM getElementById() Method</h2>
<!-- Click on the button to change color -->
<input type="button"
onclick="geeks()"
value="Click here to change color" />
</body>
</html>
Producción:
método getElementById()
Ejemplo 2: este ejemplo describe el método getElementById() en el que se usa element_id para cambiar el contenido al hacer clic en el botón.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
DOM getElementById() Method
</title>
<script>
// Function to change content of element
function geeks() {
var demo = document.getElementById("geeks");
demo.innerHTML = "Welcome to GeeksforGeeks!";
}
</script>
</head>
<body style="text-align:center">
<h1>GeeksforGeeks</h1>
<h2>DOM getElementById() Method</h2>
<h3 id="geeks">Hello Geeks!</h3>
<!-- Click here to change content -->
<input type="button"
onclick="geeks()"
value="Click here to change content" />
</body>
</html>
Producción:
método getElementById()
Navegadores compatibles: los navegadores compatibles con el método DOM getElementById() se enumeran a continuación:
- Google Chrome 1.0
- Internet Explorer 5.5
- Microsoft Edge 12.0
- Firefox 1.0
- Ópera 7.0
- Safari 1.0
Publicación traducida automáticamente
Artículo escrito por ankit15697 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA